Это не меню, а сплошное недоразумение! Все ссылки-на титулку Зебраса.

Длиннее, чем шире
продолжение...

Если вы решили делать растягивающуюся страницу, внимательно присмотритесь к своему эскизу, и определите, какую часть в шапке вашей страницы можно было бы использовать для создания тайла (tile) –фрагмента, который можно многократно повторить, чтобы заполнить пустые промежутки в ячейках.

Рассмотрим на практике несколько вариантов:

На этом сайте область в красной рамке заполнена одинаковым узором от крайней правой пиктограммы и до границы окна. Следовательно, мы можем взять один фрагмент этой области (узора) и разложить, словно плитку, на всю оставшуюся длину до границы окна. Таким образом, при каком бы разрешении экрана не просматривал нашу страницу дотошный пользователь, у него всегда она будет растягиваться вместе с рамкой окна, заполняя лишнюю область повторяющимся фрагментом.

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

Что же касается нашей змеи, то у нее есть голова, хвост и туловище, и это самое туловище как раз и будет одинаково на всем его (или ее?) протяжении. Возможно, зоологи не согласятся, с таким непрофессиональным подходом, но на то они и зоологи, чтобы щупать и измерять все части тела бедной рептилии, а для нас она будет везде одинакова –как говорится, длиннее, чем шире. ;)

На практике раскладывание повторяющегося фрагмента осуществляется так – вы выбираете фрагмент, оптимизируете и сохраняете его под каким-либо именем, а затем назначаете в атрибут BACKGROUND тега <TD>:

<TD WIDTH="100%" BACKGROUND ="images/tile.gif">Тексты и картинки</TD>

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

Не стоит использовать прозрачный имидж (.gif) в качестве фрагмента фона ячейки – Netscape его просто не отображает.


Также необходимо помнить о том, что если высота ячейки превысит высоту вашего фрагмента (разложенного слева направо), то он начнет повторяться, и у вас появятся совершенно лишние полосы. То же самое произойдет с фрагментом, разложенным в ячейке сверху вниз, если ширина ячейки превысит ширину фрагмента.

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

Не стоит волноваться, что величина вашего фрагмента-подложки повлияет на размер ячейки.

Изображение, положенное на дно ячейки, отрисовывается с верхнего левого угла и до границ ячейки. Та часть изображения, которая не попала в размер ячейки, попросту «обрезается» ее краями.

Некоторые начинающие дизайнеры прибегают к использованию % в описании ширины и высоты имиджей. Этот нехитрый прием ( <IMG SRC="title1.gif" WIDTH=100% HEIGHT=100%> ) в Explorer приводит к тому, что картинка изменяет свой размер вместе с размером окна, растягиваясь как по ширине, так и по высоте. Однако при этом изображение непропорционально искажается, бьется на пиксели, а в Netscape вообще исчезает.
Так что лучше раз и навсегда отвыкнуть от привычки прописывать имиджам размеры в % - уж лучше просто их не указывать, хоть это и увеличивает время загрузки страницы.