[hamelyon]

Всем Привет!

Думаю эта тема больше относиться к seo так как вопрос будет таков - как сверстать правильное меню с заданным изображением каждому пункту меню?

Допустим:

Рассмотрим простой вариант меню с изображением

Код:

<ul class="menu">
<li><a href="/"><img src="1.png" title="" alt=""/>Пункт 1й</a></li>
<li><a href="/"><img src="2.png" title="" alt=""/>Пункт 2й</a></li>
<li><a href="/"><img src="3.png" title="" alt=""/>Пункт 3й</a></li>
<li><a href="/"><img src="4.png" title="" alt=""/>Пункт 4й</a></li>
</ul>

Меню должно быть горизонтальное
Стиль:

Код:

.menu {float:left; width:100%; list-style:none;}
.menu li {float:left; width:25%;  height:70px;}
.menu li a {width:100%; float:left; text-align-center;} /*что бы кнопка была полностью кликабельной*/
.menu li img {height:30px; padding:5px 0 5px 0;}

Все работает! Но нужно что бы изображения было отцентровано над текстом



Я вижу несколько решений, но не знаю какой из этих решений будет более оптимальны или оптимизированый так сказать!

1. Можно добавить после изображения <br /> и мы получим перенос на новую строку (но если будет таких пунктов 10 и в них еще по 10 мне кажется это мусор коде )
2. вынести img из ссылки *a href* но тогда не буде картинка не кликабильна и область клика мала в итоге пострадает юзабилити
3. обернуть текст ссылки допустим в

Код:

<b><font><i> или даже <div>

но это еще больше мусора чем от первого варианта.

Внимание! - к каждому пункту меню изображения загружается персонально.

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

[Coder]

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

<br> тоже подходит - перенос на новую строку, как и должно быть.

И то, и другое - не мусор, а оправданные элементы кода.

Имхо, конечно.

P.S. Для кликабельности можно весь <a> обернуть в дополнительный див и(или) добавить в <а> display:block