№14 Создание текучих макетов при помощи css

Текучие, или автоматически изменяющиеся, макеты - это макеты, которые автоматически изменяют свои размеры для соответствия размерам окна браузера посетителя.

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

Для создания эффекта текучести нужно очень аккуратно присвоить параметру width определенных ячеек таблиц символ звездочки (*), которое в языке HTML служит сокращением слова любой. Использование этой общей ширины, вместо фиксированного значения в пикселах, заставляет браузер вычислять ширину области дизайна, учитывая ширину окна браузера. Отсюда и текучесть.

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td width="200">Logo</td>

<td width="*">Links</td>

</tr>

</table>

№15 Способы позиционирования элементов документа (свойства position и float).

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

position: absolute | fixed | relative | static | inherit

Значения

absolute

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

fixed

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

relative

Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static

Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

inherit

Наследует значение родителя.

Описание

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Синтаксис

float: left | right | none | inherit

Значения

left

Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.

right

Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

none

Обтекание элемента не задается.

inherit

Наследует значение родителя.