Наш макет
Задача
Наша задача — создание макета из трех колонок средствами CSS. Этот макет может послужить основой информационного сайта с «шапкой», правой и левой колонками для меню и дополнительной информации, с центральным блоком текста и «подвалом» для копирайтов, контактов и прочего. Типичный для контент-проекта макет.
Несомненно, данный макет нельзя назвать чудом дизайнерской мысли, но вы всегда сможете привести этот шаблон в «божеский вид», подобрав правильные шрифты, их размер, добавив красивый и правильный логотип. Не составит труда самостоятельное усложнение макета, добавление новых CSS блоков.
Используемые технологии и поддержка браузерами
Макет сайта будет реализован полностью на CSS, планируется «эпизодическое» использование XHTML и JavaScript.
Используемая CSS верстка поддерживается браузером Internet Explorer 6, актуальными версиями Mozilla и Opera (на заметку: Web browser standards support). Путем некоторых ухищрений, макет будет работать и в Internet Explorer 5. Этого должно быть достаточно. Наш CSS также должен прийтись по душе текстовым браузерам и прочим экзотическим устройствам.
Работоспособность кода в IE 4, Netscape 4 и более старых браузерах не проверялась, но, уверен, будут проблемы. Впрочем, это некритично, посмотрите статистику популярности браузеров от hotlog, spylog и liveintenet.
Достоинства и недостатки рассматриваемого способа CSS верстки сайта
У макета есть серьезные достоинства и довольно серьезные недостатки. Необходимо решить, что важнее для вашего сайта и его посетителей.
Недостатки:
- Не работает в Internet Explorer 4, Netscape Navigator 4 и более старых браузерах.
- CSS верстка (создание блоков и их позиционирование) поддерживается современными браузерами не идеально, поэтому страницу необходимо тестировать во всех браузерах, используемых вашей аудиторией, на предмет мелких, но неприятных различий в отображении страницы.
- Муки с вертикальным позиционированием и определением высоты элементов в CSS. Это не так важно, если только вы не любитель подгонки всех элементов с точностью до пикселя.
- Для нашего макета необходимо, чтобы колонка с основным содержимым имела большую высоту, чем боковые колонки. В противном случае страница будет выглядеть неопрятно. К чести сказать, это требование характерно для большинства сайтов с вертикальным дизайном. Если страницы пишутся вручную (а не генерируются скриптами), то место можно «добить» переносами строк.
- Сложно переучиваться с табличной верстки. Поначалу от marginов и paddingов будет болеть голова :)
Достоинства:
- Освоив CSS верстку, легко разбираться в коде, изменять стили. При продуманном расположении CSS блоков незначительные изменения дизайна также не составят труда — для этого достаточно отредактировать файл с CSS.
- Текстовым браузерам и прочим ограниченным устройствам вывода информации должен понравиться наш макет — без стилей он представляет собой простой текст в одну колонку с минимальным количеством XHTML элементов оформления.
- Без CSS стилей (т. е. чистый XHTML) макет — это заголовок страницы в самом верху и следующий за заголовком основной текст. «Требуха» (ссылки, копирайты, навигация, новости — все то, НЕ ради чего пользователь пришел на страницу) ждет своего часа в самом низу. Такое расположение информации благотворно скажется на отношении к сайту простых устройств вывода информации и, самое главное, поисковых роботов — они любят, когда на странице есть текст, а не бесконечные табличные теги.
- Быстрое отображение браузерами. В случае больших страниц или медленного соединения посетитель может начать читать основной текст, пока загружаются боковые меню и пр.
- «Резиновая» верстка — ширина блоков макета зависит от размера окна браузера, таким образом, не пропадет полезное экранное пространство.
- Легкая реализация для этого CSS макета версии страницы для печати.
- Чистый XHTML код и дизайн средствами CSS, а не таблиц — это «круто» и остро модно :).
Пожалуй, достоинства перевешивают. Итак, если ваш сайт не посвящен Windows 3.11 и соответствующей аудитории, если вы готовы освоить блочную модель CSS и не намерены добавлять к макету сложные элементы с нестандартным расположением, можно читать дальше.
Немного теории CSS верстки сайтов (создание и позиционирование CSS блоков)
Подробно излагать теорию нет ни желания, ни возможности. Тема эта сложная и обширная. Постараюсь «отделаться» ссылками и коротко изложить то, что непосредственно будет использоваться в макете.
Итак, ссылки:
- www.w3.org/TR/REC-CSS2/box.html — официальная спецификация CSS блоков. Обратите внимание на параметры блока — padding, margin, border, width — то, из чего складывается занимаемое блоком пространство. Страница только для настоящих самураев.
- www.w3.org/TR/REC-CSS2/visuren.html — официальное описание CSS позиционирования (расположения на странице) блоков. Документ также предназначен исключительно для людей несгибаемой воли. Обратите внимание на «positioning scheme», «Normal flow», «Relative positioning» и «Absolute positioning» — все это понадобится нам для макета.
- www.webmascon.com/topics/designdetails/19a.asp — «философская» статья о CSS верстке, есть общая информация и полезные ссылки.
- www.webreference.com/html/tutorial9/1.html — подробная «обучалка» по CSS блокам.
- Примеры CSS макетов вместе с кодом:
www.thenoodleincident.com/tutorials/box_lesson/boxes.html
www.glish.com/css/
www.bluerobot.com/web/layouts/ - О CSS позиционировании на русском. Замечательный ресурс, множество практических рецептов на каждый день, на каждый сайт:
www.htmlbook.ru/content/181.html
www.htmlbook.ru/content/s28.html - Также советую купить книгу или скачать электронный вариант (где и есть ли вообще, не знаю) «Веб-мастеринг средствами CSS» Михаила Дубакова. Пригодится часть 2, главы 8 и 9.
Теперь немного от себя. Блок — это прямоугольный элемент веб-страницы, который задается с помощью блочных (например, <div> или <p>) элементов (по-басурмански, тэгов) XHTML. Блок занимает некоторое пространство и заканчивается переводом строки, два <div> элемента будут расположены на странице один под другим, потому что это блочные элементы. Два элемента <i> не будут, т. к. это строчные элементы.
C помощью CSS можно определять параметры блоков — внешние границы (margin), рамки (border), внутренние отступы до содержимого (padding) и, собственно, ширину содержимого (width). Содержимым CSS блока может являться текст, картинки, вложенные блоки и объекты… Свойство background-color определяет фоновой цвет (заливку) блока, при этом поле margin всегда прозрачно. Описание данных свойств и есть создание CSS блока.
На сайте www.ilovejackdaniels.com есть полезная памятка по CSS, откуда я позволил себе вырезать схему CSS блока, не нарушения копирайтов ради, но для пущего удобства. И да простит меня ilovejackdaniels.com, коему и принадлежат все мыслимые и немыслимые права на данное изображение:
Высота CSS блока на практике определению не поддается (речь идет о «резиновой» верстке), да нам это и не нужно. А вот ширина блока — это наше всё, складывается она из ширины: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. В макете не будет border, все сделаем через padding и width — так проще и быстрее.
CSS макет сайта является «резиновым», то есть ширина его зависит от доступного пространства (размера окна браузера), поэтому width и padding определены в процентах. Проценты задают ширину относительно родительского элемента. Родительский элемент это или окно браузера (фактически, тэг <body>) или любой блочный элемент, в который вложен определяемый элемент (в макете несколько <div> будут вложены в один родительский <div>-блок).
Блоки созданы, с помощью CSS определены их свойства (padding, width). Необходимо правильно расположить их на странице. Это и есть CSS позиционирование. Если не описывать расположение блоков на странице, то они будут отображены браузером один под другим, согласно порядку их описания в XHTML коде страницы. Такое расположение называется нормальным потоком.
Существуют различные способы и техники. Мы будем использовать свойства position: absolute (абсолютное CSS позиционирование) и position: relative (относительное позиционирование). Далее необходимо определить смещение (в пикселях для жесткой верстки сайта или в процентах для «резиновой») блока на странице от верхней или нижней, левой или правой точки отсчета. Что является этой точкой отсчета?
Для position: relative точкой отсчета является положение блока в нормальном потоке. Т. е. — position: relative; top: 10%; left: 10%; — и блок сдвинется на 10% вниз и вправо относительно его нормального расположения. Если прописать относительное позиционирование и не задавать смещение, то блок будет расположен в нормальном потоке.
Для position: absolute точкой отсчета является точно определенный элемент; нормальный поток и расположение других элементов не играют роли. Этой точкой может быть или окно браузера или родительский блок, который является абсолютно или относительно позиционированным. Смещение также определяется пикселями или процентами свойств top, left, bottom, right.
Попробуем извлечь из этих, кажется, «несовместимых с жизнью» правил искры разумного — а именно, код макета сайта из трех колонок.
XHTML и CSS код макета
Здесь и далее «куски» кода и пояснения к ним. Весь рассматриваемый в статье код вы можете скачать по ссылке.
XHTML код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS верстка сайта: макет в три колонки</title>
<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />
<script language="javascript" type="text/javascript">
//<![CDATA[
if (navigator.userAgent.indexOf(IE 5)!=-1)
document.write(<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />);
//]]>
</script>
</head>
<body>
<div id="header"><p>CSS верстка сайта: макет в три колонки</p></div>
<div id="main">
<div id="content">
<p>Информация, как принято считать, транспонирует из ряда вон выходящий мир...</p>
<p>Жизнь, пренебрегая деталями, фокусирует примитивный интеллект...</p>
<p>Напряжение, следовательно, непредсказуемо...</p>
<p>Представление нетривиально. Созерцание решительно фокусирует постсовременный постмодернизм...</p>
<p>Представление амбивалентно. Современная ситуация рефлектирует себя через принцип восприятия...</p>
<p>Смысл жизни решительно творит объект деятельности. Жизнь натурально означает мир...</p>
</div>
<div id="leftmenu">
<p><strong>Навигация</strong></p>
<p><a href="#">Раздел 1</a><br />
<a href="#">Раздел 2</a><br />
<a href="#">Раздел 3</a><br />
<a href="#">Раздел 4</a><br />
<a href="#">Раздел 5</a><br />
<a href="#">Раздел 6</a><br />
<a href="#">Раздел 7</a></p>
<p>Реальность представляет принцип восприятия. Интеллект не так уж очевиден...</p>
</div>
<div id="rightmenu">
<p><strong>Наши новости</strong></p>
<p>Боль методологически фокусирует закон внешнего мира...</p>
<p>Согласно мнению известных философов современная ситуация...</p>
</div>
<div id="footer"><p>© 2005 Все тексты любезно предоставлены Яндексом®:
<a href="http://yandex.ru/vesna.html">http://yandex.ru/vesna.html</a>. </p>
</div>
</div>
</body>
</html>Первым делом объявляем тип документа, иначе макет будет некорректно (в стиле Internet Explorer 5) отображаться в IE 6 и Opera. При правильном DOCTYPE проблем нет.
Тэгом <link> к странице подгружаются CSS стили из внешних файлов. Общий стиль style.css лежит в корне сайта (как правило, это папка /public_html) и предназначен для компьютерных браузеров (media="screen"). Стиль print.css будет использоваться для печати, об этом чуть ниже. Далее с помощью JavaScript определяем браузер пользователя и, если это Internet Explorer 5, ему отдается CSS стиль из файла ie5.css.
Первым следует div-блок header, предназначенный для заголовка страницы. В служебном блоке main нет текста, но в него вложено 4 блока: content для основного текста страницы, leftmenu и rightmenu для левого и правого меню соответственно и блок footer для «подвала» макета.
Все блоки лишь определены в XHTML коде, за их свойства и расположение отвечает CSS.
Общий CSS стиль
body {margin: 0px;padding: 0px;background-color: #f0f0f0;}Первым делом определимся со стилем <body> (т. е. окна браузера) — убираем внешние и внутренние отступы, добавляем фоновый цвет (#f0f0f0 — светло-серый).
#header {width: 98%;margin: 0px;padding: 1%;background-color: orange;}Для блока заголовка удалены внешние отступы (margin: 0px;), выбрана оранжевая заливка и ширина в 100% родительского элемента (им является <body>). 100% складывается из 98% ширины содержимого блока и по 1% для padding-left и padding-right. Сокращенная запись padding: 1%; задает отступ со всех четырех сторон (top, left, bottom, right).
Блок будет располагаться в нормальном потоке, что нас пока устраивает, поэтому в позиционировании нет необходимости.
#main {position: relative;width: 100%;margin: 0px;padding: 0px;background-color: #ccc;overflow: hidden;}Служебный блок main является контейнером остальных блоков с содержимым. У него нет границ и отступов, а width: 100% — следовательно, ширина main равна ширине окна браузера. В блоке не будет текста, но он очень важен для нашего макета. Во-первых, для абсолютного позиционирования CSS блоков правого и левого меню, во-вторых, для создания серого (#ccc) фона меню на всю высоту страницы.
Как упоминалось, position: relative означает смещение блока относительно его расположения в нормальном потоке. Но раз не задана величина смещения, блок будет расположен аналогично нормальному потоку CSS. Объявление position: relative; необходимо для абсолютного позиционирования блоков боковых меню. Как вы помните, абсолютное позиционирование в CSS отсчитывается от окна браузера или родительского блока, который является абсолютно или относительно позиционированным.
Для main задан серый фон. Сделано это для полного закрашивания блоков боковых меню. В CSS, судя по всему, невозможно задать высоту (height) блока в процентах от окна браузера, поэтому высота определяется в зависимости от объема содержимого. То есть боковые колонки меню будут иметь разную высоту, и задавать фон для них не имеет смысла. Поэтому мы заливаем фоном main. Далее зальем другим цветом блок содержимого и «подвал» макета, а колонки с прозрачным фоном визуально будут одинаковой высоты. Дешево и сердито.
Свойство overflow: hidden; необходимо, чтобы убрать мелкий баг IE6. Internet Explorer 6 под управлением Windows XP с экранной XP темой (в случае классической темы Windows все нормально) считает, что страница не помещается полностью в окно браузера и добавляет полоску горизонтальной прокрутки. Прокручивается всего 1–2 пикселя, видимо XP-тема увеличивает ширину элементов интерфейса браузера, но он (браузер) этого понять не в состоянии…
Так или иначе, overflow: hidden; указывает, что содержимое, которое выходит за границы контейнера (жизненный пример — очень длинное слово в узком CSS блоке), обрезается и пользователю не предоставляется возможности (полос прокрутки, например) это содержимое просмотреть. В нашем случае контейнером является блок main, шириной в 100% окна браузера, а содержимым — вложенные блоки.
#content {width: 58%;margin: 0px 20% 0px 20%;padding: 1%;background-color: #f0f0f0;}#footer {width: 58%;margin: 0px 20% 0px 20%;padding: 1%;background-color: orange;}CSS блоки основного содержимого и «подвала». Светло-серый фон для удобства чтения — белый фон и черный шрифт слишком контрастны и могут утомлять глаза. Для footer используется оранжевый. В остальном CSS описание блоков одинаковое.
Оба занимают всю ширину страницы. Ширина содержимого 58%. Внешние отступы (используется сокращенная запись в формате — margin: top left bottom right;) 20% слева и 20% справа. Плюс внутренняя отбивка содержимого от рамки блока в 1% сверху, слева, справа и снизу. Считаем горизонтальный размер CSS блока слева направо: 20% + 1% + 58% + 1% + 20% = 100%.
Таким образом, ширина footer и content составляет 100% от родительского блока main, который в свою очередь занимает 100% от body. Нюанс — внешние отступы margin составляют по 20% с каждой стороны, внешние отступы блока прозрачны, т. е. цветом не заливаются. CSS блоки content и footer занимают всю ширину окна и пока не совсем понятно, где взять место для боковых меню.
#leftmenu {position: absolute;top: 0px;left: 0px;width: 18%;margin: 0px;padding: 1%;}#rightmenu {position: absolute;top: 0px;right: 0px;width: 18%;margin: 0px;padding: 1%;}Ответ в position: absolute. Для абсолютного позиционирования не имеют значения нормальный поток и другие CSS блоки. Необходима точка отсчета, величина смещения по вертикали и горизонтали и ширина блока. Точкой отсчета может быть окно браузера, абсолютно или относительно позиционированный родительский CSS блок. Теперь ясно, зачем для блока main мы использовали position: relative и нулевое смещение.
Блок leftmenu (левая навигационная панель) позиционируется от CSS блока main, смещение сверху и слева — по 0 пикселей. Для rightmenu то же смещение, но сверху и справа. Ширина обоих блоков — по 20% (1% padding-left + 18% width + 1% padding-right) от родительского main. Фактически, leftmenu и rightmenu налагаются на блоки content и footer — точнее, на их прозрачные внешние границы margin!
Высота боковых меню зависит от содержимого. Меню не имеют фонового цвета, поэтому фоном для них служит серая заливка блока main. Marginы у content и footer прозрачны. Благодаря этому визуально боковые меню имеют одинаковую высоту и залиты серым цветом.
#content p, #leftmenu p, #rightmenu p {margin-top: 0px;}#header p, #footer p {margin-top: 0px;margin-bottom: 0px;}Последние штрихи. Внутри блоков информация разбивается на абзацы тегом <p>. <p> — блочный элемент, у которого есть свои внешние поля. Internet Explorer 6 совмещает margin <p> и padding наших CSS блоков. А Opera и Mozilla их суммируют, в результате получается слишком большая «отбивка» текста сверху и снизу от границ блока. Этот код убирает вертикальные внешние отступы для элементов <p>, вложенных в CSS блоки макета.
CSS стиль для Internet Explorer 5
Наш макет без проблем отображается в Internet Explorer 6 и в последних версиях Mozilla и Opera. Однако у Internet Explorer 5 свой взгляд на CSS:
По данным самых популярных «считалок» Рунета — spylog, hotlog и liveintenet — Internet Explorer 5 в ходу примерно у 18% пользователей, поэтому отказаться от поддержки это браузера, к сожалению, нельзя.
Решение очевидно — для неправильного браузера делаем неправильный CSS и подключаем этот стиль только для 5-ой версии пациента.
<script language="javascript" type="text/javascript">
//<![CDATA[
if (navigator.userAgent.indexOf(IE 5)!=-1)
document.write(<link rel="stylesheet" type="text/css" media="screen" href="/ie5.css" />);
//]]>
</script>С помощью JavaScript определяем браузер пользователя и, если это IE5, вписываем в код страницы (с помощью того же скрипта) ссылку на CSS файл ie5.css.
#header {width: 100%;} #content, #footer {width: 60%;}#leftmenu, #rightmenu {width: 20%;padding-left: 10px;padding-right: 10px;}#rightmenu{left: 80%;}Согласно спецификации занимаемое CSS блоком по горизонтали пространство рассчитывается по формуле: margin-left + border-left + padding-left + width + padding-right + border-right + margin-right. При этом ширина содержимого (текста, рисунков, flash-объектов…) задана параметром width.
IE5 считает, что width определяет ширину всей видимой части блока (видимая часть — всё кроме margin), а на содержимое блока остается результат вычитания из width значений padding и border. Значит, надо указать ему неправильное значение width для всех блоков по формуле — занимаемое пространство минус margin-left минус margin-right.
Еще один баг — текст боковых меню «липнет» к краю блока. Видно, что сверху (по вертикали) отступ (padding) от границы блока до содержимого есть, а по горизонтали — нет. Свойственно это только боковым меню (причина, скорее всего, в абсолютном позиционировании этих CSS блоков), только для горизонтальных padding и только, если они указаны в процентах. Задаем отступы слева и справа для боковых меню в пикселях, десяти должно хватить.
Также на скриншоте видно, что левая и правая колонки наложены одна на другую. IE5 не обрабатывает свойство CSS right, с помощью которого мы позиционируем по горизонтали блок rightmenu. Приходится прописывать для него смещение уже слева на 80% (60+20 — почему именно столько, думаю, и так понятно).
CSS для печати страниц
В макете указано два стиля для разных устройств отображения информации:
<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />
<link rel="stylesheet" type="text/css" media="print" href="/print.css" />style.css для браузеров (media="screen"), а print.css для печатающих устройств (media="print"). Соответственно, эти CSS стили друг с другом не связаны и описывают страницу каждый по-своему. Cтиль для print.css будет предельно простым:
body, #header, #main, #content, #footer {color: #000;background-color: #fff;}a {color: #000;}#leftmenu, #rightmenu {display: none;}Устанавливаем белый фон для блоков, текстовые элементы делаем черными. Гиперссылки (<a>) также будут черного цвета. Согласитесь, для вывода на печать это разумно.
С помощью директивы display: none; полностью убраны боковые меню. Очевидно, что страница будет распечатываться ради основного текста, заголовок также не помешает. «Подвал» остается при печати, в случае необходимости вы всегда сможете удалить и его
