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

Гость

0 - 04.01.2013 - 18:54

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

Вот "менюшка", растянутая на всю ширину

Код:

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

http://jsfiddle.net/2xgYR/1/

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

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

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

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

Гость

121 - 20.01.2013 - 10:22

Так, судроперевод.
Перестань вести себя как цирковой осёл.

Любой нормальный разработчик написал бы <style type="text/css"></style> элементарно потому, что лень 4 раза повторять одно и то же в коде.

Скажи, а тебе обязательно нужно разрешение с форума, чтобы сделать то, что ты хочешь, таблицей? :-)

Если да, то второй раз - разрешаю.
Если нет, то подумай, как таблица будет выглядеть на айфоне?

В 2013 году адаптивность уже считается хорошим тоном. Как ты будешь это решать?

Гость

122 - 20.01.2013 - 15:15

это сильно сложно) лучше так:
<style></style>

Гость

123 - 20.01.2013 - 18:32

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

Гость

124 - 20.01.2013 - 21:58

Цитата:

Сообщение от Ярга

В 2013 году адаптивность уже считается хорошим тоном. Как ты будешь это решать?

Емупох, он же песал.

Гость

125 - 07.11.2014 - 01:55

решил вернуться к етому вопросу.
Но пока что, кроме table-cell - резалта ноль.
Как ни странно.
Кроме того, table-cell не робит в IEm если не сделать один финт.

Гость

126 - 07.11.2014 - 01:56

а ну да, есть еще така щтука как flex, но ето тоже фигня.

Гость

127 - 12.11.2014 - 21:07

Бес паники, дивы, таблицы - все шня, свг тру http://codepen.io/Jackselecta/pen/Hfmxq

Гость

128 - 18.11.2014 - 23:56

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

Гость

129 - 19.11.2014 - 18:06

131-Behind a side of sensess >
они не будут вести себя как таблица.
Во всяком случае в IE-8, IE9

Но если вот в этом примере http://htmlbank.net/?NG
вставить в заголовке мета-тэг <meta http-equiv="X-UA-Compatible" content="IE=edge" />
тогда будет полная совместимость для стилей display:table....

Гость

130 - 19.11.2014 - 20:24

Цитата:

Сообщение от Dude

131-Behind a side of sensess > они не будут вести себя как таблица. Во всяком случае в IE-8, IE9 Но если вот в этом примере http://htmlbank.net/?NG вставить в заголовке мета-тэг <meta http-equiv="X-UA-Compatible" content="IE=edge" /> тогда будет полная совместимость для стилей display:table....

Автор не ставил задачи, чтобы пункты меню вели себя как таблица.

Интернет-форум Краснодарского края и Краснодараг. Краснодар, Краснодарский край 2022г.

Интернет-форум Краснодарского края и Краснодара
г. Краснодар, Краснодарский край 2022г.