Проблема с сылками картинками картинками

UF · January 17, 2008

Здравствуйте,

У меня вот такая проблема.

Мне надо сделать вот такое меню

http://profelektromontag.narod.ru/2.gif

а получается такое

http://profelektromontag.narod.ru/1.gif

я использую CSS событие a:hover

мне надо чтобы при наведений на кнопку менялась и кнопка и ссылка на кнопке.

подскажите что делать и что использовать.заранее спасибо.

yopopt · January 17, 2008

Зачем ссылку менять?

UF · January 17, 2008

Я не то сказал. не ссылка. а текст ссылки мне надо, чтобы был отступ от текста ссылки слева с сохранением картинки.

Короче обьясните мне как можно сделать меню, что показано на первом рисунке.

Dimitry Wolotko · January 17, 2008

Картинки не грузятся.

BJ · January 19, 2008

Попробуй так, если это оно. Только картинки разных цветов свои вставь. Вообще суть вопроса не понятна, да и собственно картинка на сайте не грузится.

<html>
<head>
<style type="text/css">
 .menu {
 height: 40px; /* Высота вкладок */
 padding: 0px 20px; /* Поля по вертикали и горизонтали */
 border-bottom: 4px solid black; /* Параметры линии внизу */
 font-family: Arial, sans-serif; /* Шрифт надписи */ 
 font-weight: bold; /* Жирное начертание */
 font-size: 14px /* Размер шрифта надписи */
}
 .menu DIV {
 float: left; /* Состыковка с соседней вкладкой */
 width: 151px; /* Ширина вкладки */
 height: 40px; /* Высота вкладки */
 margin-right: 10px; /* Расстояние между вкладками */
 text-align: center; /* Выровнять надпись по центру */
 background: url(greentab.jpg) /* Путь к начальному рисунку - рисунок до изменения */
 no-repeat /* Установить фон без повторений */
}
 .menu A {
 display: block; /* Ссылка как блочный элемент */
 width: 100%; /* Ссылка на всю ширину вкладки */
 height: 100%; /* Ссылка на всю высоту вкладки */
 padding: 12px 0px; /* Поля для размещения текста по центру */
}
 .menu A:hover {
 background: 
 url(orangetab.jpg) /* Путь к замещаемой картинке - рисунок при наведении*/
 no-repeat /* Отображать фон без повторений */
}
</style>
</head>
<body>
 <div class=menu>
 <div><a href=link1.html>Чебурашка</a></div>
 <div><a href=link2.html>Крокодил Гена</a></div>
 <div><a href=link3.html>Шапокляк</a></div>
 </div>
</body>
</html>

Vlad · January 21, 2008

К тексту надо добавить padding-left, значение опытным путем подбери.

UF · January 21, 2008

спасибо.

Sign In

Проблема с сылками картинками картинками

Question

UF

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

UF

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

BJ

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

UF

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information