Report
-
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;
}
Скриншот приложил. Заранее спасибо
-