Растянуть меню на всю ширину

Есть вообще способ растянуть пункты горизонтального меню на всю ширину доступной области (резиновая верстка)?
Предополжим, что пункты меню - это не только текст, который можно растянуть простым text-align:justify; но еще и флоатовые элементы и т.д.
Ну таблицами - это понятно и то, расстояние между ячейками разное и вид, если блоки разной длинны, довольно безобразный.
Гуглинье не дало результатов совершенно

А если поставить логический тег div и присвоить ему параметр
width="100%"

Это я размышляю, сам туго разбираюсь еще

Цитата ("MEDALLION"):

А если поставить логический тег div и присвоить ему параметр
width="100%"

Меню выстроится в вертикальное положение )) Не то
Просто как-то не было до этого нужды в таких менюшках. А тут раз, такой макет попался, хоть вешайся!!!

А чем плоха упаковка меню в список (ul) в котором положение для элементов списка (li) inline-block? и не надло плавающих приколов. Если уж совсем изврат, то в каждый элемент засунуть див и в нем уже издеваться над содержимым как в голову взбредет.

Цитата ("Wordpressor"):

А чем плоха упаковка меню в список (ul) в котором положение для элементов списка (li) inline-block?

Эм, и что будет? Меню на всю ширину области не растянется, по идее.

Я гуглом редко ищу, и вот подыскал для тебя ссылочку:

посилання


Надеюсь, то что нужно !

При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так - посилання.
Ну а если колличество пунктов известно - то можно ширину пунктов в процентах задавать.

Цитата ("MrWolf"):

посилання по аналогии с примером. получается очень классно и все растягивается

Цитата ("segoddnja"):

При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так - посилання.
Ну а если колличество пунктов известно - то можно ширину пунктов в процентах задавать.

имхо, не вижу смысла в таблице. Нет совершенно никакой необходимости.

Цитата ("segoddnja"):

При резиновой верстке лучше все таки таблицей меню сделать, если надо, чтобы оно на всю ширину страницы было и заранее не известно, сколько пунктов в меню будет. Я подобное меню сделал вот так - посилання.
Ну а если колличество пунктов известно - то можно ширину пунктов в процентах задавать.

Я таблицами уже-то сделал, но минус таблицы в том, что растояние между пунктами меню не одинаковое. И между некоторыми пунктами настолько разное оно, что смотрится это ужасно, потому вот и ищу другой способ.

Цитата ("MEDALLION"):

http://www.pro100design.net/html_css/delaem-prostoe-rezinovoe-gorizontalnoe-css-menyu.html

Спасибо. Способ с text-align:justify; безусловно работает. Я б его использовал бы не задумываясь ,но у меня есть кнопка со сложным фоном в этих пунктах меню и придется, скорее всего, использовать float, а с ним уже растягиваться так не будет. text-align:justify - только для строчных элементов. Но в любом случае спасибо, подумаю, может без флоата можно обойтись будет.

Цитата ("Wordpressor"):

http://www.artlebedev.ru/tools/technogrette/html/t... по аналогии с примером. получается очень классно и все растягивается

Хм.. странное меню. Я, если честно не пойму как оно сделано... в чем его загвоздка, что оно на всю ширину растягивается.

MrWolf,

посилання

Заняло 5 минут.

По мере надобности правите и ставите все как вам надо.

Wordpressor, спасибо, но указывать % - это не подходит.

Решил все же делать с помощью text-align:justify; буду пробовать без флоатов обойтись для кнопки, чтоб все работало как нужно.
Всем спасибо, но если есть еще идеи, то, думаю, для всех было бы полезно узнать. Нужен способ именно без % и таблиц.

Сомневаюсь, что он вообще есть

MrWolf,

Указывайте указывайте как вам нужно, это не критично. Поставите в пикселах - сделает указанной ширины и поставит их по центру. А уже оформление, с флоатами или без неважно. По сути пункт меню упакован в див. Там ограничение только фантазия.

Цитата ("Wordpressor"):

поставите в пикселах - сделает указанной ширины и поставит их по центру.

Так в том -то и дело, что ширины мы не знаем. Каждый пункт разной ширины, но отсутупы должны быть одинаковые.
И потому такой способ не подходит.

MrWolf,

эх ..

А что не дает НЕ ставить ширину блока (li), а для внутреннего дива поставить одинаковые по краям отступы? Получите именно то что хотите, если я правильно понял.

Получится след образом: внутренний див задает ширину элемента списка. А что в диве уже вам решать. Блок может быть абсолютно любой ширины. Поведение от этого не изменится. Он так же будет выстраиваться в строку на всю ширину родителя.

Цитата ("MrWolf"):

Я таблицами уже-то сделал, но минус таблицы в том, что растояние между пунктами меню не одинаковое. И между некоторыми пунктами настолько разное оно, что смотрится это ужасно, потому вот и ищу другой способ.

Не пойму, как это расстояние не одинаковое? В моем варианте хоть 2 пункта оставь - смотрится нормально. Может у тебя меню хитрое какое то, на макет бы взглянуть.

Цитата ("Wordpressor"):

а для внутреннего дива поставить одинаковые по краям отступы?

Вот. В этом и смысл. Отсутупы с шириной меняются. Больше ширина экрана - оступы больше... Ну или я неправильно понимаю то, что Вы хотите сказать
Интерисует эффект как при text-align:justify , но для списка блочных элементов. как-то так.

Я-то для себя уже решил, что пока буду юзать text-align:justify и не использовать в меню float. Но все же, это не то, что интерсивало меня (думаю, не только меня).

Цитата ("segoddnja"):

Не пойму, как это расстояние не одинаковое? В моем варианте хоть 2 пункта оставь - смотрится нормально. Может у тебя меню хитрое какое то, на макет бы взглянуть.

Вот, я сверстал только что с помощью text-align:justify.
расстояния между пунктами одинаковое. а когда я делал с помощьютаблицы или %, то было довольно безобразно. Не было так, как щас (ровные отсутпы)
Но недостаток такого меню - работа только со строчными элементами. Вот в этом вся и соль.

Цитата ("Wordpressor"):

да ну. поставьте отступ в 20 (к примеру) пикселей для внутреннего дива, и оно не поменяется от изменения ширины экрана.

А нужно. В этом и смысл резиновости.

Цитата ("MrWolf"):

Отсутупы с шириной меняются.

Да ну. Поставьте отступ в 20 (к примеру) пикселей для внутреннего дива, и оно не поменяется от изменения ширины экрана.

Цитата ("MrWolf"):

А нужно. В этом и смысл резиновости.

Так тогда называйте вещи своими именами ))) Для блоков (li) поствьте отступ в em'ах и будет то, о чем идет речь.

Цитата ("Wordpressor"):

Для блоков (li) поствьте отступ в em'ах и будет то, о чем идет речь.

Сколько ставить? Ну не понимаю я смысла такого способа