Много вопросов про создание таблиц.

[DasTPID]

Приветствую!

<!-- Вступление про чайника опущено. Вкратце: ничего не умею, но хочу научиться -->

Мне очень хочется сделать меню на своём сайте, примерно в таком виде:

Здесь элементы 2-9 -- это рамка, 1 -- это собственно меню. Как делаются таблицы в ХТМЛ - разобрался. Меню у меня будет примерно 20% ширины броузера слева, то есть точный его размер в пикселях я не знаю. Ну допустим ширину рамки я выберу произвольно - пусть будет 30 пикселей. Тогда уголки рамки я нарисовать и разместить в таблице сумею (элементы 6-9), но что делать с границами (2-5)? Может быть можно нарисовать рисунок шириной один пиксель (и высотой 30) и им замостить по горизонтали зоны 4-5? Если да, то как? Если нет, то как это делается по-другому? Аналогично зоны 2-3, только замостить их нужно по вертикали.

Еще один вопрос. Уголки моей рамки - рисунки 6-9 - на самом деле один и тот же самый рисунок, только повернутый на n*90 градусов (или отражен сверху-вниз, слева-направо....). Можно ли при отрисовке обойтись одним изображением, а чтоб в нужных местах его повернул (отразил) сам броузер?

Далее, зона 1 - собственно меню - у меня должна содержать изображение (фотографию), на фоне которой должны идти ссылки. Если ссылок много, то зону 1 можно замостить этой фотографией сверху вниз (а не квадратиками). Тут я вообще не знаю как сделать. Фоном таблицы (background) делать нельзя - я не знаю какой точно размер у меня будет иметь меню, а stretch (растягивание), как я понял, не поддерживается для background. Вроде бы где-то в хелпе мне попадалось, что можно сделать через z-буфер (внутри таблицы <img> растягивается на 100%, а в верхнем слое ссылки), но что-то мне подсказывает, что это не так делается. А как?

Помогите, люди добрые Когда научусь - обещаю, что тоже буду нянчиться с чайниками )))

[Колос]

Опиши по порядку, что должно быть в областях:

2-?

3-?

4-?

5-?

6-?

7-?

8-?

9-?

[DasTPID]

В конечном итоге я хочу получить рамку наподобие такой:

Соответственно, в областях 2-9 должны находиться "куски" приведенного изображения. Вопрос в том, что я не знаю точно ширину моего меню в пикселах, поэтому заране не могу заготовить все нужные куски...

[Колос]

Я бы делал так:

Ширина и высота рамки строго задана: например 30 пикселей как ты написал.

В областях 6,7,8,9 по рисунку. Обойтись одним и чтоб браузер отражал нельзя. Надо на каждый угол свой рисунок.

Области 2,3 и 4,5 так как ты написал - замостить рисунком высотой 1пкс и шириной 30пкс (для 2,3). Для этого надо сделать этот рисунок фоном ячейки с повторением только по вертикали:

....
<td id="oblast2" style="background-image:url(ris.jpg);background-repeat:repeat-y"></td>
....

Насчёт области 1 толком не понял. Но растягивать рисунок это почти всегда плохо.

[Elendor]

написал немного кода того как будет Edited January 11, 2009 by Elendor

[DasTPID]

СПАСИБО за код! Как сделать рамку я кажется понял

Но приведенный пример с div-ами у меня в IE6 отображается неправильно Кстати, где можно почитать про оформление с div поподробнее? А то у меня теория хромает пока, а гугль выдал кучу ссылок, но всё не тех .

По поводу как сделать зону 1 нашел в интернете пример похожий: sky.crimea.ua, там так же сделан верх и низ странички, попробую разобраться в его коде, и если что непонятно - спрошу. Я в общем-то для зоны 1 хочу добиться такого же эффекта: чтобы была фоновая картинка, поверх неё текст, и при изменении размеров броузера рисунок никуда не съезжал и таблица не портилась. Раньше я думал, что для этого надо рисунок растягивать, а здесь он вроде бы только одним углом зацеплен, а при изменении размера просто лишняя часть не отображается.

Всем еще раз СПАСИБО! Пошел учиться дальше