Question

Здравствуйте. Столкнулся со следующей проблемой. При добавлении значения padding кнопкам меню, они начинают выпирать из строчки меню.

 

Цитата

body {
 background: #FAEBD7;
 margin: 0;
 padding:0;
}

.wrapper {
 width: 90%;
 margin: 0px 5% 0px 5%;
}

.header {
 margin: 35px 50px 0px 50px;
 height: 100px;
}

.logo {
 float: left;
}

.social {
 float: right;
}

.menu {
 background: #000000;
 height: 36px;
}

.navigation {
 margin-left: 80px;
 margin-top: 9px;
}

a.button {
 font-size: 16px;
 font-weight: 700;
 padding: 9px;
 color: white;
 text-decoration: none;
 background: #000000;
}

a.button:hover {
 background: #B22222;
}

HTML:

Цитата

<div class="navigation">
<a href="/" class="button">Главная</a>
<a href="/" class="button">Услуги</a>
<a href="/" class="button">Прайс</a>
<a href="/" class="button">Отзывы</a>
<a href="/" class="button">Контакты</a>
</div>

 
Попытался меню завернуть в еще один div (div class="navigation"), и сделал отступ сверху, с помощью margin-top - проблему решить не помогло.
Заранее благодарен.

Answer 1

Добавьте такой же паддинг и к навигейшин, и для меню 38px сделайте.

Comments

Благодарю, Ваш совет сработал.

Answer 2

Исправьте стили:

.navigation { margin-left: 80px; margin-top: 9px; }

на:

.navigation { margin-left: 80px; position: relative; top: 9px; }