Задачка для бригады Гломурных Креведок: как без таблиц сверстать горизонтальное меню
 

Вопрос особенно тем, которые постоянно тявкают в том плане, что "таблицы это некруто" (ну вы поняли про кого это) =)

Вот "менюшка", растянутая на всю ширину
[code]
<table border="1" style="border:1px solid blue; width:100%">
<tr>
<td style="text-align:center"><span>Меню1</span></td>
<td style="text-align:center"><span>Меню2 (длинное)</span></td>
<td style="text-align:center"><span>Меню3 (очень длинное)</span></td>
<td style="text-align:center"><span>Меню4</span></td>
</tr>
</table>
[/code]
[url]http://jsfiddle.net/2xgYR/1/[/url]

оно выполнена таблицей, как видим, что позволяет каждому пункту меню занимать (автоматически!) стоко места, скоко надо, пропорционально и все такое.

Просьба сверстать такое дивами, не дивами, чем угодно, кроме некрутых таблиц. =)


В общем, порадуйте, братцы, порадуйте.
Как раз надо меню, думал по-быстрому сделать таблицей, но вспомнил про вашу гавру и решил даже немого подождать, чтобы заюзать ваш "шыдевр" безтабличной верстки. =))

ЗЫ
кроссбравзерно, пожалуйста.

ЗЫ
"бригады Гломурных Креведок" следует читать "бригады Гломурного Интеллехта".
Подзабыл уже немного, каюс.

Остроумием так и прёт...

2-shamanio >
вопрос вполне серьезный.

Нет в точности такого решения, как на таблице в данном случаем. Вернее есть, но в IE7 и ниже не работает: css свойства display:table и display:table-cell

[url]http://jsfiddle.net/FsQpJ/[/url]

4-shamanio >
так это те же яйца

а ли с инлайном разве не помогут?
А вообще побоку, у каждого свои тараканы на холивары

[quote=Пётр;28437989]а ли с инлайном разве не помогут?[/quote]
кроссбраузерн вряд ли

[quote=Пётр;28437989]А вообще побоку, у каждого свои тараканы на холивары[/quote]
но ведь действительно интересно.

8-Shveik >
ну тогда порадуй ответом-решением.
А то такое впечатление, что ты полный ламо, и токо умничаешь. =))

10-Shveik >
другими словами, ответа нет.
Хе-хе, свистун.

Можно еще вот так [url]http://jsfiddle.net/FsQpJ/8/[/url]
Но опять же, решения, которое будет один в один повторять табличную схему - нет...

12-shamanio >
да, не то, конечно.
Просто удивительно, что оказывается, таблицу в этом таком простом случае нельзя ничем заменить.

13-Shveik >
оптекай, болезный, оптекай =)

В этом то и вся кривость html разметки. Постоянно приходится сталкиваться с таким бредом...

15-shamanio >
с другой стороны, что мешало создателям css нормально прописать поведение элементов со стилем width:auto? =))

Ну, эт довольно больная и бесконечная тема)

но зато выяснил, что альтернативы таблицам и в этом случае тоже нет. =))

[quote=Гавайские субтитры;28445237]альтернативы таблицам и в этом случае тоже нет[/quote]
есть альтернатива, смотри здесь: [url]http://kak-iskat.ru/[/url]

более подробно тут: [url]http://kak-iskat.ru/?q=%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5+%D0%BC%D0%B5%D0%BD%D1%8E[/url]

[quote=reason;28458661] Цитата: Сообщение от Гавайские субтитры альтернативы таблицам и в этом случае тоже нет есть альтернатива, смотри здесь: [url]http://kak-iskat.ru/[/url] [/quote]
Приведи пример тут, аж интересно стало...

[quote=shamanio;28458830]аж интересно[/quote]
попробуй так: [url]http://kak-iskat.ru/?q=%D1%80%D0%B5%D0%B7%D0%B8%D0%BD%D0%BE%D0%B2%D0%BE%D0%B5+%D0%B3%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%BD%D1%82%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5+%D0%BC%D0%B5%D0%BD%D1%8E[/url]

Конкретно ссылку на решение можешь дать?

[quote=shamanio;28459321]Конкретно ссылку[/quote]
издеваешься или совсем обленился? смотри 22-й пост, там ссылка, найди в выдаче третий результат, справишься?

24-reason >
Это чтоли?
[url]http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-blocks-menu.html[/url]
[img]http://www.xiper.net/assets/images/html-and-css-tricks/navigation/rubber-block-menu.png[/img]
Так оно же фиксированное. =)
ты извини, но ты или олень, или плохо соображаешь.
Ты вообще В №0 читал про это меню? Ты вообще понял про что речь в этой теме?

[quote=Гавайские субтитры;28459559]олень[/quote]
мало того, что не образованный, еще и лентяй, дочитай, указанную тобой, статью ходя бы до демо-примера, протестируй и наберись мужества принести извинения за свои оскорбления

26-reason >
они ж все одинаковые по ширине =)
Ты чо тут голову людям морочиш, додик?

Ты действительно не соображаешь про что тема. =)))
На jsfiddle глянь, ламо. =)

до этого не смог дочитать: [url]http://www.xiper.net/examples/html-and-css-tricks/navigation/rubber-menu.html[/url]

28-reason >
во-первых, не кроссбравзерно, во вторых, токо для однострочного меню и подходит.
=)

+29
И это, попробуй сузить окно по ширине.
Получится такая кака.... не, не кака, а [b]КАКА[/b], что мало не покажется.

За такое меню веб-дизигнеров убивают вообще-то. =))))
Заказчики. =)

[quote=Гавайские субтитры;28459738]не кроссбравзерно[/quote]
ошибаешься!
[quote=Гавайские субтитры;28459738]для однострочного меню[/quote]
опять ошибаешься!!!

[quote=reason;28459779]опять ошибаешься!!![/quote]
та сам открой эту ссылку хотя бы в мозилле: "Без цензуры" - разъехалось в стороны, если суить окно, то меню рассыпается. Две строчки сделать низя (потому что LI).
Повторяю: за такое меню веб-дизигнеров убивают. =)

[quote=reason;28459673]http://jsfiddle.net/FsQpJ/8/[/quote]
Собственно, чем это отличается от того, что я выше писал? [url]http://jsfiddle.net/FsQpJ/8/[/url]
С одним отличием, что фон применен к родителю пунктов, а не к самим пунктам меню...

33-shamanio >
хотел это сказать оратору с самого начала, но обленился =)

в цитате выше должно быть: [url]http://www.xiper.net/examples/html-a...bber-menu.html[/url]

все, до свидания

Но вообще вариант вроде кроссбраузерный...

А задачка действительно интересная однако.
Все, решил. Меню сделаю не таблицей. Как, пока не знаю, но не таблицей, но сделаю так, чтобы они во всем было сходно с табличным и было кроссбравзерным.
Сам себе делаю вызов, тыксызыть.
О результатах доложу, если смогу сделать. =)

36-reason >
наберись мужества принести извинения за свои оскорбления =)

Покажи хоть дизайн самого меню

[quote=shamanio;28459821]Но вообще вариант вроде кроссбраузерный...[/quote]
могу сделать скрин со своей мозиллы. Там текст, тот что из двух слов, разъехалсо =)

давай