Лекция: Подвал ...

</div>

 


 

 

А теперь css код, который сформирует нужное нам визуальное представление:


#content {

float:left;

width:67%;

background-color:#CCC;

}

#sidebar {

margin-left:67%;

background-color:#FFC;

}

#header {

background-color:#FCF;

text-align:center;

}

#footer {

clear:both;

text-align:center;

background-color:#CFF;

}


Мы используем свойство float для того, чтобы задать положение блока content на странице и задаем ширину этого блока равной двум третям окна браузера. В соответствии с правилами CSS, последующее содержимое включенное в «плавающую модель», а в нашем случае это блок sidebar, будет «обтекать» блок content со стороны, противоположной направлению выравнивания, т.е. Справа.

Свойство float работает примерно как атрибут align, который применяется в HTML, но дает больше возможностей управления отображением элементов за счет использования полей, рамок и отступов.

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

И наконец, в блоке footer используется свойство clear для того, чтобы гарантировано обеспечить его отображение ниже любого элемента из «плавающей модели».

Правда такой вариант имеет недостаток. При наличии в блоке sidebar содержимого большего объема, чем в блоке content, «лишнее» содержимое перестает обтекать блок content и занимает всю ширину окна браузера.

Устранить недоразумение возможно, если подкорректировать значения левого отступа или левого поля элемента sidebar. Для этого мы используем свойство margin-left:67%.

 

еще рефераты
Еще работы по информатике