How to push the navigation menu to the right side of the site?

S

San Shu2015-10-15 14:27:41

css

San Shu, 2015-10-15 14:27:41

Guys, I'm learning :) Please help, I need to place the navigation menu in front of the logo. tell me how to write correctly so that everything is even and beautiful.
Code below. Screenshot with the problem too.
Thanks in advance!

<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;  /* Цвет текста при наведении курсора. */
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

rhost, 2015-10-15
@sanshu

codepen.io/anon/pen/ojGdmg

T

timtimIT, 2015-10-15
@timtimIT

Can it be like this