К списку форумов К списку тем
Регистрация    Правила    Главная форума    Поиск   
Имя: Пароль:
Рекомендовать в новости

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

Гость
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 &gt; они не будут вести себя как таблица. Во всяком случае в IE-8, IE9 Но если вот в этом примере http://htmlbank.net/?NG вставить в заголовке мета-тэг &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt; тогда будет полная совместимость для стилей display:table....
Автор не ставил задачи, чтобы пункты меню вели себя как таблица.


К списку вопросов
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск




Copyright ©, Все права защищены