[GOODPower]

Имеется такой вид меню :
От сюда вопрос, как правильно сделать выравнивание текста по низу, а изображение сверху ?
Код меню :

ul li menu

Код HTML:

<ul class="fast_navigation"> <li class="okna"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t12.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t12.png" alt="t12" width="59" height="60" class="alignnone size-full wp-image-10 okna" />Окна</a> </li> <li class="calculator"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t32.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t32.png" alt="t32" width="59" height="60" class="alignnone size-full wp-image-11 calculator" /></a>Калькулятор окон
</li> <li class="fotogalereya"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t42.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t42.png" alt="t42" width="59" height="60" class="alignnone size-full wp-image-12 fotogalereya" /></a>Фотогалерея
</li> <li class="ustanovka_okon"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t52.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t52.png" alt="t52" width="59" height="60" class="alignnone size-full wp-image-13 ustanovka_okon" /></a>Установка окон
</li> <li class="akcii"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t62.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t62.png" alt="t62" width="59" height="60" class="alignnone size-full wp-image-14 akcii" /></a>Акции
</li> <li class="kontakt"> <a href="http://test-my-domain.ru/wp-content/uploads/2013/05/t72.png"><img src="http://test-my-domain.ru/wp-content/uploads/2013/05/t72.png" alt="t72" width="59" height="60" class="alignnone size-full wp-image-15 kontakt" /></a>Контакты
</li> </ul>

[свернуть]

CSS этого меню :

CSS стили

Код HTML:

/* CUSTOM */
.fast_navigation {
text-align: center;
height: 100px;
}
.fast_navigation a{
width: 100%;
text-align: center;
}
.fast_navigation li{
display: inline;
width: 120px;
margin-left: 25px;
margin-right: 25px;
list-style-type: none;
}
.fast_navigation .okna  {
vertical-align:text-bottom;
}
.fast_navigation .okna:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t11.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}
.fast_navigation .calculator {
vertical-align:text-bottom;
}
.fast_navigation .calculator:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t31.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}
.fast_navigation .fotogalereya {
vertical-align:text-bottom;
}
.fast_navigation .fotogalereya:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t41.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}
.fast_navigation .ustanovka_okon {
vertical-align:text-bottom;
}
.fast_navigation .ustanovka_okon:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t51.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}
.fast_navigation .akcii {
vertical-align:text-bottom;
}
.fast_navigation .akcii:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t61.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}
.fast_navigation .kontakt {
vertical-align:text-bottom;
}
.fast_navigation .kontakt:hover {
background: url('http://test-my-domain.ru/wp-content/uploads/2013/05/t71.png') no-repeat left bottom;
text-shadow: 0 0 0 black, 0 0 1em red;
}

[свернуть]

Как это выглядит на сайте - http://test-my-domain.ru/

[kvins]

нужно обернуть текст либо в параграф </p> либо span и присвоить тексту display:block и высоту с шириной

Код не смотрел, но это стандартная ситуация

[valear]

vertical-align работает для табличных элементов. Тут надо через display:block. Попробуйте сделать так, как на примере http://phrogz.net/css/vertical-align/index.html

Готовое решение сейчас не дам, сорри - времени нет.

[GOODPower]

Спасибо, справился :) Через span.
Еще вопрос, меню такого вида, лучше выводить через Ul li или все-же через table ? на будущее так сказать...

[valear]

GOODPower, таблицы в данном случае мешать бессмысленно. Лучше списком.

[kvins]

GOODPower, Сейчас многие компании с которыми вы возможно будете работать считают таблицы старым веком.

Это раньше таблицы использовались для верстки, щас же новые сайты делают через div и даже старые сайты переверстывают в div

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

[GOODPower]

считают таблицы старым веком.

Я бы не согласился, хотя может инфа старая, как-то ходил на курсы и говорили нам, что если верстать сайт под планшеты-телефоны и вообще разных зверьков, то лучше делать табличную верстку с Max и Min Width / Height. Разве уже не так ? Может препод устарелый был)) хотя вроде парниша молодой был и в курсе всего этого казалось...

Сейчас многие компании с которыми вы возможно будете работать

Я пока сайт для себя делаю, точнее дал себе задание, сваять норм сайт на вордпрессе с миниум переделок пока что ^_^, И приступить к изучению верстки и вообще всего что связано с WP.
Может и продам сайт, может и нет :) Цена все равно будет не велика, тыщи 2-3 от силы с полностью настроеным сайтом и контентом

[kvins]

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

Вот куплю когда нить, создам сайт под него, потом смогу ответить, но это мы щас говорим о планшетах, а не для компьютеров. И все таки сайты нужно делать с div и если для кого нибуть будете делать вам могут много замечаний сделать по поводу таблиц

[GOODPower]

И все таки сайты нужно делать с div и если для кого нибуть будете делать вам могут много замечаний сделать по поводу таблиц

Ну я еще не разу не верстал через таблицы :) Divы всегда использовал впринцепе.
Большое спасибо, думаю тему можно закрывать ^_^, Пойду грызть теги WP и стараться улучшить сайт в лучшую сторону