VESELOV.SUMY.UA

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

---

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

   
 
    
Новости

    
Блог

    
Форум

    
Интересные факты

    
Тесты

    
Скачать

    
Контакты

   
 
 

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%ой ширины. Таким образом он оказывается всегда по центру относительно своего родительского элемента.

Картинка в стороне от текста без обтекания

---

К примеру есть на сайте набор вот таких блоков: картинка + заголовок + выдержка.
В коде соответственно имеем:

Heading

text tex text text text text

Cуть проблемы в том что заказчик хочет картинку с одной стороны блока и текст с другой. И это при том что картинка может быть какого угодно размера.

Итак первое и очевидное сделать float:left; картинке, но тогда появится обтекание. Если бы знать размеры картинок - можно бы было задать ширину для выдержки и заголовка. Но в том то и дело что картинки эти могут быть любыми. Казалось бы без таблиц не обойтись, а не тут то было, можно:

div.post p{ 
display: table;
_height: 0;/*это для ИЕ5-6*/
zoom: 1;/*это для ИЕ7*/
}

Эта приблуда должна работать в Opera 7-8, Firefox 1.0, Safari 1.2.4, IE/win