Архив форумов ЦИТФорума

[epros]

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

Скажем, хочу я сделать простую вещь: таблицу во всю ширину страницы, в первой строчке которой разместить навигационные ссылки, а вторая строчка должна состоять из одной большой ячейки, внутри которой и будет помещена вся содержательная часть страницы.

Проблемы возникают с красивым размещением навигационных ссылок по длине верхней строчки. Каждая ссылка представляет собой текст: слово или короткую фразу. Требования такие:
1. Все ссылки должны быть однострочными - никаких переносов слов на другую строку. Достигается, вроде бы, с помощью атрибута nowrap для ячейки, в которой лежит ссылка.
2. Соседние ссылки не должны наезжать друг на друга - между ними должно быть некое минимальное расстояние, скажем, 10px. Можно сделать это, поместив между соседними ссылками пустую ячейку фиксированной ширины: <td width=10>&nbsp;</td>
3. Но ссылки не должны и разбегаться далеко друг от друга. Хотелось бы, чтобы они шли от левого края экрана через одинаковые промежутки друг от друга, а справа от них до края экрана оставалось пустое место (например, пустая ячейка).

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

Можно попытаться задать им некую заведомо маленькую ширину. Или в абсолютных единицах - скажем 10px, или относительно - скажем 1%. Но в первом случае возникает перенос слов невзирая на атрибут nowrap, а во втором случае атрибут ширины просто игнорируется - ячейка по-прежнему растягивается и между ссылками возникают ненужные пустоты.

Можно попытаться задать заведомо большой атрибут ширины для правой пустой ячейки, скажем 95%. Но это приводит к сжатию пустых ячеек между ссылками, даже в том случае, если для них указана абсолютная ширина.

Можно для всех ячеек задать процент ширины, но ссылки сами по себе могут иметь разные и непредсказуемые ширины - подбирать бесполезно, а в случае если ссылка не вписывается в отведенную ей ячейку - вся картина разъезжается.

Простое решение - таблица, для которой указана абсолютная ширина. Но мне это не нравится. Не хочется иметь страницу, которая в узком окне будет скроллиться влево-вправо, а в широком будет иметь пустое пространство с боков.

Еще более простое решение - задать промежутки между ссылками не пустыми ячейками определенной ширины, а определенным количеством неразрывных пробелов (&nbsp;). Мне это решение не нравится тем, что в зависимости от типа шрифта ширина неразрывных пробелов может здорово варьироваться. И, наконец, что в этом случае остается от таблиц? Возвращаемся к текстовому форматированию?

Есть еще одно очевидное решение: вообще не задавать никаких атрибутов ширины, кроме как для пустых ячеек между ссылками. В этом случае ячейки со ссылками будут иметь ширину их содержимог ...

[Chipollino]

Можно сделать так: в качестве обёртки - таблица из двух строк - для меню и контента... А меню реализовать ещё одной таблицей, вложенной в верхнюю ячейку...

[Борис]

>>1. Все ссылки должны быть однострочными - никаких переносов слов на другую строку. Достигается, вроде бы, с помощью атрибута nowrap для ячейки, в которой лежит ссылка.

Еще это можно достичь, если не использовать в словах разделителей, по которым делаются переносы на новую строку. Это пробелы и минусы. Заменяй пробелы неразрывными пробелами (&nbsp;), минусы не помню, чем. Те же неразрывные пробелы ставь между ссылками. Примерно так:

<a...>ссылка1</a>&nbsp;<a...>с сылка2</a>&nbsp;...

А чтобы ссылки занимали примерно одинаковое место используй как дополняющий символ тот же неразрывный пробел.

[the-Robot]

А что про cellspacing и cellpadding забыли??
При чём здесь эти пробелы то? Отступ от содержимого ячейки до рамки и расстояние между ячейками... что ещё нужно то?

[epros]

Да и не спасает это:
проблема-то в том, что надписи должны быть слева, а таблица при этом - на всю ширину окна.

[epros]

Сделал общую таблицу из двух строк с указанием width=100%, в верхнюю строку вложил однострочную таблице таблицу БЕЗ указания width, а в нижней - весь контент. Смотрится неплохо и вроде всеми имеющимися под рукой браузерами понимается адекватно.

Есть еще такая тонкость: некоторые браузеры оставляют справа пустое место под полосу прокрутки. Это место в 100% ширины страницы не входит, но окрашивается в body bgcolor. Поэтому получается, что навагационная строчка (выделенная другим bgcolor) заканчивается за пять миллиметров от правой границы экрана.

Даже не знаю, стоит ли бороться с такой мелочью.

[the-Robot]

ой, ну не знаю...мне кажется это делается всё так элементарно...