Помогите с css-менюшкой

[Demon2 0]

Использую такой css:

.menu a , .menu a:visited{

display:block;

padding-left: 50px; padding-top: 3px; padding-bottom: 3px; font-family: tahoma; font-size: 12px; color: #0000FF;

background-image:url(http://mysite/templates/Default/images/menu_button_1.gif);

text-decoration:none;

}

.menu a:hover{

padding-left: 55px; font-family: tahoma; font-size: 12px; color: #0000FF;

background-image:url(http://mysite/templates/Default/images/menu_button_2.gif);

}

Применяю в блоке (вывод списка ссылочек), видим одну картинку - наводим на ссылку - другую. Все бы хорошо, но когда наводим на такую ссылку впервый раз картинка появляется не сразу, а подгружается пару секунд. Можно это как устранить?

[spam 11]

Использую такой css:

.menu a , .menu a:visited{

display:block;

padding-left: 50px; padding-top: 3px; padding-bottom: 3px; font-family: tahoma; font-size: 12px; color: #0000FF;

background-image:url(http://mysite/templates/Default/images/menu_button_1.gif);

text-decoration:none;

}

.menu a:hover{

padding-left: 55px; font-family: tahoma; font-size: 12px; color: #0000FF;

background-image:url(http://mysite/templates/Default/images/menu_button_2.gif);

}

Применяю в блоке (вывод списка ссылочек), видим одну картинку - наводим на ссылку - другую. Все бы хорошо, но когда наводим на такую ссылку впервый раз картинка появляется не сразу, а подгружается пару секунд. Можно это как устранить?

ну вроде так и должно быть, прсто браузер еще не загрузил картинку.

[empirator 0]

когда наводим на такую ссылку впервый раз картинка появляется не сразу, а подгружается пару секунд

совершенно нормально. выход - прелоад через яву.

[Demon2 0]

Ну так может можно её как-то предварительно загрузить?

И еще вопросик по ксс:

Кусок кода страницы:

<td background="{THEME}/images/bgtdt.png" class="ltitle" valign="top"><img src="{THEME}/images/key.png"> 1234</td>

Из таблицы стилей:

.ltitle {

color: #000000;

font-size: 17px;

font-family: Arial;

font-weight: bold;

padding-left: 6px;

padding-top: 8px;

}

Как сделать что бы у картинки был отступ 3px, а у текста как и прописано?

Изменено 26 мая 2008 пользователем Demon2

[lifestar 18]

совершенно нормально. выход - прелоад через яву.

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

Объеденить обе картинки в одну и

.menu a:hover{

background-position:bottom center;

}

Как сделать что бы у картинки был отступ 3px, а у текста как и прописано?

.ltitle img {

margin:3px;

}

да и стиль я бы написал так (экономим байты )

.ltitle {

color: #000;

font: bold 17px arial;

padding: 8px 0 0 6px;

}

[Demon2 0]

Объеденить обе картинки в одну и

.menu a:hover{

background-position:bottom center;

}

Извиняюсь, непонял. Как обьеденить? Сверху первая, снизу вторая в 1 файле?

Далее, по поводу картинок:

Впринципе да, то что нужно, и в обычной ситуации оно работает. Но у меня какая-то ерунда. Отступ зависит от размера картинки.

.ltitle {

	color: #527CAC;

	font-size: 17px;

	font-family: Arial;

	font-weight: bold;

	padding-left: 6px;

	padding-top:  6px;

}


.ltitle img {margin:2px;}

Вот пример:

Отличие только в том что первая картинка 24х24, а вторая 16х16

Изменено 26 мая 2008 пользователем Demon2

[lifestar 18]

Как обьеденить? Сверху первая, снизу вторая в 1 файле?

да

Но у меня какая-то ерунда.

.ltitle img {

margin:2px;

float:left;

}

[Demon2 0]

Все получилось, спасибо