Цикл статей об основах блочной верстки сайта продолжается. Приветствую вас, друзья! Половина пути пройдена. Вы и так уже многое знаете. Так что вперед!

Продолжаем верстать самую Правильную веб-страницу! Здесь опять будет много кода. Однако же не устрашимся!

Открываем наш лист стилей CSS. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text.

Запишем далее в листе стилей CSS:

#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}
#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}
#text a {
color: #396;
}
#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}

В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в правиле ноль можно не писать, .8em обозначает тоже самое). С отступами понятно — верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста ни где попало, а с левой стороны.

Что такое float, или обтекание в верстке сайта

Слово float переводится как «обтекание«. Но тут есть одна фишка. Читаем: «обтекание — слева». Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее.

Для чего это нужно? Скопируйте (или наберите ручками) приведённые выше правила в свой лист стилей, сохраните файл и посмотрите, что получилось. Текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей значение right для float.

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

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

Поэтому мы выровняли его по обоим краям. Однако это не есть выравнивание по центру! Не путайте с правилом text-align: center; Это разные вещи.

Окей! Получилось очень даже хорошо.

Идем далее. Слово indent означает не что иное, как обычную «красную строку«. Размер её также указан в полтора размера шрифта.

Ну и, наконец, ссылочки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной dotted полоской в 1 пиксель толщиной.

А теперь давайте укажем правила для наших картинок. Запишем в листе стилей:

.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float:right;
}
.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}
.venzel {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;
}

Здесь ничего сложного нет. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них.

Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них кидаем блоки или картинки на страницу, а потом смотрим, куда все это оно сползло и чуток корректируем, добавляя где надо и убавляя, где не надо.

На первых порах так можно делать, но знайте, что для труЪ верстальщика это порочная практика. Просто пока об этом не заморачивайтесь, чтобы совсем не упасть духом, когда верстка «плывет».

Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана.

Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая — слева, и вензель тож слева.

И ещё одна вещь. Как видите, данные правила начинаются не с решётки # , а с точки. Это и есть признак того, что правило относится не к уникальному объекту id, а к классу .

Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом.

В следующий раз мы добавим на страницу список новых участников и блок новостей. А на сегодня все. Оставайтесь на связи!

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

Автор: Игорь Квентор
www.websovet.com