Форум hotibo.ru

liven · 28.11.2009 02:45

Есть горизонтальное меню, как можно сделать его резиновым?
Т.е. чтобы равномерно тянулось расстояние между линками в пределах блока.
У меня ниче не получилось... Может с помощью списка как нить?

Kildor · #2 28.11.2009 06:18

сделать список,

После чего ul{display:table;} li{display:table-cell} a{display:block}
Это для браузеров.
А для ИЕ — li{display:inline; width:expression(100/(this.parentNode.childNodes.length)+'%');}

liven · 16.12.2009 12:21

Ниче не получилось, я правда долго не разбирался, но не вышло....

sas171 · 17.12.2009 03:23

Старая добрая проблема. Напоминает вопрос о колонках: как сделать, чтоб два блока были постоянно одинаковой высоты, но при этом растягивались когда в них становится больше текста. Во времена IE6 никак.

Admin · #5 18.12.2009 15:24

Test Document

link 1

link 2

link 3

link 4

Kildor · #6 19.12.2009 13:50

А зачем margin-left:-1px?

Admin · #7 20.12.2009 16:18

Kildor написал:

А зачем margin-left:-1px?

Допустим у нас ширина окна 850px (100%), тогда ширина одного блока меню будет 212,5px (25%), а такого быть не может, поэтому округляется до 213px и у нас последний блок переезжает под первый. А здесь 1px для каждого

и есть запас в случае такого округления, чтобы меню не разъехалось.

AKS · #8 25.12.2009 22:46

Вариант Kildor'а вполне рабочий, только UL надо задать необходимую ширину в %. А для ИЕ ширину для LI надо вычислять не от 100, а к примеру от 95%. Но вариант от Admin получше тем, что не зависит от JS.

liven · #9 22.01.2010 11:31

хех, пришлось вернуться к этой проблеме
Вот сам шаблон: _http://22291.com/aes/
CSS смотреть вот эту: _http://22291.com/aes/css/layout.css

У варианта от Admin есть недостатки: во-первых через cms систему кол-во пунктов меню меняется, а значит жестко задать процент нельзя... Во-вторых пункт "О компании" не влазит в 14% при 1024 (там 7 пунктов, потому каждому по 14%)

Теперь вариант Kildor: Во-первых зачем a{display:block} ?? Он только мешает в IE
В Mozilla все прекрасно показывает, но вот с IE возникли проблемы... Собсно сами можете посмотреть как ведет себя меню... При 1024 не влазит, при больших разрешениях не центрирует...

Есть идеи как решить проблему? Не хочется меню через таблицу строить....

Отредактированно liven (22.01.2010 11:36)

liven · #10 25.01.2010 01:50

Проблема оказалась в доктайпе.

Код:

При таком скрипт для IE не работает.

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

P.S. Неужели никому из посетителей форума не требовалось делать резиновое горизонтальное меню по стандартам??? Товарищи, откликнитесь!

AKS · #11 25.01.2010 09:28

liven
Слушай, ты умеешь заинтриговать! Все, качаю твою страницу и начинаю париться... Интересует только ИЕ, так ведь?

Отредактированно AndrewS (25.01.2010 09:29)

AKS · #12 25.01.2010 10:46

Мешает слишком большой отступ (18 px), заданный для тэга A внутри LI. Задавая такие отступы наряду с процентной шириной родительских элементов трудно добиться "резиновости". В 7-ой Опере вообще получается непредсказуемый результат...

AKS · #13 31.01.2010 16:09

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

locker · #14 14.03.2010 11:59

Большое спасибо, то что я искал :-D

farik · #15 19.03.2010 18:43

С помощью списков!!!!!! Пример на http://webmascon.com/topics/coding/37a.asp

Форум hotibo.ru

#1 28.11.2009 02:45

Резиновое горизонтальное меню

#2 28.11.2009 06:18

Re: Резиновое горизонтальное меню

#3 16.12.2009 12:21

Re: Резиновое горизонтальное меню

#4 17.12.2009 03:23

Re: Резиновое горизонтальное меню

#5 18.12.2009 15:24

Re: Резиновое горизонтальное меню

#6 19.12.2009 13:50

Re: Резиновое горизонтальное меню

#7 20.12.2009 16:18

Re: Резиновое горизонтальное меню

Kildor написал:

#8 25.12.2009 22:46

Re: Резиновое горизонтальное меню

#9 22.01.2010 11:31

Re: Резиновое горизонтальное меню

#10 25.01.2010 01:50

Re: Резиновое горизонтальное меню

Код:

#11 25.01.2010 09:28

Re: Резиновое горизонтальное меню

#12 25.01.2010 10:46

Re: Резиновое горизонтальное меню

#13 31.01.2010 16:09

Re: Резиновое горизонтальное меню

#14 14.03.2010 11:59

Re: Резиновое горизонтальное меню

#15 19.03.2010 18:43

Re: Резиновое горизонтальное меню

Board footer