Текст под картинкой в ссылке

[dropoff]

Приветствую.

Столкнулся с проблемой. Может просто не догоняю, или устал просто.

Что нужно? Нужно в ссылке выводить картинку и под ней текст. Все через CSS. Тут сложного ничего нету, но проблема в padding'е.

Пример.

Есть CSS

#menu li.home a {float:left;display:block;width:49px;height:48px;background: url(../img/sour.gif) no-repeat -169px -6px;}
#menu li.home a:hover {background-position: -169px -57px;}

И есть сcылка

<li class="home"><a href="/" title="Главная">Главная</a></li>

Таким образом текст(Главная) по середине картинки. Как опустить текст под картинку? Если ставить padding, то тогда высота li будет в два раза больше и отодвигает другое меню которое ниже. Т,е. height+padding получаются.

Как видно, картинка с hover'ом тоже, пробовал делать одиночные, что бы не указывать высоту, таки все равно от padding'а отступ остается. vertical-align:bottom; не помогает.

Как быть? Что я упускаю или не учитываю?

Заранее спасибо.

[psywalker]

Погоди, но это же целый лишний элемент span, зачем он нужен, если можно без него? и ещё целых два класса

Edited September 26, 2009 by psywalker

[mishka]

Затем что потом другому человеку легче будет сориентироватся по названиям класов. И мне кажется так надежней, так как в ие6 могут быть прыжки при ховере если юзать такой вариант http://psywalker.ru/Forum/Hover/main2.html.

Edited September 26, 2009 by mishka2

[psywalker]

Затем что потом другому человеку легче будет сориентироватся по названиям класов. И мне кажется так надежней, так как в ие6 могут быть прыжки при ховере если юзать такой вариант http://psywalker.ru/Forum/Hover/main2.html.

Вот тут конечно тогда согласен, ради удобства и 100% результата можно пожертвовать этими вещами, но всё же хочется придумать вариант поинтереснее, щас как раз этим занимаюсь, позже отпишусь о результатах в этом топике

Воо медведь смотрии, какую эврику придумал, ваще ушатаешься, кода как кот наплакал, нигде ничего не дёргается и результат отличный везде: http://psywalker.ru/Forum/Hover/main4.html Что скажешь?

На мой взгляд последний мой вариант лидер среди всей команды, но полагаю, что это не предел и наверняка есть ещё варианты, это лишь только наброски идеи Давай мих соберись, я знаю, ты профи и сможешь сделать конфетку из этого

Не, ну вобщем я сдаюсь миха, видимо я исчерпал свои возможности на последнем варианте, буду надеяться на тебя, а пока думаю так, если автор будет делать список из таких ссылок, то я бы предложил бы ему делать так: http://psywalker.ru/Forum/Hover/main5.html

Edited September 26, 2009 by psywalker

[dropoff]

если автор будет делать список из таких ссылок, то я бы предложил бы ему делать так: http://psywalker.ru/Forum/Hover/main5.html

Спасиб ; ) Списки и нужны были, причем с разными иконками))

А я поторопился и сделал с behavior((((

Ну да ладно)) Переделаю.

Зато решений теперь много)

Спасибо всем за помощь.

[psywalker]

Спасиб ; ) Списки и нужны были, причем с разными иконками))

А я поторопился и сделал с behavior((((

Ну да ладно)) Переделаю.

Зато решений теперь много)

Спасибо всем за помощь.

Даа, а главное что решение красивое, лёгкое и поддерживаемое всеми браузерами

[tt48]

Даа, а главное что решение красивое, лёгкое и поддерживаемое всеми браузерами

прикольную тему замутили=)

а чё делает *html body {behavior: url(csshover.htc);}?

*сорри за тупой впрос, но сам врятли найду)

С ув.Олег

[psywalker]

прикольную тему замутили=)

а чё делает *html body {behavior: url(csshover.htc);}?

*сорри за тупой впрос, но сам врятли найду)

С ув.Олег

*html body {behavior: url(csshover.htc);} делает так, что-бы в ИЕ6 работал ховер эффект

[mishka]

а чё делает *html body {behavior: url(csshover.htc);}?

*сорри за тупой впрос, но сам врятли найду)

Это есть такой файлик csshover.htc, который бросают в папку с проектом.

*html ...{

бла бла бла

}

Эти стили поймет только ие6.

следовательно и *html body {behavior: url(csshover.htc);} поймет только ие6.

А в файлике csshover.htc написан джс, который заставляет ие6 понимать псевдоклассы :hover, :active, :focus на все элементы.

Но следует быть осторожным с его использованием, так как иногда возникают баги. Вернее не баги, а просто это отказывается правильно работать. Следовательно старый добрый способ дописывание класса "hover" все же надежнее работает.

Edited September 29, 2009 by mishka2

[tt48]

Это есть такой файлик csshover.htc, который бросают в папку с проектом.

*html ...{

бла бла бла

}

Эти стили поймет только ие6.

следовательно и *html body {behavior: url(csshover.htc);} поймет только ие6.

А в файлике csshover.htc написан джс, который заставляет ие6 понимать псевдоклассы :hover, :active, :focus на все элементы.

Но следует быть осторожным с его использованием, так как иногда возникают баги. Вернее не баги, а просто это отказывается правильно работать. Следовательно старый добрый способ дописывание класса "hover" все же надежнее работает.

Спасибки, так понятно=)