sanshu
@sanshu
Frontend developer

Как прижать меню навигации к правой стороне сайта?

Ребят, учусь :) Помогите пожалуйста, нужно разместить меню навигации напротив логотипа. подскажите как правильно прописать, чтоб все ровненьки и красивенько.
Код ниже. Скрин с проблемой тоже.
Заранее спасибо!
<body>
	<div class="main">
		<div class="header">
			<div class="logo">
				<img src="images/1/logo.png" height="42" width="120" alt="logo" title="logo">	
			</div>
			<ul class="nav">
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">WORK</a></li>
				<li><a href="#">BLOG</a></li>
				<li><a href="">CONTACT</a></li>
			</ul>
		</div>
	</div>	
</body>


body {
	background: #efefef; margin: 0; padding: 0;
	font: 16px/24px Arial, Tahoma, sans-serif;
}
.header {
	background: #87509c;/*Цвет хедера*/
}

.logo {
	padding-top: 150px; /*Отступ сверху*/
	padding-left: 300px;/*Отступ справа*/
}

.nav {
	list-style: none; /*откл. маркеров*/
}
.nav li{
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 0px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 16px; /* Размер текста в ссылках. */  
}

.nav li a {
	display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
	padding: 10px 15px;  /* Внутри блочные отступы. */
	background: #87509c; /* Цвет блоков меню. */
	color: #efefef; /* Цвет текста в блоках меню. */
	text-decoration: none; /* Устранение подчёркивания ссылок. */
	position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}

.nav li a:hover {
   background: #643a79; /* Цвет блока при наведении курсора. */
   color: #efefef;  /* Цвет текста при наведении курсора. */
}

201ea7563d124627b6f9699a68079874.png
  • Вопрос задан
  • 6271 просмотр
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@timtimIT
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы