CSS: Как сделать "резиновое" меню на примере new-jquery?

Всем привет! Сразу скажу, что поиск не помог и в существующих шаблонах, не нашел шаблона с «резиновым» меню, чтобы подсмотреть. Выложил бы свои попытки, но не верстальщик (только учусь), по-этому думаю что мои варианты совсем неправильны, потому как все отказывались делать меню растягиваемым.
Насколько мне удалось понять, задача решается изменением этих строк:

/* Navigation
-------------------- */
#nav { margin: 0 auto 15px; max-width: 1600px; min-width: 960px; background: url(../images/nav.png) no-repeat; position: relative; zoom: 1; }
#nav-inner { height: 92px; padding: 0 0 0 0; margin-left: 20px; background: url(../images/nav.png) 100% 0 no-repeat; overflow: hidden; zoom: 1; }

/* Menu */
#nav .menu { padding-bottom: 30px; float: left; font-size: 15px; margin: 11px 0 0 0; }
#nav .menu li { float: left; color: #51B038; padding: 3px 10px 4px 10px; margin-right: 5px; position: relative; }
#nav .menu li a.new { color: #390; }
#nav .menu li a { text-decoration: none; color: #838383; }
#nav .menu li a:hover { color: #333; }
#nav .menu li.active { position: relative; background: #fff; border-bottom: 1px solid #ddd; }
#nav .menu li.active a { color: #333; }
#nav .menu li.active:before { content: ""; position: absolute; bottom: -5px; left: 10px; width: 9px; height: 5px; background: url(../images/arrows.png) no-repeat; }

/* Sub-menu */
#nav .sub-menu { position: absolute; top: 35px; left: 0; width: 500px; font-size: 11px; }
#nav .sub-menu li { margin-right: 5px; line-height: 13px; padding: 3px 10px 5px 10px !important; border-radius: 12px; }
#nav .sub-menu li a { color: #777 !important; text-decoration: underline; }
#nav .sub-menu li a:hover { text-decoration: none !important; }
#nav .sub-menu li.active { background: #555; color: #fff; font-weight: bold; background: #83DC5F; box-shadow: 0 2px 0 #75C656 inset; }
#nav .sub-menu li.active a { color: #fff !important; text-decoration: none; }
#nav .sub-menu li.active:before { display: none; }

Для удобства, те же строчки на trac.lsdev.ru.

Чего хочу добиться: Растягиваемого меню (Все, Коллективные, Персональные, Лента, Топ) чтобы тянулось, пропорционально блоку #content
#content        { width: 66.5%; float: left; margin-right: 1.5%; background: #fff; }


Бьюсь второй день, буду благодарен за помощь!

5 комментариев

avatar
Чего хочу добиться: Растягиваемого меню (Все, Коллективные, Персональные, Лента, Топ) чтобы тянулось, пропорционально блоку #content
А зачем? По мне так эта резина только потеряет юзабилити.
avatar
Демонстрировать и спрашивать о чем-то на примере шаблона n-j вроде бы считается стандартом, т.к. шаблон используется в ls по-умолчанию. Лично мне это нужно для шаблона на основе developer-jquery и резиновое меню в дизайне, которое я пытаюсь сделать будет смотреться уместно :) Нужна наводка, как это сделать, а дальше я разберусь. Может быть что-то блокирует резину в Navigation, по этому мои width: %; не работают в Menu или причина в чем-то другом… пока не разобрался.
avatar
position: absolute;
width: 100%;

это нужно прописать у #nav
avatar
ну или не 100% а сколько у вас там надо :)
avatar
Видимо что-то не так, заменил в #nav position: relative; на position: absolute; и контент с боковыми блоками наехал на весь #nav вместе с меню. То есть, контент начинается не после блока «меню», а после блока хедера (Топики, Блоги, Люди...), перекрывая собой меню.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.