Выравнивание текста по низу у изображения

(Ответов: 8, Просмотров: 1175)
  1. Развиваюсь ^^, Аватар для GOODPower
    • Регистрация: 13.04.2013
    • Сообщений: 384
    • Записей в дневнике: 2
    • Репутация: 95
    • Webmoney BL: ?
    Имеется такой вид меню : Нажмите на изображение для увеличения.  Название:	2013.05.13_12.20.54.jpg  Просмотров:	13  Размер:	4.4 Кб  ID:	9842
    От сюда вопрос, как правильно сделать выравнивание текста по низу, а изображение сверху ?
    Код меню :

    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/
    • 0
  2. Гуру Аватар для kvins
    • Регистрация: 24.08.2011
    • Сообщений: 1,114
    • Репутация: 160
    нужно обернуть текст либо в параграф </p> либо span и присвоить тексту display:block и высоту с шириной

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

    Спасибо сказали:

    GOODPower(13.05.2013),
  3. Дипломник Аватар для valear
    • Регистрация: 15.01.2012
    • Сообщений: 179
    • Репутация: 39
    vertical-align работает для табличных элементов. Тут надо через display:block. Попробуйте сделать так, как на примере http://phrogz.net/css/vertical-align/index.html

    Готовое решение сейчас не дам, сорри - времени нет.
    • 0
  4. Развиваюсь ^^, Аватар для GOODPower
    • Регистрация: 13.04.2013
    • Сообщений: 384
    • Записей в дневнике: 2
    • Репутация: 95
    • Webmoney BL: ?
    Спасибо, справился :) Через span.
    Еще вопрос, меню такого вида, лучше выводить через Ul li или все-же через table ? на будущее так сказать...
    • 0
  5. Дипломник Аватар для valear
    • Регистрация: 15.01.2012
    • Сообщений: 179
    • Репутация: 39
    GOODPower, таблицы в данном случае мешать бессмысленно. Лучше списком.
    • 1

    Спасибо сказали:

    GOODPower(13.05.2013),
  6. Гуру Аватар для kvins
    • Регистрация: 24.08.2011
    • Сообщений: 1,114
    • Репутация: 160
    GOODPower, Сейчас многие компании с которыми вы возможно будете работать считают таблицы старым веком.

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

    Получается что таблицы щас используются исключительно как таблицы, а не для верстки чего либо.
    Так что вы правильно делаете
    • 0
  7. Развиваюсь ^^, Аватар для GOODPower
    • Регистрация: 13.04.2013
    • Сообщений: 384
    • Записей в дневнике: 2
    • Репутация: 95
    • Webmoney BL: ?
    считают таблицы старым веком.
    Я бы не согласился, хотя может инфа старая, как-то ходил на курсы и говорили нам, что если верстать сайт под планшеты-телефоны и вообще разных зверьков, то лучше делать табличную верстку с Max и Min Width / Height. Разве уже не так ? Может препод устарелый был)) хотя вроде парниша молодой был и в курсе всего этого казалось...

    Сейчас многие компании с которыми вы возможно будете работать
    Я пока сайт для себя делаю, точнее дал себе задание, сваять норм сайт на вордпрессе с миниум переделок пока что ^_^, И приступить к изучению верстки и вообще всего что связано с WP.
    Может и продам сайт, может и нет :) Цена все равно будет не велика, тыщи 2-3 от силы с полностью настроеным сайтом и контентом
    • 0
  8. Гуру Аватар для kvins
    • Регистрация: 24.08.2011
    • Сообщений: 1,114
    • Репутация: 160
    Вот про телефоны и планшеты нечего сказать не могу, не на чем тестировать свои проэкты и не было еще заказов для оптимизации под них.

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

    Спасибо сказали:

    GOODPower(13.05.2013),
  9. Развиваюсь ^^, Аватар для GOODPower
    • Регистрация: 13.04.2013
    • Сообщений: 384
    • Записей в дневнике: 2
    • Репутация: 95
    • Webmoney BL: ?
    И все таки сайты нужно делать с div и если для кого нибуть будете делать вам могут много замечаний сделать по поводу таблиц
    Ну я еще не разу не верстал через таблицы :) Divы всегда использовал впринцепе.
    Большое спасибо, думаю тему можно закрывать ^_^, Пойду грызть теги WP и стараться улучшить сайт в лучшую сторону
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Прикрепить футер к низу сайта.
Web дизайн 1 11.11.2012 19:50
выравнивание при заходе с нетбука
Joomla 6 11.07.2012 19:56
выравнивание
Вопросы от новичков 2 11.07.2012 15:24
Выравнивание элемента в blogspot
Web программирование 2 22.08.2011 05:38

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры