Поомогите "допилить" меню на спрайтах

[DarkTranquillity]

Доброго времени суток.

Хочу сделать меню на спрайтах, которое состоит из изображения (иконки) и текста (текст под иконками).

Нашёл пример создания тут: http://ruseller.com/lessons.php?rub=29&id=523

Сделал - всё ок, за исключением одного важного для меня нюанса.

Мне нужно, что бы под изображением был и текст меню (в виде текста, а не изображения естественно), в данном примере этот текст вынесен за пределы экрана так:

text-indent:-9999px;

Значение -9999px я убираю на "0" и текст размещается поверх графической части кнопки, а мне нужно спустить его под изображение.

Что только не пробовал - не выходит... подскажите, пожалуйста, как это реализовать?

Можно на другом примере или ссылку на соответствующий материал...

Моя задача:

меню в виде иконок под которыми название пункта меню.

Неактивный пункт серого цвета (изображение и текст). а при наведении (независимо, на текст иди изображение) спрайт меняется на цветную часть иконки и текст так же меняет цвет.

Заранее благодарю за любую помощь и подсказки.

[psywalker]

Сделай спрайт горизонтальный и просто меняй позицию для фона картинки.

[ShumNo]

.

Edited June 1, 2011 by ShumNo

[Vlad]

Спрайты отдельно сделать, текст к картинкам отдельно.

[DarkTranquillity]

Спрайты отдельно сделать, текст к картинкам отдельно.

Ну вот я сделал так:

#menu li{
overflow:hidden; 
text-indent:-9999px; 
display:inline; 
float:left; 
margin-right:10px;
}

Написал

#menu li{
    margin-right: 10px;
    overflow: hidden;
    padding-bottom: 30px;
    text-align: center;
    line-height: 130px;
    display: inline;
	}

В этом случаи текст появился под кнопками, но само меню стало вертикальным, т.к. пришлось убрать display:inline; , а если его оставлять, то получается вообще какая-то "каша"....

Как быть? Как сделать при применённых стилях что бы меню оставалось горизонтальным?

[psywalker]

1. Не понятно, зачем text-indent:-9999px;, если ты хочешь, чтобы текст у тебя был?

2. Покажи мини-тестовую страницу с примером. Ссылку кинь.

3. Покажи на скриншотах, как должно быть и как НЕ должно.

[DarkTranquillity]

1. Не понятно, зачем text-indent:-9999px;, если ты хочешь, чтобы текст у тебя был?

2. Покажи мини-тестовую страницу с примером. Ссылку кинь.

3. Покажи на скриншотах, как должно быть и как НЕ должно.

Что-то я в прошлый раз не так сделал... сейчас переправил стили с чистого листа и всё получилось.

Результат такой: http://s53.radikal.ru/i139/1106/a0/dd200c9ec074.jpg чего и нужно было добиться.

Спасибо всем за отзывчивость!