Верстка. Как правильно позиционировать элементы в этом случае

Question

[goodknight]

Здравствуйте.
В последнее время начал сильно беспокоиться о валидности, чистоте и "правильности" своего кода, чтобы он в говнокод не превращался.

Получилось, что мне надо было сверстать Responsive макет этого
Сверстал на Bootstrap 2.3.1. Всё хорошо выглядит.

Я оформил элементы блоков в виде списка через

<ul>
<li>

и позиционировал иконки через

position: relative;
  left: 15%;

Скажите, насколько это "правильно", или это говнокод? Как "правильнее" сделать?
Или я зря схожу с ума. Меня беспокоит padding и relative позиционирование.

Answer 1

[Алексей Кулешов]

<ul>
  ...
  <li><a href="">Пункт меню</a></li>
  ...
</ul>

ul > li > a {
  backgroung: url(buttton.png) no-repeat left center;
  display: block;
  padding-left: 15px;
}

...и ещё куча всяких стилей, но уже на Ваше усмотрение и т.д. и т.п.

Comments

[Алексей Кулешов]

Кстати... Currently v3.1.1

[goodknight]

@GingerbreadMSK Спасибо:-), но у заказчика 2.3.1 и менять не планирует. Спасибо за "background" у "li", я об этом не подумал. Создал отдельный элемент с бэграундом картинки, в итоге пришлось костылей написать, чтобы нормально отображалось.

[Алексей Кулешов]

"чтобы нормально отображалось" - это ещё ладно. Но когда для логически-одного элемента (ссылка с иконкой) используют 2 тега A - это перебор. Всегда и везде - если у вас есть большой составной элемент прямоугольной формы и он должен иметь функциональность ссылки - оборачиваете его в тег A и уже дальше начинаете играться с display:block/inline/block; и padding/margin/background.