Вёрстка без "дивов" и таблиц.

• Начало.
• Ну а теперь подробнее.
• Сначала "шапка".
• Как я делю на две колонки.
• Меню.
• Ну и футер.

Начало.

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

html {
	background: url('html.bmp') no-repeat center top;
}
body {
	position: relative;
	background: url('body.bmp') repeat-y center top;
	width: 512px;
	margin:auto;
	margin-top: 120px;
	padding: 0;
	padding-left: 256px;
}
ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
}
address {
	background: gray;
	width: 736px;
	margin-left: -256px;
	padding: 16px;
}

Ну а теперь подробнее.

На данной странице применено сразу несколько хитроумных приёмов, все они очевидны, однако далеко не все о них знают. Обидно, досадно, ну ладно.

Сначала "шапка".

На многих сайтах (особенно часто у блогов) шапка состоит из одной картинки. Реализуют это чаще всего растягиванием дива на размер шапки и позиционированием оного по центру. Но зачем так делать если можно просто задать её фоном тэга HTML ? Правильно незачем. Именно за это в нашем CSS отвечают следующие строки:

html {
	background: url('html.bmp') no-repeat center top;
}
body {
	..............
	margin-top: 120px;
	..............
}

Первая строчка соответственно картинка по центру (в нашем случае ширина 768px и высота 120px) вторая строчка сдвигает "body" вниз чтоб он не залез на нашу шапку

Как я делю на две колонки.

Вот тут я предпочитаю приём с фоновым рисунком. Очень много есть способов разделения, но этот мне нравится больше потому что он прост как 3.1415926535........

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

body {
	background: url('body.bmp') repeat-y center top;
	..............
	width: 512px;
	margin:auto;
	..............
	padding-left: 256px;
}

Первая строчка соответственно картинка как и в прошлый раз, последняя отступ от (в нашем случае левого) края, ну и в центре две строчки (так как в моём случае фиксированная ширина 768px) задаётся ширина блока "body" за вычитом отступа, и задаётся "авто-маргин" для расположения по центру.

Меню.

С левой колонкой всё придельно просто, мы просто берём и позиционируем блок в угол нашего "body", и ограничиваем его ширину.

body {
	position: relative;
	..............
}
ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 256px;
}

Ну и футер.

Тут вообще всё просто, задаём ширину, и смещаем в сторону ровно на столько на сколько это необходимо. В нашем случае так.

address {
	background: gray;
	width: 736px;
	margin-left: -256px;
	padding: 16px;
}

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