Блочная верстка | Урок 6

Дата: 17.12.2007 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , ,

Продолжаем верстать самую Правильную веб-страницу! Здесь опять будет много кода. Однако же не утрашимся! Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом 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 переводится как “обтекание“. Но тут есть одна фишка. Читаем: “обтекание - слева”. Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left — сам объект слева, а течёт всё правее. И наоборот, right — объект справа, а течёт всё левее.

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

В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justify как раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой и сия норма исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно — весь правый край текста становится будто рваный. Поэтому мы выровняли его по обоим краям (это не выравнивание по центру!). Получилось хAрAшO!

Слово 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, а к class.

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

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

Вебсовет

1 2 3 4 5 6 7 8 9

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (2) на запись “Блочная верстка | Урок 6”

  1. Max 27.10.2008 21:55

    Здравствуйте. На разрешение 1024 х 768 весь тект прилипает к левой стороне окна браузера, а не выравнивется по левому краю хедера. Код перепроверял много раз, набирал руками, копировал и вставлял, эффект один и тот же в любом браузере.
    Подскажите, пожалуйста, что не так. Тоже было и с бэкграундом навигации, сделал так:
    #nav {
    width: 760px;
    margin: 0 auto;
    background: url(nav-bg.jpg) repeat-x;
    color: #f00;
    font-size: 10pt;
    font-weight: bold;
    line-height: 1.8em;
    text-align: center;
    }
    и все стало нормально.

  2. Игорь Квентор 27.10.2008 23:47

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

Трэкбеки

Оставить комментарий