Меню с меняющимеся фоновыми изображениями средствами css

[lokotosh]

Доброго времени суток от начинающего создателя сайтов .

Подскажите плз как лучше реализовать данную идею...а то у меня походу руки вместе с головой не оттуда растут

есть(будет?) меню

Html

<link href="../1.css" rel="stylesheet" type="text/css">
<link href="1.css" rel="stylesheet" type="text/css">
<table align="left" valign="top" class="mainmenu">
 <tr align="left" valign="top" >
 <td height="33"align="left" valign="top"><a href="index.php">Главная
 </a></td>
 </tr>
 <tr>
 <td align="left" valign="top"><a href="index.php">Услуги
 </a></td>
 </tr>
 <tr>
 <td align="left" valign="top"><a href="index.php">О нас</a></td>
 </tr>
 <tr>
 <td align="left" valign="top"><a href="index.php">Контакты</a></td>
 </tr>
</table>

CSS

.mainmenu {
 font-size: 15px;
 font-family: tahoma; 
 text-decoration: none;
 font-weight: bold;
 text-transform: uppercase; 
}
.mainmenu a:active, .mainmenu a:visited, .mainmenu a:link { 
 background-image: url(knop_1.gif);
 background-repeat: no-repeat; 
 background-color:#000000;
 text-decoration: none;
 color: #0066FF;
 display:block; 
 width:140px;
 height:35px; 
}
.mainmenu a:hover {
 background-image: url(knop_2.gif);
 background-repeat: no-repeat;
 color: #FF9900; 
}

Как добиться расположения по центру рисунка как вертикально так и горизонтально?

добавление параметра "padding: 15px 40px" в

.mainmenu a:active, .mainmenu a:visited, .mainmenu a:link {

меняет дело но тогда смещаетьса вертикально вся таблица что не есть хорошо визуально.

[Dimitry Wolotko]

http://htmlbook.ru/content/?id=110

В лягушатник.

[lokotosh]

Простите меня непут?вого но Как добиться расположения "ТЕКСТА"по центру рисунка как вертикально так и горизонтально?

http://htmlbook.ru/content/?id=110

В лягушатник.

Просмотрел треть русскоязычного инета и эти статьи в том числе нужного мне ответа не получил

[Dimitry Wolotko]

Чем вам не поможет http://htmlbook.ru/content/?id=110 я понятия не имею. Можно с JS - пример смотрите на http://kagami-art.ru

По поводу выравнивания - css - align и vertical-align

[lokotosh]

Чем вам не поможет http://htmlbook.ru/content/?id=110 я понятия не имею. Можно с JS - пример смотрите на http://kagami-art.ru

По поводу выравнивания - css - align и vertical-align

1 JS не владею.

2 В http://htmlbook.ru/content/?id=110 описывается работа с рисунками что у меня уже сделано

а вот как выровнять текст в рисунке так чтобы таблица не разъезжалась я понять не могу

в существующей версии текст наползает на значок ( кружок ) выровнять текст средствами css у меня не выходит

если можете напишите конкретно что именно нужно прописать.

P.S. работаю с css 3 дня

[Dimitry Wolotko]

Владеть JS что бы понять пример привед?нный мною - не то что бы не нужно, просто необязательно.

Ваш вариант этот. Эсли у вас едет в?рстка - решайте вопрос с ней отдельно.

<span style="padding:0 0 0 50px;">text</span>

Сколько вы с css работаете и так понятно.

[lokotosh]

Вопрос не в том как сделать это в html а как реализовать средствами css

[Dimitry Wolotko]

Хорошо, я уточню.

#test {padding:0 0 0 50px;}
 ...
 ...
 ...

<span id="test">text</span>

[lokotosh]

Спасибо большое с вашим последним высказыванием пришла идея изменить высоту блока пропорционально понижению текста .

про вставку padding я писал

добавление параметра "padding: 15px 40px" в

Код:

.mainmenu a:active, .mainmenu a:visited, .mainmenu a:link {

меняет дело но тогда смещаетьса вертикально вся таблица что не есть хорошо визуально.

я же говорил

у меня походу руки вместе с головой не оттуда растут

в любом случае спасибо большое за помощ