Верстаю шаблон, там полоска навигации есть с полупрозрачным фоном и изображение, изображение находится под полоской и потом уходит ниже под нее. Сделал полоску из 2х контейнеров (логотип, навигация) потом пустой контейнер с фоновым изображением. И получилось как раз так как надо, почему?))) С чего это контейнер залезает на контейнеры другие? Если задать абсолютное позиционирование полоска навигации вообще исчезает.(думал как раз так сделать, задав координаты повыше чтобы налазил на навигацию и возможно задав z-index) Есть предположение что это из-за floatов и отсутствия clearfix [Если можно как сделать по другому грамотно это намекните]
<meta charset="utf-8">
<title>Верстка2</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<header>
<div class="logo">
<a href="#">BLU<span>E</span>ASY</a>
</div>
<nav>
<li><a href="#" class="home_link">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CONTACT</a></li>
</nav>
<div class="top_photo"></div>
</header>
CSS:
body {
font-size: 14px;
}
a {
text-decoration: none;
color: #fff;
}
header .logo {
box-sizing: border-box;
font-size: 30px;
font-family: SegoeUIBold;
width: 50%;
height: 160px;
float: left;
padding: 65px 0 65px 375px;
background: #353f46;
opacity: 0.85;
}
header .logo span {
color: #4bcaff;
}
nav {
box-sizing: border-box;
width: 50%;
float: right;
height: 160px;
background: #353f46;
opacity: 0.85;
}
nav li {
display: inline-block;
}
nav a {
color: #f1f2f2;
display: block;
padding: 10px 18px 10px ;
margin-right: -4px;
}
nav .home_link {
margin: 58px -4px 0 60px ;
border: 2px solid #4bcaff;
color: #4bcaff;
}
nav a:hover {
border: 2px solid #4bcaff;
color: #4bcaff;
}
.top_photo {
width: 1920px;
height: 800px;
background: url(…/img/top_photo.png);
}
