Gaist-Endruy
( off
)
(
08:08 01-09-2009
)
Высота CSS блока на практике определению не поддается (речь идет о «резиновой» верстке), да нам это и не нужно. А вот ширина блока - это наше всё, складывается она из ширины: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. В макете не будет border, все сделаем через padding и width - так проще и быстрее.
Gaist-Endruy
( off
)
(
08:09 01-09-2009
)
CSS макет сайта является «резиновым», то есть ширина его зависит от доступного пространства (размера окна браузера), поэтому width и padding определены в процентах. Проценты задают ширину относительно родительского элемента. Родительский элемент это или окно браузера (фактически, тэг ) или любой блочный элемент, в который вложен определяемый элемент (в макете несколько будут вложены в один родительский-блок).
Gaist-Endruy
( off
)
(
08:09 01-09-2009
)
Блоки созданы, с помощью CSS определены их свойства (padding, width). Необходимо правильно расположить их на странице. Это и есть CSS позиционирование. Если не описывать расположение блоков на странице, то они будут отображены браузером один под другим, согласно порядку их описания в XHTML коде страницы. Такое расположение называется нормальным потоком.
Gaist-Endruy
( off
)
(
08:10 01-09-2009
)
Существуют различные способы и техники. Мы будем использовать свойства position: absolute (абсолютное CSS позиционирование) и position: relative (относительное позиционирование). Далее необходимо определить смещение (в пикселях для жесткой верстки сайта или в процентах для «резиновой») блока на странице от верхней или нижней, левой или правой точки отсчета. Что является этой точкой отсчета?
Gaist-Endruy
( off
)
(
08:11 01-09-2009
)
Для position: relative точкой отсчета является положение блока в нормальном потоке. Т. е. - position: relative; top: 10%; left: 10%; - и блок сдвинется на 10% вниз и вправо относительно его нормального расположения. Если прописать относительное позиционирование и не задавать смещение, то блок будет расположен в нормальном потоке.
Gaist-Endruy
( off
)
(
08:11 01-09-2009
)
Для position: absolute точкой отсчета является точно определенный элемент; нормальный поток и расположение других элементов не играют роли. Этой точкой может быть или окно браузера или родительский блок, который является абсолютно или относительно позиционированным. Смещение также определяется пикселями или процентами свойств top, left, bottom, right.
Gaist-Endruy
( off
)
(
08:12 01-09-2009
)
Попробуем извлечь из этих, кажется, «несовместимых с жизнью» правил искры разумного - а именно, код макета сайта из трех колонок.
Gaist-Endruy
( off
)
(
08:12 01-09-2009
)
XHTML и CSS код макета
Прикрепленный файл .gif:
скачать
(25.6Kb)
Gaist-Endruy
( off
)
(
08:14 01-09-2009
)
Здесь и далее «куски» кода и пояснения к ним. Весь рассматриваемый в статье код вы можете скачать по ссылке.
[ред.
Gaist-Endruy
01-09-2009 в 08:15] Gaist-Endruy
( off
)
(
08:15 01-09-2009
)
Первым делом объявляем тип документа, иначе макет будет некорректно (в стиле Internet Explorer 5) отображаться в IE 6 и Opera. При правильном DOCTYPE проблем нет.
)