VESELOV.SUMY.UA

Горизонтальная навигация ul по центру

---

Задача простая, только на первый взгляд. text-align не помогает, margin:auto работает только при фиксированной ширине. И вот она разгадка:

<div id="mainmenu">
   <ul> 
    <li><a href="#" title="">Новости</a></li>
    <li><a href="#" title="">Блог</a></li>
    <li><a href="#" title="">Форум</a></li>
    <li><a href="#" title="">Интересные факты</a></li>
    <li><a href="#" title="">Тесты</a></li>
    <li><a href="#" title="">Скачать</a></li>
    <li><a href="#" title="">Контакты</a></li>
   </ul> 
 </div>

div#mainmenu, div#mainmenu ul { position:relative; }
div#mainmenu  { float:right; right:50%; margin:38px 0px; width:auto;  }
div#mainmenu ul { float:none!important; float:left; right:-50%; }

Пару слов о том как это работает:
- сначала мы прибиваем все к правой границе браузера и блок (#mainmenu) гарантированно имеет ширину равную всей области экрана. Затем мы сдвигаем его на 50% влево (right:50%;), после правая граница оказывается ровно посреди экрана.
- затем вложенный блок (сам список) принудительно уводится в левую область родительского блока (#mainmenu). Так как все слои имеют номинальную ширину в 100% то на данный момент ширина у списка (ul) получается равной 150%, а его сдвиг вправо приводит к получению его 100%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.