Time to site

Здесь можно заказать сайт и продвижение в сети

телефоны: +3 8 (095) 818 40 61 или +3 8 (063) 135 02 90

Вы здесь: Главная / Статьи / Создание сайта / Позиционирование в CSS

Позиционирование в CSS

Позиционирование в CSS

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

Позиционирование в CSS

Иногда, для более красивого оформления сайта нам требуется выставить, к примеру, блоки в один ряд. Но после создания этих блоков – они находятся друг под другом. Как это исправить? Читайте в этой статье.

Обтекание в HTML/CSS

Видели ли Вы когда-нибудь сайт, состоящий из трех колонок? Это считается стандартным расположением блоков на сайте. Как сделать такое позиционирование элементов, чтобы три колонки находились друг после друга, а не друг под другом? Для этого существует селектор в CSS под названием float, с английского – обтекание. Это очень полезная, и в то же время сложная штука! Она имеет 3 значения: “left”, “right”, и “none”. В этой статье я вам расскажу, как использовать обтекание для позиционирования блоков.
Значение “left” – позволяет элементу обтекаться слева. “Right” – справа соответственно.
Заметьте, что “left” или “right” – это не само обтекание, а разрешение обтекаться. Для того, чтобы отменить обтекание – нужно прописать значение “none”. Оно заданно по умолчанию во всех браузерах.

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

Создаем три «div» с классом «block1», «block2», «block3». Задаем им цвет, ширину, высоту, и делаем один общий «div» с классом «all», и также задаем ему размеры и заливку. В исходном коде должно получиться примерно так:

<body>
<div class="all">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
</body>

Далее переходим к CSS. В каскадных таблицах должно получиться так:

.all {margin: auto;
background-color:#0F9;
width: 1000px;
min-height: 100px;}
block1 {width: 23%;
height: 200px;
background-color: #60F;}
.block2 {width: 23%;
height: 200px;
background-color: #60F;}
.block3 {width: 23%;
height: 200px;
background-color: #60F;}

Сейчас у нас должен получиться фон и один большой блок. Если быть более точным, то большой блок – это 3 склеенных “div”. Прописываем им «float: left;». Теперь можем видеть, что у нас стал один большой блок, только по горизонтали, и наш фон поднялся. Прописываем каждому из них “margin-left:10px;” и “margin-top: 10px;”. Если сохранить, и обновить страницу, то можно увидеть, что появились разделения между блоками. Вот так и происходит позиционирование.
По сути – ячейки и строки не сливаются. Просто ячейка или столбец, к которому мы присваиваем этот атрибут становятся по размеру как два или более рядом находящиеся элементы, в зависимости от того, какое мы зададим значение. Например – у нас есть 10 строк. Первой мы задаём “rowspan=’2’”. Выходит, первые две строки объединились? Нет! Первая стала по размеру как две. Соответственно, двойная строка вытеснила последнюю. Для удобства её удаляют.

Проблемы с фоном

Что же делать с фоном? В исходном коде, после “div”, прописываем ещё один с классом “clear”:
<div class=”clear”></div>. В CSS прописываем отключение обтекания селектором “clear:both”. Смотрим: все стало на свои места.

Немного про clear

“Clear” – это селектор, который отменяет обтекание. Он имеет значения “left”, “right”, “none”, “both”, “inherit”.
Left/right – Отмена обтекания с левого/правого края элемента. Все другие элементы на этой стороне будут опущены вниз, и будут располагаться под текущим элементом.
None – отменяет полностью селектор “clear”, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

Both – отмена обтекания с левого и правого края элемента.
Inherit – это применение значения, заданного в родительском элементе.

 

Прочитано 284 раз Последнее изменение Среда, 12 Февраль 2014 14:07
Оцените материал
(1 Голосовать)
Другие материалы в этой категории: « Таблицы в HTML. Часть 2 Денвер и базы данных »

Комментарии  

+1 # Евгений 03.02.2014 09:11
Отличная статья!!! Пригодилась 8)
Ответить | Ответить с цитатой | Цитировать
0 # Дмитрий 15.02.2014 08:51
Довольно таки интересно!!! Спасибо автору :P
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

Мы в социальных сетях

Связаться с нами

Веб студия Time To Site
г. Донецк, бул. Шевченко, д. 133
Телефон: +3 (8095) 818-40-61
Мы работаем с 10:00 до 18:00

QR - код