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

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

Layout

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

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

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

← Представитель студии Артемия Лебедева в Сыктывкаре | Главная | Lytdybr →

Комментарии

а можно примерчик как оно дОлжно выглядеть и опорные размеры?
а то есть пару идеек… но не уверен что, то что надо.

kost:

Обновил пост. Отступ справа — фиксированный.

количество ппунктов меню ограниченное? в смысле меняться не будет? Если да, то плавающие li и ширину в процентах.

kost:

Плавающие li не хотят растягивать полоску (фон меню), если ей не указать явно высоту.

сделать ul тоже плавающим?

растягивать по вертикали или горизонтали?

kost:

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

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

kost:

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

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

для блока 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

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;
}

Архив

Creative Commons License
This weblog is licensed under a Creative Commons License.
Работает на
Movable Type 3.21
98746801
My status a.kost