Вертикальное меню на уровне с header

332

18 июня 2017, 15:26

Уже долго ломаю голову, но никак не получается сделать так, чтоб вертикальное меню с лого были на уровне с хедером

@font-face { 
	font-family: OpenSans-Bold; 
	src:url(fonts/OpenSans-Bold.ttf); 
} 
 
* { 
	padding: 0; 
	margin: 0; 
} 
 
ul { 
	list-style: none; 
} 
 
a { 
	text-decoration: none; 
} 
 
body { 
	background-color:#4c4c4c; 
	font-family: OpenSans-Bold,sans-serif,Arial; 
 	padding: 87px 115px 75px 125px; 
} 
 
.wrapper { 
	width: 960px; 
	margin:0 auto; 
} 
 
header { 
	background-color: #00aeef; 
	height: 163px; 
} 
 
.header { 
	float:left; 
	margin:50px 40px 0px 30px; 
} 
 
 
.logo_head img {							/*logo */ 
	width: 175px; 
	height: 55px; 
	background: #1f2229; 
	position:fixed; 
} 
 
#menuVertical { 
	width: 321px; 
	height: 538px; 
	background: #1f2229; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<title>Вертикальное меню</title> 
	<meta charset="UTF-8"> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<div class=wrapper> 
	<header> 
		<div class="header"> 
			<h1>Заголовок страницы</h1>	 
			<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Далеко-далеко за словесными горами в стране.</p> 
		</div> 
	</header> 
		<nav id="menuVertical"> 
			<div class="logo_head"> 
				<div class="logo"><a href="#"></a> </div> 
			</div> 
				<ul> 
					<li><a href="#1"><span>Первая ссылка</span></a></li> 
					<li><a href="#2"><span>Вторая ссылка(активная)</span></a></li> 
					<li><a href="#3"><span>Третья ссылка</span></a></li> 
					<li><a href="#4"><span>Личный кабинет</span></a></li> 
					<li><a href="#4"><span>Выйти</span></a></li> 
				</ul> 
		</nav> 
	<div class="menu"><div class="footer"></div></div> 
</div> 
</body> 
</html>

Answer 1

Вот как я это сделал.

Поменял местами header И #menuVertical. Сделал #menuVertical плавающим(floating) и после этого уже блочные элементы и они не видят друг друга. И добавил padding с лева у header.

@font-face { 
    font-family: OpenSans-Bold; 
    src:url(fonts/OpenSans-Bold.ttf); 
} 
 
* { 
    padding: 0; 
    margin: 0; 
} 
 
ul { 
    list-style: none; 
} 
 
a { 
    text-decoration: none; 
} 
 
body { 
    background-color:#4c4c4c; 
    font-family: OpenSans-Bold,sans-serif,Arial; 
    padding: 87px 115px 75px 125px; 
} 
 
.wrapper { 
    width: 960px; 
    margin:0 auto; 
} 
 
header { 
    background-color: #00aeef; 
    height: 163px; 
    padding-left: 321px; 
} 
 
.header { 
    float:left; 
    margin:50px 40px 0px 30px; 
} 
 
 
.logo_head img {							/*logo */ 
    width: 175px; 
    height: 55px; 
    background: #1f2229; 
    position:fixed; 
} 
 
#menuVertical { 
    float: left; 
    width: 321px; 
    height: 538px; 
    background: #1f2229; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<title>Вертикальное меню</title> 
	<meta charset="UTF-8"> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<div class=wrapper> 
    <nav id="menuVertical"> 
        <div class="logo_head"> 
            <div class="logo"><a href="#"></a> </div> 
        </div> 
        <ul> 
            <li><a href="#1"><span>Первая ссылка</span></a></li> 
            <li><a href="#2"><span>Вторая ссылка(активная)</span></a></li> 
            <li><a href="#3"><span>Третья ссылка</span></a></li> 
            <li><a href="#4"><span>Личный кабинет</span></a></li> 
            <li><a href="#4"><span>Выйти</span></a></li> 
        </ul> 
    </nav> 
    <header> 
        <div class="header"> 
            <h1>Заголовок страницы</h1>	 
            <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Далеко-далеко за словесными горами в стране.</p> 
        </div> 
    </header> 
    <div class="menu"><div class="footer"></div></div> 
</div> 
</body> 
</html>