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

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

Гость
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/

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

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


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

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



Гость
41 - 08.01.2013 - 01:34

http://www.fotolink.su/v.php?id=7681...764783b71f1a43


http://www.fotolink.su/v.php?id=7186...c62f9fc68d5d85
Гость
42 - 08.01.2013 - 01:34
вот уроды, не дает загружать прямо тут.
Гость
43 - 08.01.2013 - 01:34
Не не, я про свой вариант) http://jsfiddle.net/FsQpJ/8/
Гость
44 - 08.01.2013 - 01:35
Да и рамочек веть нету, как в таблице.
Из говна пуля получилась, а не меню =))
Гость
45 - 08.01.2013 - 01:37
46-shamanio >
А ну так этот нормально, но все равно веть не то.
если в две строчки, то не выравнивается по середине, даже с text-align:center, и рамочек опять же нету.
Зазырь:
http://jsfiddle.net/FsQpJ/14/
Гость
46 - 08.01.2013 - 01:41
http://jsfiddle.net/FsQpJ/21/
Гость
47 - 08.01.2013 - 01:49
Ты покажи меню которое тебе нужно сделать
Гость
48 - 08.01.2013 - 01:58
50-shamanio >
Ну такое же чтоб было как таблица.
http://jsfiddle.net/2xgYR/1/

49-shamanio >
да, выровнялось. А у меня чо-то не выровнялось =))
Гость
49 - 08.01.2013 - 11:22
Не, в точности такое же не получится сделать, увы. Только на table-cell
Гость
50 - 08.01.2013 - 19:39
52-shamanio >
подозреваю что таки да.
И сомневаюсь, что даже table-cell поможет (в случае если меню резиновое и пункты могут превращаться в многострочные).
Но все равно поковыряюсь.
Гость
51 - 08.01.2013 - 20:03
table-cell это один в один, что и таблица, только на css
Гость
52 - 08.01.2013 - 20:07
54-shamanio >
ну а если одна из ячеек станет выше других из-за двух строчек? Другие ж по идее останутся прежней высоты.
(не проверял, может быть и не так все) =)
53 - 08.01.2013 - 21:02
Гавайские субтитры > сделать меню блоками кроссбраузерно можно. Но не скажу как это делается, даже за деньги! :) А бесплатно тем более :) Учи CSS :)
Гость
54 - 08.01.2013 - 21:09
56-Искусственный Интеллект1 >
не флуди, болезный. =)
Гость
55 - 09.01.2013 - 00:31
а можно увидеть пример того дизайна, в котором нужна менюшка из 4 пунктов растянутых на всю щирину ?? у меня монитор 27", думаете удобно будет ориентироваться в нем???
Гость
56 - 09.01.2013 - 00:40
58-Kuba >
откуда вывод, что будет непременно 4 пункта и непременно w-100%?
Гость
57 - 09.01.2013 - 09:19
из примера и приведенных выше решений.
58 - 09.01.2013 - 09:52
57-Гавайские субтитры > тупоголовенький, чё ты такой злой? :)
Гость
59 - 09.01.2013 - 15:50
60-Kuba >
вам знакомо слово "фарисейство"?
Гость
60 - 10.01.2013 - 02:28
А, понял.
Пацан просто решил кинуть понт про размер пиписьки монитора 27'' =)))
Гость
61 - 10.01.2013 - 08:09
Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
кроссбраузерн вряд ли
похер на ие 6, 7
Гость
62 - 10.01.2013 - 10:34
63-Гавайские субтитры >Понтом это было лет пять назад, а сейчас рабочий инструмент.. С фарисейством ознакомислся, не понял к чему это. ну и писька у меня явно больше чем у тебя, парниша..
Гость
63 - 10.01.2013 - 17:27
65-Kuba >
фарисейство (в данном случае), это когда пытаютсо изменить результат, искажая/придумывая детали. В данном случае похрену размер экрана, главное, чтобы оно растягивалось/сужалось и текст в каждом пункте растекался плавно, пропорционально и клёва.

А моя пиписька может и меньше твоей, всего 16 см, но это мне похрену, т.к. еще ниразу жалоб не слышал по этому поводу. =))
Гость
64 - 10.01.2013 - 20:43
Уже давно все нормальные люди меню (и не только) делают так (тягаем окно и фтыкаем):

http://www.fork-cms.com/
http://simplebits.com/
http://clearairchallenge.com/
Гость
65 - 10.01.2013 - 21:06
67-SIEMENS >
не то, не то.
Гость
66 - 10.01.2013 - 21:21
шош тада то... страшно ля вообразить.
Гость
67 - 10.01.2013 - 21:30
Гость
68 - 10.01.2013 - 21:35
69-SIEMENS >70-SIEMENS >
http://jsfiddle.net/2xgYR/1/
Гость
69 - 10.01.2013 - 21:40
71-Гавайские субтитры > вот это нормальное меню??
Гость
70 - 10.01.2013 - 21:42
+72, такое было актуально году в 99-м... или чуть раньше.
Гость
71 - 10.01.2013 - 21:44
Это я уже молчу про то, что расстояния между пунктами, мяхко говоря, разные. Чего даже в 98-м уважающие себя люди не допускали.
Гость
72 - 10.01.2013 - 22:18
72-SIEMENS >73-SIEMENS >74-SIEMENS >
Это самое что ни на есть нормальное меню.
Просто вы видите только схематику, т.к. всякие заокругленные углы, вспышки и развертывания и прочие архитектурные излишества убраны, чтобы было понятно о чем речь.

Цитата:
Сообщение от SIEMENS Посмотреть сообщение
расстояния между пунктами, мяхко говоря, разные
да, надо именно так и не иначе. В этом вся фишка.
Гость
73 - 10.01.2013 - 22:23
Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
Это самое что ни на есть нормальное меню.
Шо ж в ём нормальгного?? Ты его сжиматъ пробовал?

Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
да, надо именно так и не иначе. В этом вся фишка.
Это не фишка, это жоппа ваще-то. Неравномерная кривая жоппа.
Гость
74 - 10.01.2013 - 22:28
76-SIEMENS >
пошол субъективизьм--
В общем, задачу я изложил.
Вопрос, повторить такое же, но БЕЗ таблиц.
(выше написал, что сам потыкаюсь, т.к. задачка имхо интересная, токо чуть пожже) =)
Гость
75 - 10.01.2013 - 22:29
Цитата:
Сообщение от SIEMENS Посмотреть сообщение
Шо ж в ём нормальгного?? Ты его сжиматъ пробовал?
гы-гы.
А вы пробовали сжимать то что на ваших примерах? =)))))))))
Оно ж там как говно разлазится.
А вот в моем примере не разлазится. А красиво перетекает как надо.
Потому что таблица. =)
Гость
76 - 10.01.2013 - 22:42
Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
Оно ж там как говно разлазится.
Что разлазится? Оно вообще-то под любой экран адаптируется, от мобилы до 30"+

Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
А вот в моем примере не разлазится. А красиво перетекает как надо.
В твоем примере.. даж не знаю как повежливей сказать. Когда один пункт в одну строку, другой в две, и всё это еще на разных расстояниях друг от друга — впечатляет шописец.
ПоностолЪгировал по 90-м.
Гость
77 - 10.01.2013 - 22:52
Цитата:
Сообщение от SIEMENS Посмотреть сообщение
В твоем примере.. даж не знаю как повежливей сказать. Когда один пункт в одну строку, другой в две, и всё это еще на разных расстояниях друг от друга — впечатляет шописец.
это вам может нравиться, может не нравиться, но задача поставлена именно повторить то что есть, вне зависимости от субъективных мнений.
Гость
78 - 10.01.2013 - 22:59
Цитата:
Сообщение от Гавайские субтитры Посмотреть сообщение
но задача поставлена именно повторить то что есть
Тогда и повторяй аутентично, таблицами. Как тогда верстали.
Глупо пытаться повторить народ.ру 2000 года как-то иначе.
Гость
79 - 11.01.2013 - 00:16
Цитата:
Сообщение от SIEMENS Посмотреть сообщение
Тогда и повторяй аутентично, таблицами
бригада гломурных интеллехтов утверждает, что таблицами уже нельзя верстать, т.к. есть замена.
Гость
80 - 11.01.2013 - 01:32
css условной, а не с абсолютными параметрами, сделай и будет тебе счастье


К списку вопросов






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