|
Выравниваем блок (класс) по центру. Только в режиме strict (см. Doctype-декларацию). В стилях нужно прописать следующее {margin-left:auto; margin-right:auto;} Еще один вариант: предположим нам надо выровнять блок шириной 200рх. Можно это сделать прописав в стилях: {position: absolute; left: 50%; margin-left:-100px;}
Позиционируем один блок по отношению к другому. В body прописываем стандартное <div id="block1"> <div id="block2">текст</div> </div> В стилях пишем следующее: #block1 {position: relative;} #block2 {position: absolute;} (прописать координаты) Таким образом, мы сообщаем браузеру, что все координаты второго блока должны отсчитываться от первого. Точка второго блока с координатами {0, 0} совпадет с верхней левой точкой первого блока.
3-колоночная верстка с резиновым центром. Создаем три колонки, причем левую и правую с фиксированными значениями. Причем важно, чтобы первой шла левая колонка, второй - правая, последней - резиновая колонка. Итак, в body прописываем <div id="left"></div> <div id="right"></div> <div id="main"></div> В head прописываем позиционирование блоков: #left {width: 200px; float: left;} #right {width: 200px; float: right;} #main {margin-left: 210px; margin-right: 210px;}
Полностью резиновая верстка. #t1 {widght: 33%; float:left;} #t2 {widght: 33%; float:left;} #t3 {widght: 33%; float:left;} Получим три резиновые колонки, занимающие 99% ширины страницы. Оставшийся процент зальем цветом, сходным с цветом колонки. Для более-менее адекватного восприятия браузерами страницы, желательно по ширине всегда оставлять пару пикселей или процентов не занятыми блоками.
Выравниваем колонки. Чтобы выровнять плавающие колонки по высоте иногда достаточно все колонки взять в один большой блок (<div>), а внутрь этого блока, в конце, вставить еще один <div> <div id="clear"> </div> В стилях пропишем следующие: #clear {clear: left;} Таким образом все плавающие левые колонки выровняются.
|