Верстка сайта, фиксированный header

vanush0k · 02.03.2015

Я в этом деле новичок, решил поупражняться, сделать сайт для друга. Но возникла проблема - решил зафиксировать header сверху, но так как фон полупрозрачный, текст из cont'a наезжает на него. Можете посоветовать способ (кроме "непрозрачного header'a"), чтобы тот текст, который оказывается в области header'a исчезал, его не было видно?

CSS:

#header {
height: 70px;
width:1000px;
border-bottom: solid 2px #000000;
position: fixed;
left: auto;
top: 10px;
overflow: hidden;
}
#cont{
padding: 5px 10px;
padding-top:72px;
}

-master- · 02.03.2015

область надо делать не под хидер

vital · 03.03.2015

z-index: 999; стоит добавить для шапки, что бы она была всегда сверху. Как вариант, подубрав прозрачность и сделав градиент.
Ну или область которая cont, cтоит обрамить в див, которому проставить отступ сверху(top) равный высоте шапки, что бы текст не налазил на блок шапки, вот и все.

vanush0k · 03.03.2015

b

-master- сказал(а):
область надо делать не под хидер

А можете мысль развить?

[DOUBLEPOST=1425380432,1425380229][/DOUBLEPOST]

vital сказал(а):
z-index: 999; стоит добавить для шапки, что бы она была всегда сверху. Как вариант, подубрав прозрачность и сделав градиент.
Ну или область которая cont, cтоит обрамить в див, которому проставить отступ сверху(top) равный высоте шапки, что бы текст не налазил на блок шапки, вот и все.

Отступ уже сделан, проблема возникает именно когда начинаешь листать страницу вниз. Когда страница в самой верхней точке, все выглядит вот так:

z-index попробовал добавить - ничего не получилось. Я могу приложить полный код сайта и буду премного благодарен, если вы согласитесь помочь

-master- · 03.03.2015

полный не надо, только там где проблема

vanush0k · 03.03.2015

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Бабочки</title>
<meta charset="UTF-8">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="js/main.js" rel="stylesheet" type="text/js">
<link href='http://fonts.googleapis.com/css?family=Lora:400,400italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,300italic,400italic,500italic&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="page_align">
<div id="header">
<h1>WYLabt</h1>
<div id="header_nav">
<ul>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Гарантия</a></li>
<li><a href="#">Каталог</a></li>
</ul>
</div>
</div>
<div id="cont">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<footer>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</footer>
<div class="clr"></div>
</div>
</body>
</html>

CSS:

#page_align{
width: 1000px;
margin: 10px auto;
background: rgba(0,0,0,0.63);
box-shadow: 0px 3px 10px #000;
overflow: hidden; 
}
#header {
height: 70px;
width:1000px;
border-bottom: solid 2px #000000;
position: fixed;
left: auto;
top: 10px;
}
#header_nav{
float: left;
margin-right: 100px;
}
#header_nav ul {
list-style: none;
}
#header_nav ul li{
border-right: solid 2px #000;
float: right;
line-height: 70px;
padding:0px 30px;
font-size: 24px;
}
#header_nav ul li:nth-child(1){
border-right: none;
}
#header_nav ul li a{
display: block;
}
h1{
float: left;
line-height: 70px;
padding: 0px 30px;
font-family: 'Lora', serif;
font-size: 36px;
}
#cont{
padding: 5px 10px;
margin-top:72px;
}
.clr{
clear: both;
}
footer{
border-top:solid 2px #000000;
padding: 5px 10px;
}

devunion · 18.09.2015

Как решили проблему?

Ссылка скрыта от гостей

вам в помощь в следующий раз при выкладывании кода.

Все сервисы Codeby

Поиск

Поиск

Верстка сайта, фиксированный header

vanush0k

-master-

vital

vanush0k

-master-

vanush0k

devunion

Похожие темы

Курс AD