VPF::a href....... - Форум программистов

Golovastik

Дата 20.10.2010, 19:49 (ссылка)

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

Загрузка ...

Опытный

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

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

Хочу сделать такое как на этом сайте при наведении мышкой на Пункт - Главная, Об авторе и т.д.
чтоб так выделялся пункт меню.

Меню делаю на шапке позиционированием.

Код

<a href="index.php" class="m1">Главная</а>

СТИЛИ

Код


.m1{position:relative; top:-32px; left:-190px;
font-size:22px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#CCFF99;
text-decoration:none; }

.m1:hover{width:400px; height:70px; background:#92dbd9; color:white; }

Проблема в том, что не происходит при наведении пункт меню не делается так как на http://russeler.com
Как сделать так как там?

GZep

Дата 20.10.2010, 20:17 (ссылка)

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

Загрузка ...

участник Винграда

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

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

по порядку...

Цитата(Golovastik @ 20.10.2010, 19:49

)

top:-32px; left:-190px;

советую отказаться от отрицательных значений...

Код


.m1{
font-size:22px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CCFF99;
text-decoration:none;
display:block;
}
.m1:hover{
background:#92dbd9;
color:white;
}

так работает? если дадите полный код - могу помочь его улучшить в целом.

--------------------

Rayled

Дата 20.10.2010, 20:17 (ссылка)

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

Загрузка ...

Шустрый

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

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

Golovastik, ничего не пойму, а в чем проблема-то? Если вы написали тот код, что выше, то неужели не можете сделать...
Примените к ссылкам display:block, отцентруйте текст и задайте разное фоновое изображение для обычных ссылок и hover.
Если говорить именно о том сайте, то там все ссылки постороены списком, а к элементам li применено что-то типа float: left.
upd. GZep опередил на секунды. smile

Это сообщение отредактировал(а) Rayled - 20.10.2010, 20:19

Golovastik

Дата 20.10.2010, 21:14 (ссылка)

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

Загрузка ...

Опытный

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

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

Вот тестовую для примера сделал что у меня выходит.
Я не могу сделать так чтоб выделялся квадрат побольше, а не выделялась только ссылка.
Вот такое фото при наведении хочу получить.
http://ipicture.ru/uploads/101020/Nq354Ze2RT.jpg

Это сообщение отредактировал(а) Golovastik - 20.10.2010, 21:14

Присоединённый файл ( Кол-во скачиваний: 1 )

primer.rar 7,14 Kb

Rayled

Дата 20.10.2010, 21:58 (ссылка)

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

Загрузка ...

Шустрый

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

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

display:block, width, height, text-align, padding.
Используйте эти свойства, первое обязательно, остальные можно комбинировать в зависимости от того, что надо. Например взять только padding или наоборот все кроме него или еще как-то.

Golovastik

Дата 21.10.2010, 16:41 (ссылка)

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

Загрузка ...

Опытный

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

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

Вот моя шапка, и модернизированный код. Проблема в том, что текст при наведении опускается вместе со всем, просто я хочу сделать чтоб верхнюю линиюю меню не закрывала картинка, которая будет отображаться при наведении мышью. http://www.sharemania.ru/0296779

Присоединённый файл ( Кол-во скачиваний: 1 )

primer.zip 4,57 Kb

Golovastik

Дата 21.10.2010, 17:05 (ссылка)

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

Загрузка ...

Опытный

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

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

Чтоб текст главная не опускалось вниз надо.

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