Хитрый вопрос по дизайну


Есть вот такая шапка сайта.
С лева и справа от логотипа разделы.
И там и там — ul > li
Как можно объединить эти 2 списка в один так, чтобы рисунок был по центру а пункты этого списка
равномерно распределялись по обоим сторонам логотипа?

P.S. Чисто теоретически я догадываюсь что можно сделать через smarty но может есть html\css решение

10 комментариев

avatar
самое простое — это всунуть логотип в li. Ну и стилями уже подправить отступы и пр.
Задать списку height и line-height, который равен height
avatar
т.е.
<ul>
<li>Публикации</li>
<li> LOGO </li>
<li> Блоги </li>
</ul>
avatar
буду пробовать
спасибо
avatar
Потратил на эту задачку 10 мин. Получилось.

avatar
Поделитесь кодом
avatar
Делал в отладчике браузера. Так что это уже история.
Объединяешь все в один список. Правые li нужно float: right и выстраивать от правого края. А остальное правка стилей.
avatar
Как вариант http://cssdesk.com/tgW7F

Используется css3 и как следствие — в IE работает только с 9.0+
Но способ интересный, каждую 2-ю li уводим автоматом вправо и накладываем поверх списка логотип, который будет всегда по центру, вне зависимости от ширины родительского элемента.
avatar
это действительно хитро :)
avatar
Можно не делать каждую вторую вправо, а только нужные (правые) li
avatar
И добавлять float:right каждой li, действительно…
Дело каждого как это реализовывать, я лишь предложил один из вариантов.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.