Привет ребята.Верстаю свой первый тренировочный макет.Подскажите пожалуйста как схлопнуть header и main и наложить по средине их стыка nav!? спасибо.
Натянул nav на header с помощью margin-top: -35px;
А схлопнуть блоки nav и div.main_content не выходит,бьюсь головой всю ночь.Помогите плс.
Сори если беспорядок в версте.Тренируюсь пытаюсь что то наработать.
Как на макете.
Как у меня(
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrap">
<header class="header">
<div class="conteiner">
<div class="header_top">
<div class="header_logo">
<a href="" class="logo">
<img src="img/logo.png" alt="" class="logo_pick">
</a>
</div>
<div class="header_slogo">
<img src="img/slogo_pic.png" alt="" class="slogo_pic">
</div>
<div class="header_info">
<div class="nomber_pic">
<img src="img/nomber_pic.png" alt="" class="nomber_logo_pic">
</div>
<div class="header_nomber">
<div class="nomber">
</div>
</div>
<div class="header_logo2_name">
<div class="header_logo2">
<a href="" class="logo2">
<img src="img/logo2.png" alt="" class="logo2_pic">
</a>
</div>
<div class="header_logo2_name">
<span class="logo2_name">Ульяновские кухни</span>
</div>
</div>
</div>
</div>
</div>
</header>
<nav class="menu_bar">
<ul class="list_menu_bar">
<li class="menu_bar_li"><a href=""><span>Главная</span></a></li>
<li class="menu_bar_li"><a href=""><span>О Компании</span></a></li>
<li class="menu_bar_li"><a href=""><span>Услуги</span></a></li>
<li class="menu_bar_li"><a href=""><span>Наши работы</span></a></li>
<li class="menu_bar_li"><a href=""><span>Контакты</span></a></li>
</ul>
</nav>
<div class="main_content">
<div class="menu"></div>
<div class="slider"></div>
</div>
<article class="info_post">
</article>
<footer class="footer">
<div class="footer_mailadres">
uldelta-s.narod.ru
</div>
</footer>
</div>
</body>
</html>
html{
width:100%;
height: 100%;
padding:0;
marging:0;
}
body{
width:100%;
height: 100%;
padding:0;
marging:0;
}
.wrap{
}
.header{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fafafa+0,d3d3d3+100 */
background: #fafafa; /* Old browsers */
background: -moz-linear-gradient(top, #fafafa 0%, #d3d3d3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fafafa 0%,#d3d3d3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fafafa 0%,#d3d3d3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-9 */
border:1px solid green;
height:100px;
}
.conteiner{
height:100px;
width:970px;
margin:auto;
clear:bot;
}
.header_logo{
float:left;
width: 20%;
}
.header_slogo{
float:left;
width: 40%;
}
.header_info{
float:left;
width: 40%;
}
.header_logo2{
float:left;
}
.logo2_name{
color:#de2318;
font-famaly:arial black;
font-size:24pt;
}
.menu_bar{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#07b725+0,07b725+0,07b725+0,087412+100,207cca+100 */
background: #07b725; /* Old browsers */
background: -moz-linear-gradient(top, #07b725 0%, #07b725 0%, #07b725 0%, #087412 100%, #207cca 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #07b725 0%,#07b725 0%,#07b725 0%,#087412 100%,#207cca 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #07b725 0%,#07b725 0%,#07b725 0%,#087412 100%,#207cca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07b725', endColorstr='#207cca',GradientType=0 ); /* IE6-9 */
margin:auto;
width:975px;
height:40px;
border-radius: 15px;
margin-top:-35px;
}
.menu_bar_li{
display:inline;
}
.main_content{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+0,d9d9d9+100,7db9e8+100 */
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfc 0%, #d9d9d9 100%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #fcfcfc 0%,#d9d9d9 100%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #fcfcfc 0%,#d9d9d9 100%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
height:550px;
border:1px solid green;
}
.info_post{
height:370px;
background-color:#FAFAFA;
}
.footer{
background-color:#A5A5A4;
height: 50px;
color: #FFFFFF;
border:1px solid green;
}
a{
text-decoration:none;
}
ul{ padding:0;
marging:0;
}
li{
list-style:none;
}
p{
margin:0;
padding:0;
}
Простой
