VPF::Верстка меню - Форум программистов

lapulya9

Дата 8.7.2010, 14:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Нужно сделать такое вот горизонтальное меню:
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

Профиль
Группа: Завсегдатай
Сообщений: 800
Регистрация: 19.5.2007

Репутация: нет
Всего: 68

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;
}

Это полезно!

Это сообщение отредактировал(а) m0ro - 8.7.2010, 15:35

lapulya9

Дата 10.7.2010, 15:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

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

m0ro

Дата 10.7.2010, 16:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 800
Регистрация: 19.5.2007

Репутация: нет
Всего: 68

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

)

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

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

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

)

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

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

Это сообщение отредактировал(а) m0ro - 10.7.2010, 16:12

lapulya9

Дата 10.7.2010, 17:49 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 7.7.2010

Репутация: нет
Всего: нет

Код


#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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 800
Регистрация: 19.5.2007

Репутация: нет
Всего: 68

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

)

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

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

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

)

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

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

Это сообщение отредактировал(а) m0ro - 12.7.2010, 20:03

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »