«Резина» и таблицы

[Nanto]

Много гуглил - инфы практичеки по этой теме нет...

Такая проблема:

сделано горизонтальное меню (панель навигации) через таблицу. Вроде всё нормально... Но обнаруживается паскудная особенность - при растягивании окна браузера, таблица соответственно тоже тянется. Но тянется она «пропорционально» - т.е. контент ячеек (текстовые ссылки навигации) неизменен и наращивание размера происходит за счёт... Не знаю даже чего... Паддингов ячеек, наверное же? Так вот эти паддинги высчитываются пропорционально длине ячейки (читай - содержимого ячейки). Смотрится несколько убого. Длинная строка (например, «Главное меню») имеет огромные отступы!.. А «FAQ», допустим, ужат до нельзя. Можно ли управлять «растягиванием»? Чтобы браузер добавлял одинаковые отступы?

P.S. Вопрос касается именно таблиц! Можно было бы сделать и через список, но на то свои причины... Да и кстати, это вообще актуальная проблема для всего css - я так и не встречал внятных решений для "резинового горизонтального меню" (ну есть там костыли через "<ul>, float и table-cell"), чтобы тянулись только внутренние промежутки. А казалось бы куда уж насущнее!

 <table width="100%" bgcolor="#fa8e47" border="1">
  <tr>
   <td  align="center"><a href="#">Главное меню</a></td>
   <td  align="center"><a href="#">Второстепенное меню</a></td>
   <td  align="center"><a href="#">Третьестепенное меню</a></td>
   <td  align="center"><a href="#">FAQ</a></td>
  </tr>
 </table>

Edited August 25, 2011 by Nanto

[CalvinKlein]

может стоит убрать width="100%" и выровнять по центру?

или если вы заранее знаете сколько у вас пунктов меню можно задать ширину колонки в %

Edited August 25, 2011 by CalvinKlein

[Softlink]

td{
width:25%;
text-align:center;
}

Сделает все ячейки равными.

[Shigamotto]

со всеми сделать

<td width="25%" align="center">

[Nanto]

Блин, хотел же дописать!

В оригинале 7 ячеек!

Так что боюсь, браузеры конструкцию типа "width: 14,2857(142857)%" не осилят... Или они умеют "умно" округлять относительные величины?

Edited August 25, 2011 by Nanto

[CalvinKlein]

вообще они понимают дробь но по-разному и не все.

лучше задайте тогда просто 14% а оставшиеся 2% фоном заполнить или ещё что-то вроде этого

[Softlink]

Блин, хотел же дописать!

В оригинале 7 ячеек!

Так что боюсь, браузеры конструкцию типа "width: 14,2857(142857)%" не осилят... Или они умеют "умно" округлять относительные величины?

Да, все кроме Оперы

Сделайте

table{
table-layout:fixed;
width:100%;
}

[Nanto]

Блин, хотел же дописать!

В оригинале 7 ячеек!

Так что боюсь, браузеры конструкцию типа "width: 14,2857(142857)%" не осилят... Или они умеют "умно" округлять относительные величины?

Да, все кроме Оперы

Сделайте

table{
table-layout:fixed;
width:100%;
}

Ага, спасибо! Не знал про это свойство... А при этом надо выставлять длину ячеек? И в каком формате? 14% или 14.3%?

P.S. Но проблема уже не актуальна (хотя сам вопрос вполне) - при равной ширине ячеек и заданном кегле и гарнитуре текст не влезает в эти семь ячеек... Будем их резать пропорционально!

[Softlink]

Блин, хотел же дописать!

В оригинале 7 ячеек!

Так что боюсь, браузеры конструкцию типа "width: 14,2857(142857)%" не осилят... Или они умеют "умно" округлять относительные величины?

Да, все кроме Оперы

Сделайте

table{
table-layout:fixed;
width:100%;
}

Ага, спасибо! Не знал про это свойство... А при этом надо выставлять длину ячеек? И в каком формате? 14% или 14.3%?

P.S. Но проблема уже не актуальна (хотя сам вопрос вполне) - при равной ширине ячеек и заданном кегле и гарнитуре текст не влезает в эти семь ячеек... Будем их резать пропорционально!

Да, с этим свойством надо аккуратно обращаться. Могут быть проблемы, если текст не входит по размерам.

[SelenIT]

А нужна ли ширина?

[Nanto]

А нужна ли ширина?

Не... Я в своё время повозился с такой же проблемой и списками... Само меню на списках сделать не проблема. Там начинается гемморой, когда эти блоки надо оформлять... На всяких там подсветках ховера и активных пунктах - другое оформление (размеры пункта меню увеличиваются и т.д.). Не помню точно в чём проблема, но вроде как "inline-block" мешал...

[SelenIT]

Если размеры шрифта увеличиваются, то да, расстояния будут некрасиво дергаться. Но сам по себе inline-block подсветкам ховера и прочим выделениям не только не мешает, но даже помогает . Проблема данного решения может быть в отступе на высоту строки из-за псевдоэлемента, который помогает задействовать justify, но это тоже относительно несложно приводится к общему знаменателю и фиксится.

Впрочем, я там привел два варианта — у хардкорно-табличного, по идее, нет и этих проблем...

[Nanto]

Если размеры шрифта увеличиваются, то да, расстояния будут некрасиво дергаться. Но сам по себе inline-block подсветкам ховера и прочим выделениям не только не мешает, но даже помогает . Проблема данного решения может быть в отступе на высоту строки из-за псевдоэлемента, который помогает задействовать justify, но это тоже относительно несложно приводится к общему знаменателю и фиксится.

Впрочем, я там привел два варианта — у хардкорно-табличного, по идее, нет и этих проблем...

Нет, всё замечательно - спасибо за примеры. Ваш вариант реализации списка мне тоже ещё пригодится. Просто и так уже сделано таблицей, и как писал выше, выравнивание оказалось неактуально - не лезут эти семь пунктов при заданной гарнитуре и кегле в 1024px... Это уже проблемы дизайнера, который не смог посчитать кол-во пунктов!