Резиновое меню

А как бы сделать списком и CSS горизонтальное меню, которое растягивается по ширине, и соответственно, изменются расстояния между пунктами? Которое элементарно делается таблицей…

Layout

Выглядит примерно как на картинке. В полосе с меню должна быть дырка фиксированного размера, через которую видна часть фоновой картинки.

Можно упростить задачу, отказавашись от резины между пунктами меню. Не получается сделать отступ нужного размера от правого края. Точнее, можно, если указать фиксированную высоту.

Очевидно, на новом крутом блочном сайте будет меню таблицей…

ul {
background:#eee;
width: 100%;
}
#fon {
background:#eee;
}
* html #fon {
display:none;
}
li {
width: 20%;
list-style:none;
float:left;
text-align:center;
display:inline;
}
#longtext {
width: 38%;
text-align: right;
}

Последние записи

Архив

По вертикали. Допустим, я делаю див, который изображает из себя фон меню. В него кладу плавающий список — он не растягивает этот див, и высота дива остается равной нулю.

Написал: edgy | September 22, 2005 03:17 PM

или сделать этот контейнер(div) тоже плавающим, или поставить после ul какой-нибудь элемент (br) с clear:both
Ну или как здесь: http://positioniseverything.net/easyclearing.html

Плавающим его делать не получается, там у меня используются negative margins, и я не могу ему задать нужную ширину.

За ссылку спасибо, там вроде что-то похожее на то, что нужно.

Написал: edgy | September 22, 2005 03:24 PM

для блока elastic
html:



<ul> 

<li><a href="#">link1</a></li>

<li><a href="#">link2</a></li>

<li><a href="#">link3</a></li>

<li id="longtext">longtext</li>

<div id="fon">&nbsp;</div>

</ul>

css