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

Toro

Дата 23.12.2010, 23:04 (ссылка)

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

Загрузка ...

Новичок

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

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

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

Код


<div id="menu">
             <ul>
                    <li><a href="#"><span>Пункт</span></a></li>
                    <li><a href="#"><span>Пункт</span></a></li>
                    <li><a href="#"><span>Пункт</span></a></li>
                    <li><a href="#"><span>Пункт</span></a></li>
                </ul>
            </div>

Код


#menu{
    clear:both;
    position:absolute;
    top:213px;
    left:35px;
    font-size: 16px;
    height:42px;
}

#menu li{
    list-style: none;
    float:left;
}

#menu li a span{
    display:block;
    float:left;
    height:42px;
    height:100%;
    padding: 0 7px 0 7px;
}

#menu li a{
    display:block;
    float:left;
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
}

#menu li a:hover{
    color:#e66d24;
    background:#FFFFFF url(image/menu_border_right.jpg) right no-repeat;
    height:42px;
    text-decoration:none;
}

#menu li a:hover span{
    color:#e66d24;
    background:#FFFFFF url(image/menu_border_left.jpg) left no-repeat;
    height:42px;
    text-decoration: none;
}

пункты меню разные по длине. При наведении отображается только menu_border_left.jpg. Почему не отображается граница справа? помогите, пожалуйста

DenWeb

Дата 26.12.2010, 12:25 (ссылка)

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

Загрузка ...

Верстальщик

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

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

Нужно задать padding справа равный ширине изображения menu_border_right

Код


#menu li a:hover{
    color:#e66d24;
    background:#FFFFFF url(image/menu_border_right.jpg) right no-repeat;
    height:42px;
    text-decoration:none;
    padding-right:(значение ширины изобр.menu_border_right)px;
}

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