Отправляет email-рассылки с помощью сервиса Sendsay

Создание собственного сайта от А до Я.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Cекреты успешных идей для интернет-бизнеса" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Студия Мастера Монтажа

Статистика

2.025 подписчиков
0 за неделю
←   Все выпуски   →

Создание собственного сайта от А до Я. Урок 20 - Верстка колонок на CSS+DIV


Урок 20 - Верстка колонок на CSS+DIV

Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.

От Автора.

Добрый день уважаемые гуру веб-кодинга, а также те кто еще только учиться. Хочу возобновить уроки по созданию и верстке сайтов, по возможности восстановить прошлый уровень выпусков по срокам. За время отсутствия выпусков я начал и довольно успешно изучил технологии WEB 2.0, в частности DIV, CSS, AJAX. Полученные знания применил на своем проекте, в последствии получило положительные оценки пользователей.

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

Web Coder, именно на нее ориентируясь, будут написаны уроки. Поэтому все кто желает понять и свободно владеть HTML , качаем по этой ссылке (600 кб).

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

Если ваша страница не разбита на колонки, то все решается очень просто - в такой странице можно даже блоки не использовать, ограничившись определением стилей для тега P и, возможно, различных заголовков - H1, H2 и так далее. Случай этот очень прост и рассматривать его мы не будем.

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

На этом этапе нам надо решить будем ли мы делать "резиновый" или фиксированный дизайн. Фиксированная верстка в большинстве случаев намного проще резиновой, и так как мы не ищем легких путей, то попробуем создать именно "резиновую" страницу. Логотип и футер не содержат никаких трюков, а вот с содержимым придется повозиться.

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

Есть два основных подхода к CSS-верстке: плавающие блоки и абсолютное позиционирование. Оба способа имеют свои преимущества и недостатки.

Основной недостаток абсолютного позиционирования заключается в том, что абсолютно-позиционированные блоки изымаются браузером из нормального потока и другие элементы страницы их "не видят". В частности, если вдруг абсолютно-позиционированная колонка окажется слишком длинной, то она просто наложится на футер - согласитесь, что это некрасиво. Еще один недостаток заключается в том, что вам надо точно знать где именно колонка будет располагаться (иначе вы ее не сможете позиционировать), и, следовательно, вам необходимо знать размер логотипа. Преимуществом же этого подхода является возможность точно (с точностью до пикселя!) разместить на экране данные, кроме того, вы сможете в коде страницы сначала описать основные данные, а потом уже навигацию - это во-первых заставит основное содержимое страницы вывестись в первую очередь, а во-вторых повысит "находимость" этого содержимого поисковиками.

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

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

Итак, начнем. Прежде всего опишем логотип:

<div id="logo">Логотип</div>

а в таблицу стилей добавим описание этого блока:

div#logo {height: 50px; font-size: 36px; padding: 5px 15px; background: #F5F5F5;}

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

Теперь описываем содержимое страницы:

<div id="center">Основной контент</div>
<div id="rcol">Правая колонка</div>
<div id="lcol">Левая колонка</div>

Обратите внимание на порядок следования данных в коде - как известно, чем ближе к началу страницы находятся данные, тем более важными их считает поисковик и тем раньше браузер их показывает посетителю. Разумеется, правую и левую колонки вполне можно поменять местами...

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

div#lcol {position: absolute; top: 60px; left: 0; width: 200px; background: aqua;}
div#rcol {position: absolute; top: 60px; right: 0; width: 200px; background: aqua;}
div#center {margin: 0 200px; background: yellow;}

Обратите внимание - по стандарту размер блока (width и height) описывает размер контента, а поля, рамки и отступы в эту величину не входят. Поэтому описывая положение боковых колонок мы указываем top: 60px - высота логотипа (50px) и два отступа по 5px. Центральная колонка остается в нормальном потоке и ее верхняя часть прижмется к нижней границе блока с логотипом автоматически, а боковые поля (margin) размером в 200 пикселов как раз вместят в себя наши абсолютно позиционированные боковые колонки.

Теперь нам осталось дописать футер:

<div id="footer">Футер</div>
и, соответственно, div#footer {height: 50px; background: #CCC; font-size: 36px; text-align: center;}
в таблице стилей.

В принципе, на этом создание страницы можно считать законченным. Однако если вдруг центральная колонка окажется короче боковой, то боковая колонка перекроет кусок футера. Кроме того, если вдруг по каким-то причинам вы не сможете узнать точную высоту логотипа (например, в нем показывается какая-то реклама с "изменяемой геометрией"), то возникнет сложность с позиционированием верха боковых колонок.

