Урок 13: Позиционирование блоков

Две основные модели позиционирования:

Абсолютное позиционирование (POSITION:ABSOLUTE)

Относительное позиционирование (POSITION:RELATIVE)

Абсолютное позиционирование (POSITION:ABSOLUTE)

Обычно для позиционирования применяют именно этот тип. В технологии CSS, свойство позиционирования обозначается как POSITION, а чтобы указать , что это позиционирование абсолютное, пишут значение ABSOLUTE. Затем используя ключевые слова top, right, bottom, left указывают необходимые координаты, которые отсчитываются от краев окна браузера.

Бокс с абсолютным позиционированием располагается по заданным координатам, а из того места, где он должен был бы быть, он удаляется.

Рассмотрим, обычный документ с одним изображением, и обтекающим его текстом.

А теперь, позиционируем изображение (с красной рамкой для наглядности), для чего создадим класс, и присвоим его изображению. Код класса, выглядит примерно так:

.smile{border: 1px solid red; position:absolute; top:100px; right:100px}

Чтобы применить класс к изображению, пишем в html <img class="smile"> .

Обычно указываются только две координаты, т.е. привязка идет к любому из углов документа.

Если необходимо зафиксировать блок, т.е. чтобы он не прокручивался вместе с основным содержимым, т.е. не скролился, то необходимо указать значение FIXED.

.smile{position:fixed; bottom:300px; left:100px}

Относительное позиционирование (POSITION:RELATIVE )

При относительном позиционировании, бокс смещается , но его прежнее место ничего не заполняет.

Координаты в отличие от абсолютного позиционирования, отсчитываются от прежнего положения блока.

Css код:

.smile{border:1px solid red; position:relative; top:200px; left:100px}

Урок 14: Плавающие блоки(свойство float)

С помощью плавающих блоков можно создавать различные эффекты и даже дизайн страниц.

Итак, Плавающие блоки в CSS определяются свойством float.

Свойства FLOAT

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения:

left - структурный блок перемещается влево. Остальное содержимое документа будет выводиться вдоль правой стороны блока, начиная с самого верха.

right - структурный блок перемещается вправо. Остальное содержимое документа выводится вдоль левой стороны блока, начиная с самого верха.

none - блок не перемещается (значение по умолчанию).

Ну вот например, как будут располагаться по умолчанию,три квадратных блока, со стороной в 200 пикселей.

html код :

<div class="box1">Первый блок</div>

<div class="box2">Второй блок</div>

<div class="box3">Третий блок</div>

CSS код :

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange}

По умолчанию каждый следующий блок, находится под предыдущим.

Используя свойство float можно сделать так, чтобы каждый блок всплывал влево (в верхний левый угол):

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

Вот как будет выглядеть, если блоки будут всплывать вправо (в правый верхний угол):

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

.box3 {width:200px; height:200px; border:1px solid red; background-color:orange; float:right}

Классический пример применения - это когда надо сделать чтобы текст выводился в колонках (как в газете). Пусть колонки будет три.

CSS код:

.column1 {float:left; width: 33%}

.column2 {float:left; width: 33%}

.column3 {float:left; width: 33%}

В html-коде просто заключим необходимый текст в соответствующие колонки, тегами DIV:

<div class="column1">

<p>There is one universal truth in website making: To make a websitet...</p>

</div>

<div class="column2">

<p> If you're like the vast majority of people thinking ...</p>

</div>

<div class="column3">

<p>There is one universal truth in website...</p>

</div>

Свойстве CLEAR - специфическое свойство, позволяющее определенным образом позиционировать плавающие блоки.

left - блок должен размещаться ниже всех левосторонних плавающих блоков.

right - блок должен размещаться ниже всех правосторонних плавающих блоков.

both - блок должен размещаться ниже всех плавающих блоков.

none - никаких ограничений на положение блока относительно перемещаемых объектов не накладывается.

Допустим имеется два плавающих влево блока(float:left;), которые обтекает текст.

Если заключить весь текст в блок, и придать ему свойство CLEAR:BOTH т.е. чтобы он размещался ниже всех плавающих блоков, можно избавиться от обтекания блоков текстом.

html-код

<div class="box1">Первый блок</div>

<div class="box2">Второй блок</div>

<div class="box3">

<p>There is one universal truth in website...</p>

</div>

CSS-часть

.box1 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box2 {width:200px; height:200px; border:1px solid red; background-color:orange; float:left}

.box3 {clear:both}

В блоках может находится что угодно(картинки, списки,текст и др.)