В нашем случае код, отвечающий за оформление каркаса (стиля), выглядит так:
Как мы видим, вышеприведённый код не "оформляется" ни открывающими, ни закрывающими тэгами. В
стилевых файлах - это ненужно. К слову сказать - код (рис.3) можно вставить и в "голову" странички, после
<head>, между <style type="text/css"> и </style>, но выглядеть это будет...Проще сделать привязку
(см.10 -11,рис.2).Все условные обозначения, используемые при оформлении контейнеров, могут использоваться в
различных сочетаниях.
Не лишним будет остановится на оформлении контейнеров странички. Логика,
примерно, следующая : если задаётся только высота контейнера (#head,#footer), то он будет во всю ширину странички - вертикальный;
если задаётся ширина контейнера (#left,#right) и его ориентация (float,margin-) относительно боковых сторон странички (#text) - то контейнер (-ры)
будут иметь горизонтальное расположение. Таким образом можно поделить вертикальный контейнер на три
горизонтальных. Но - это предел прямого деления. Что-бы получить четыре горизонтальных контейнера, необходимо
средний поделить на две (или - три) части по рассмотренному выше принципу. И так - далее...
нельзя поделить на части страничку - на части можно поделить только контейнер. Иначе браузер не понимает.
Особого внимания заслуживает контейнер "rasporka". Он служит своеобразной демпфирующей прослойкой между
контейнерами - "опираясь" на "footer" он всегда "прижимает" его к нижней части экрана монитора, пока на него воздействует
наиболее заполненный "верхний" контейнер. Не стоит что - либо помещать в контейнер "rasporka". В связи с его боковой
auto - ориентацией (margin-) он запросто может "влезть снизу" в наименее заполненый
вышерасположенный горизонтальный контейнер.
В данном коде оговаривается только ширина крайних
горизонтальных контейнеров. Это позволяет не думать о параметрах среднего. Использование css -
файла не исключает внутриконтейнерной стилевой коррекции. Просто в открывающий тэг (каким-бы он не был)
добавляется атрибут style="каким ты хочешь видеть стиль оформления данной части странички ".
При использовании кода не лишним будет убрать номера строк и комментарии помеченные значком //.
Не пытайтесь
сразу глубоко вникать в содержание кода, всему своё время. Так - строка 14 (рис.3) - имеет отношение к объектной модели
документа DOM и разбираться с нею сейчас - не совсем по теме. Но это не исключает возврата к ней на следующих
страничках.
дальше...
...вернуться