- 0
-
Similar Content
-
By gars
Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS.
Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат.
и вижу. что блок main наехал на блок header.
Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки). как решить и почему произошло? Заранее благодарю всех за помощь
Скрин прикрепляю.
HTML
<body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS
body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }
-
By intman
Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм. И составил их в столбец, обернув все в общий блок.
<div class="d4"> <div class="d1"></div> <div class="d5"></div> <div class="d3"></div> </div> Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело.
Код CCS такой
Треугольник сверху
width: 0; height: 0; border-top: 100px solid #68B8AE; border-right:425px solid transparent; display:inline-block; margin-top:600px; параллелогамм
-moz-transform: rotate(76deg) skew(7deg, 15deg); -webkit-transform: rotate(76deg) skew(7deg, 15deg); -o-transform: rotate(76deg) skew(7deg, 15deg); -ms-transform: rotate(76deg) skew(7deg, 15deg); transform: rotate(76deg) skew(7deg, 15deg); width:250px; height:450px; border:4px solid #8B0000; background:#7FFF00; margin-left:86px; треугольник снизу
width: 0; height: 0; border-bottom: 100px solid red ; border-left: 425px solid transparent; margin-bottom:700px; display:inline-block; }
-
By iiwanc
Здравствуйте!
Простите, если не сюда пишу.
Только начинаю изучать HTML и CSS.
Сверстал страницу, на которой присутствуют шапка, футер, меню.
Страница трехколоночная. Сайт планирую делать многостраничным.
Теперь задался вопросом: Как разместить основные блоки сайта на всех страницах?
Имею в виду: футер, шапку, боковые колонки.
Не размещать же их на каждой странице. Имею в виду, если кликнуть на ссылку в меню, то открывается новая страница без меню, футера и т.д.
Как сделать, чтобы эти основные блоки отображались во всех страницах.
Буду рад советам!
По форуму искал и читал, но не смог применить некоторые наброски к своему сайту.
Так понимаю, необходимо какие-то скрипты подключить?
Сайт на PHP не хотелось бы писать. Еще не дорос до него
Прикрепляю файлы, что сделано.
index.html
style.css
-
By Eugenice
Добрый вечер, уважаемые форумчане.
Я пишу с нуля свой первый сайт и у меня на этапе верстки возникла проблема с размещением меню, что вкладывается в блок header. При масштабировании страницы, меню меняет свои значения: либо оно вылазит за пределы блока-родителя, либо не доходит до его границ (появляются неприятные белые полосы). Возникает вопрос, как зафиксировать меню так, чтобы масштабирование не меняло расположение его блоков?
+ при масштабе в 100% приходится использовать не целочисленное значения в отступах nav ul li a {padding:41.6px 50px;} для того, чтобы избавиться от белой линии под блоком (методом подгона). Хочется понять, как можно "вылечить" и этот дефект. Раз высота шрифта 15px, а высота блока header 100px, то отступы сверху-снизу должны быть (100-15)/2=42.5. Откуда тогда берется 41.6 не совсем понятно.
Прикладываю скриншот https://yadi.sk/i/HOGOClqb3Gmy2k с описанием для лучшего понимания ситуации, а сам код прикрепил к сервису codepen:
С уважением, Евгений.
-
By serjdjio
Помогите советом. Как склеить два элемента?
код нижнего:
.underhead {
background: #ededed;
padding: 35px 0 22px 50px;
}
.underhead li {
float: left;
padding: 12px 0 12px 90px;
}
.underhead h3 {
font-size: 15px;
color: #575757;
}
.underhead:auto {
content: '';
display: table;
clear: both;
}
Скриншот приложил. Заранее спасибо
-
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо.
-
Question
Anna-15
Нужно чтобы блоки стояли так:
Сейчас блоки стоят так:
Подскажите, пожалуйста, как выронить блоки, чтобы они стояли ровно?
Код:
#content {margin-left: 270px;padding: 10px;background: #f0f0f0;height: 900px;}.cat {height: 190px;width: 340px;float: left;padding: 1px;margin-top: 20px;margin-left: 20px;text-align: left;border: 1px solid #8fa09b;background: #ffffff;}—-<div id="content"><div class="cat"></div><div class="cat"></div><div class="cat"></div><div class="cat"></div></div>Edited by Anna-15Link to comment
Share on other sites
5 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.