Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Верстка меню

Автор: lapulya9 8.7.2010, 14:55

Нужно сделать такое вот горизонтальное меню:
user posted image

Я сделала все кроме разделителей (нестандартные, дизайнер дал отдельным слоем) и галочки внизу под выделенным пунктом (тоже есть отдельным слоем)
Вот что вышло:

html

Код


<div id="menu">
    <ul>
        <li><a href="/">HOME</a></li>
        <li><a href="/">CONTACT US</a></li>
        <li><a href="/">ABOUT AVALON</a></li>
        <li><a href="/">CLIENT WEBSITES</a></li>
        <li><a href="/">LIBRARY</a></li>
        <li><a href="/">HELPFUL LINKS</a></li>
    </ul>

css

Код


#menu {
    width:753px;
    height:35px;
    background-image:url(img/bg-header.jpg);
    background-repeat:no-repeat;
    margin-left:129px;
    margin-top:56px;
    
}
#menu li{
    float: left; 
    margin-right: 15px;
    list-style: none;
}
#menu li a{
    display: block;
    padding: 8px 2px 0px 5px;
    position: relative;
    font-family:Times New Roman, Helvetica;
    color:fefefe;
    text-decoration:none;
    color:#fefefe;
    font-size:16px;
    font-weight:bold;
}
#menu li a:hover {
    background: #9e9e6f;
    margin-top:2px;
}

Подскажите как реализовать эти два момента.
На данный момент имеется вот что:

user posted image

На шрифт внимание не обращайте, пока такой будет

Автор: m0ro 8.7.2010, 15:34

1. Берём разделитель и делаем его фоном для элементов спска, смещённым вправо.
2. Берём "стрелочку" и делаем её фоном для hovered-ссылки, позиционированным по центру внизу.
3. Регулируем внешние и внутренние отступы (margin/padding) для ссылок и элементов списка.

Код


#menu ul {
    width:100%;
}
#menu li {
    background:url("img/divider.png") right no-repeat;
}
#menu li a:hover {
    background: #9e9e6f url("img/bg_a_hover.png") bottom center no-repeat;
}

http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html

Автор: lapulya9 10.7.2010, 15:12

MoRo, спасибо Вам за подсказку, но не совсем получается. Светлый hover возникает только под буквами, а должен - от разделителя до разделителя... Кстати divider тоже даны не в виде разделителей, а как правые поля прозрачного прямоугольника.. А зрительно все ячейки меню разные... Ничего не понимаю. Помогите, пожалуйста!

Автор: m0ro 10.7.2010, 16:11

Цитата(lapulya9 @ 10.7.2010, 14:12

)

Светлый hover возникает только под буквами, а должен - от разделителя до разделителя...

Дайте элементам a внутренний отступ padding. Можно добавить ещё min-width, чтобы гарантированно заполнять по ширине.

Цитата(lapulya9 @ 10.7.2010, 14:12

)

Кстати divider тоже даны не в виде разделителей, а как правые поля прозрачного прямоугольника..

Значит, эти прямоугольники для элементов li назначьте, как фон.

Автор: lapulya9 10.7.2010, 17:49

Код


#menu li{
    list-style: none;
    float: left;
    margin-right:13px;
    padding-left:15px;
    background-image:url(img/divider.png);
    background-position:right;
    background-repeat:no-repeat;
    
}
#menu li a{
    display: block;
    padding: 8px 4px 0px 4px;
    position: relative;
    font-family:Times New Roman, Helvetica;
    text-decoration:none;
    color:#fefefe;
    font-size:17px;
    font-weight:bold;
}
#menu li a:hover {
    background-image:url(img/hover.png);
    background-position:bottom;
    background-position:center;
    background-repeat:no-repeat;
    height:37px;
}

Вот код меню. Разделители таки прицепились справа от ссылок. Я бы даже сказала прилипли... Да и hover не покрывает всю площадь от разделителя до разделителя, а живет своей отдельной жизнью. И после посл ссылки разделитель не нужен... В общем такая вот проблема.

Вот скрин:

user posted image

Автор: m0ro 12.7.2010, 20:01

Цитата(lapulya9 @ 10.7.2010, 16:49

)

Да и hover не покрывает всю площадь от разделителя до разделителя, а живет своей отдельной жизнью.

Отрегулируйте отступы для #menu li a - сверху, снизу, по бокам... А для #menu li - уберите.

Цитата(lapulya9 @ 10.7.2010, 16:49

)

И после посл ссылки разделитель не нужен...

Последнему элементу li дайте класс .last и не назначайте фона ему отдельно.