0

Сижу уже долго. Помогите, пожалуйста, как можно выровнить активный пункт мену, так, чтобы он выглядел так:

alt text Так выглядит сейчас:

alt text

html:

<nav>
<div class="wrapper">
<ul>
  <li class="active"><a href="#">Главная</a></li>
  <li class=""><a href="#">Сервис</a></li>
  <li class=""><a href="#">Миномонтаж</a></li>
  <li class=""><a href="#">Прайс-лист</a></li>
  <li class=""><a href="#">Контакты</a></li>
</ul>
</div>

css:

nav {
    -moz-box-shadow: rgba(0, 0, 0, .4) 0px 0px 1px 1px;
    -webkit-box-shadow: rgba(0, 0, 0, .4) 0px 0px 1px 1px;
    background: url("../img/menu-bg.jpg");
    box-shadow: rgba(0, 0, 0, .4) 0px 0px 1px 1px;
    height: 49px;
    width: 100%;
}
nav a {
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
}
nav ul {
    display: block;
    list-style: none;
}
nav ul li {
    display: block;
    float: left;
    margin-left: 60px;
    margin-top: 12px;
}
nav .active {
    background: url("../img/nav-active.png") repeat-x;
    height: 37px;
    width: 117px;
}
2
  • А напрячь булки, и попробовать самому решить, а что не понятно спросить. Что за мода просить сделать за Вас!?
    – markuper
    14 янв 2013 в 12:47
  • Просто у меня заказ, и на долгие размышления нет времени.
    – user8578
    14 янв 2013 в 13:12

2 ответа 2

4

Так устроет! http://jsfiddle.net/yjAVq/

1
  • Большое спасибо! Вы мне действительно помогли!
    – user8578
    14 янв 2013 в 12:51
2

Для этого есть code inspector (я пользуясь в хроме) а в нем есть инструмент metric P.S. Попробуй так:

nav div a { color: #000; text-transform: uppercase; font-size: 14px; }
nav div ul { list-style: none; display: block; }
nav div ul li { float: left; margin-top: 12px; margin-left: 60px; display: block; }
nav div ul li.active { background: url(../img/nav-active.png) repeat-x; width: 117px; height: 37px; }
1
  • Спасибо!Но у меня не получается выровнять. Как сделать на active это знаю. Но как сделать ровно так, как на первом скриншоте я не знаю.
    – user8578
    14 янв 2013 в 9:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.