Вопрос с определением верха колонок решается очень легко: достаточно заключить весь контент в еще один блок. А для того чтобы боковые колонки позиционировались не относительно страницы, а относительно этого блока надо указать для него атрибут position: relative.

<div id="wrapper">
<div id="center">Основной контент</div>
<div id="rcol">Правая колонка</div>
<div id="lcol">Левая колонка</div>
</div>

и в таблице стилей

div#wrapper {position: relative;}
div#lcol {position: absolute; top: 0; left: 0; width: 200px; background: aqua;}
div#rcol {position: absolute; top: 0; right: 0; width: 200px; background: aqua;}

После такой модификации вы без проблем сможете вставлять дополнительные блоки между логотипом и контентом (скажем, баннеры и "советы дня") или менять размер логотипа - блок wrapper автоматически отодвинется, а вместе с ним и все колонки.

Размер блока (width и height) по стандарту описывает размер контента и не включает рамки, поля и отступы. IE5 и IE6 в quirks режиме считают по-другому и учитывают в размере блока все, что к нему относится. Для обхода этой проблемы используется так называемый "метод Целика". Например, для создания блока шириной в 300 пикселов (контент!) с рамкой и отступами в 10 пикселов надо написать:

#box300 {
border: 5px solid;
margin: 10px;
width: 330px;
voice-family: ""}"";
voice-family: inherit;
width: 300px;
}
html>body #box300 {
width: 300px;
}

Для того чтобы абсолютно позиционированные блоки отсчитывали свое положение относительно контейнера, а не страницы, необходимо чтобы контейнер был позиционирован абсолютно или относительно. В частности, относительное позиционирование (position: relative) с нулевым смещением оставляет контейнер в нормальном потоке и позволяет жестко позиционировать вложенные блоки.

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

Если внутри блока с установленной шириной встречается длинное слово, превышающее размер блока (например, длинный URL), то по стандарту размер блока должен остаться таким, какой указан, а его длинное содержимое просто будет выступать за пределы блока. Однако IE в этом случае рассматривает блок как таблицу и растягивает его, стараясь вместить все содержимое и не обращая внимания на указанный вами размер. То же самое относится и к высоте блока - если вы смотрите эту страницу через IE, то в предыдущем примере желтый блок по высоте будет такой же как и голубой, хотя у него указано height: 50px. Это может очень сильно сбить дизайн, поэтому для данных, которые могут меняться рекомендуется установить свойство overflow контейнера в hidden или auto - в первом случае выступающие части обрежутся, а во втором - в нужных местах добавятся полосы прокрутки (правда, они в IE тоже реализованы неудачно - их размер не учитывается при рендеринге блока в результате чего полосы прокрутки рисуются поверх содержимого блока и перекрывают его).

Обсудить 19 урок. Верстка колонок DIV+CSS

Связь с Автором

Свои вопросы, пожелания, замечания можете задать:
С уважением, Ленар Минныханович.
Создают с нами:

  http://yurasite.narod.ru

  http://brigadir25.narod.ru

  http://u4ilka.megaobzor.com

  http://inyi.narod.ru

  http://electro20.narod.ru

  http://all5mb.narod.ru

  http://tolyattinec.narod.ru

  http://xskernel.narod.ru

  http://comingin.narod.ru

  www.mobilepincod.narod.ru

  http://yur-pechnik.narod.ru

  http://timouru.narod.ru

  http://ra4uik.narod.ru

  http://polyna3.narod.ru

  vesmirvkarmane.narod.ru

  http://vsuprunenko.narod.ru

  http://kir242.narod.ru

  http://ofiska.narod.ru

  http://muxaul.boom.ru

  http://sarzh-1.narod.ru

  http://flovers-ch.narod.ru

  kanashkevich.narod.ru

  http://bsu-305.by.ru

  http://www.ellesee.narod.ru

  supertreining.narod.ru

  spiritdrago.narod.ru

  http://piterk2006.narod.ru

  ooo-sp1c.narod.ru

  lengdon1602.narod.ru

  brodiachie-artisty.narod.ru

  http://fanrocks.narod.ru

  www.Spellen.boom.ru

  www.inta-church.narod.ru

  www.extremetourism.narod.ru

  www.irsad.narod.ru


В этой колонке, будут ссылки на ваши проекты. Которые создаете по моим урокам. Достаточно выслать на softsmm@mail.ru адрес вашего ресурса. Внимание!!! Принимаются только ресурсы, которые создаются по моими урокам, содержание, наполнение значение не имеет.
Вся информация по рассылке доступна здесь. Вы можете скачать все выпуски рассылки.
В избранное