По ту сторону Веб-страницы

Стопроцентная верстка

Почему при верстке книг и журналов люди оставляют поля? Для

Чего нужно пустое место?

Перед вами страница книги, изданной в 1456 году.

Это первая в мире печатная книга (напечатанная с помо­щью подвижных литер) книги — «Гутенбергова Библия».

Если не считать шрифта, буквиц и рисунков в арха­ичном стиле, то верстка выглядит достаточно современ­но: широкие поля, выносы элементов из колонок вбок.

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

Страница, сверстанная без полей и не использую­щая пустое пространство, выглядит просто некрасиво (это раз) и оказывается неудобной для чтения (это два). Важ­ность свободного пространства дизайнеры и верстальщики подметили давно (об этом не догадываются только рекламные менеджеры, жела­ющие, чтобы дизайнер уместил в квадрат 3 на 4 см примерно 50 строк текста и две фотографии) и активно его используют — это добавляет сверстанному тексту элегантности.

Почему поля остаются на веб-страницах? Чаще всего потому, что верстка жесткая. Она хорошо смотрится на старых мониторах с раз­решением 800 на 600 пикселей, чуть хуже на разрешении 1024 на 768 и странно на всех остальных. Странно тем, что остается очень много пустого места, которое неплохо было бы использовать. Если текст и ил­люстрации сверстаны блоком посреди, это смотрится нормально, по­тому что находится прямо в поле зрения. Но если сайт проектировал­ся давно (то есть для низких разрешений) и сверстанная композиция шириной в 666 пикселей начинается в левом верхнем углу, то на экране шириной 1600 пикселей (сейчас такие — не редкость) справа будет зи­ять огромная, ничем не оправданная и не заполненная дыра.

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

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

Жесткая верстка имеет свои ограничения и одновременно свои плюсы.

Первое ограничение — техническое. Ширину нужно подбирать, исходя из технических возможностей: поскольку в настоящее время минимальная ширина экрана составляет 800 пикселей, значит, макси­мальная допустимая ширина блоков должна составлять около 750-760 пикселей (учитывая, что границы браузеров и полоса прокрутки тоже имеют свою ширину, отбирая часть полезного пространства — а ведь некоторые пользуются боковыми панелями, которые есть в Internet Explorer и Opera). Посчитайте, сколько останется свободного места на широких экранах. Конечно, можно верстать жесткие сайты и большей ширины, но это будет нечестно по отношению к очень большой аудито­рии (не менее 10% пользователей).

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

Плюсы же очевидны. Такие сайты очень просто верстать. Не требуется думать, как сайт будет выглядеть на экранах с разным разре­шением: об этом уже давно подумали другие люди. Наконец, код для основного блока занимает очень мало места. Чтобы расположить се­рый блок шириной 700 пикселей посреди страницы с помощью таблиц, нужно написать:

<center>

<table width="700" bgcolor="silver">

<tr>

<td>

Содержимое блока </td>

</tr>

</table>

</center>

Чтобы то же самое сверстать с помощью блока, следует опреде­лить стили и написать тэг блока:

<style type="text/css" media="all"> body {

Text-align:center;

}

#content { width:700px;

Background-color:silver;

Padding:3px;

Text-align:left;

}

</style>

<div id="content">Содержимое блока</div>

Использование блоков и таблиц в данном случае — вопрос не только экономии кода, но и вопрос идеологический, и мы вернемся к нему позже.

Некоторые дизайнеры прекрасно владеют различными техника­ми верстки, но сознательно делают сайты с фиксированной шириной колонки. При этом колонка оставляется достаточно узкой (но длин­ной), чтобы эффект не пропадал и на мониторах с небольшим разре­шением, например, 300 пикселей. В колонке помещаются, например, текст и логотип, а сбоку помещаются либо небольшая иллюстрация, либо декоративные элементы. Основная колонка при этом не обяза­на располагаться прямо по центру: она может быть смещена чуть вбок. Визуальное равновесие может поддерживаться неповторяющимися фоновыми элементами страницы. Такая верстка выглядит достаточно изящно (как и большинство узких и относительно длинных элементов с легкой асимметрии в искусстве, дизайне и реальном мире), хотя встре­чается на веб-страницах не так часто. Другой пример неотцентрованной верстки с фиксированной шириной основного блока — когда этот блок вплотную примыкает к верхней и левой границам браузера. Эффект того, что какие-то элементы остались за границами экрана, может со­здаваться с помощью графики: обрезан­ные сверху и слева заголовки и иллюс­трации, фрагменты объектов. Вообще же, любое решение с фиксированной версткой страницы может выглядеть элегантно и привлекательно, если оно нешаблонно. Вот несколько примеров дизайнера Lakmus (Www.Lakmus.Ru):

В этих трех примерах (один на предыдущей странице и два на этой сле­ва) тянущаяся верстка имитируется пов­торяющимся фоном. Основной же блок (слева или в центре) остается фиксиро­ванной ширины.

А в этих двух примерах (чуть ниже) верстка жесткая в полной мере:

Чтобы фоновое изоб­ражение продолжало рису­нок основного блока, есть три простых приема. Первый используется тогда, когда фоновое изображение — это

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

Body {

Background:#DDDDDD URL(/images/background. jpg) repeat-y;

}

В этом случае изображение достаточной высоты будет фоном для всех блоков на странице, но, если размножаться по горизонтали оно будет, то по вертикали нет: под рядом этих изображений останется светло-серое пространство. Нужно позаботиться, чтобы этот (в данном
случае серый) фон, задающийся в формате #^ддЬЬ, гармонировал с цветами изображения.

Второй прием используется тогда, когда фоновых изображений или просто фрагментов фонового цвета несколько. Например, сверху на странице следуют блоки на светло-зеленом фоне, а снизу — на тем­но-зеленом. В этом случае создаются две таблицы (или два блока) одна над другой; каждая залита своим фоновым цветом, и у каждой шири­на — 100%. Содержимым ячеек этих таблиц или блоков будут уже те таблицы или блоки, в которых находится основное содержимое, свер­станное жестко (с точным количеством пикселей).

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

^аЬ^ cellpadding="0" cellspacing="0" border="0" width="100%">

Valign="top">

<td align="right" width="50%">

Содержимое и фон левой половины страницы </td>

<td width="50%">

Содержимое и фон правой половины страницы </td>

</tr>

</table>

Или так, что компактнее:

<div style="float:left; width:50%; text-align: right">Содержимое и фон левой половины страницы<^^> <div style="float:left; width:50%">Содержимое и фон правой половины страницы<^^>

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

Это были приемы, которые позволяют экрану не оставаться пус­тым, если основной блок слишком маленький для данного разрешения. Происходит визуальное заполнение рабочего пространства, что более приятно для глаза, но не более.

Однако есть методики, которые позволяют использовать все ра­бочее пространство окна браузера с пользой. Это приемы так называе­мой резиновой, или тянущейся, или эластичной верстки.

За годы использования тянущейся верстки выработано очень много приемов, которые не только позволяют располагать элементы

Страниц так, как нужно ди­зайнеру, вне зависимости от разрешения экрана и осо­бенностей браузера.

Очевидный прием, ра­ботающий во всех браузерах корректно — использовать таблицу стопроцентной ши­рины, а ячейкам внутри нее назначать также только про­центные значения. В этом слу­чае, какая бы ни была ширина экрана, каждая из ячеек прос­то будет растягиваться, и стра­ница будет выглядеть коррект­но при любом разрешении. Количество ячеек, само собой, может быть разным: от двух до ста (ибо процентов только 100, что бы рекламщики ни гово­рили о 110 или 200 процентах вкуса или запаха). В этом слу­чае модульная сетка веб-стра­ницы напоминает страницу в программе компьютерной верстки: при создании нового файла предлагается разбить на колонки, хотя это не зна­чит, что текст будет верстаться именно по этим колонкам — они только составляют осно­ву макета. Рассмотрим один пример — главную страницу сайта Www.Artlebedev.Ru.

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

Шестиколонник рабо­тает по-разному в разных час­тях страницы. Дважды — так, что в каждой колонке по од­
ному объекту (меню и образцы-картинки). Дважды же использовано слитие колонок: поскольку шесть делится на два, использована вся ра­бочая ширина, но каждая из трех ячеек равна по ширине двум стандарт­ным (крупные графические ссылки на работы и нижний блок с адреса­ми, счетчиком и поисковой формой). Сверху использованы только две из шести колонок; один раз шестиколонник вообще нарушен (раздел о клавиатурах на бледной подложке), а один раз совмещение колонок осуществлено нестандартно: первые три колонки слиты в одну широкую, после чего используется одна на стандартную ширину и одна — на ши­рину двух стандартных колонок (новостной блок и ссылки на последние статьи на сайте).

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

Поэтому чаще встречает­ся такой вариант верстки, при геР котором страница по ширине заполняется на 100% таблицей или блоком с основным со­держимым, а колонка (обычно слева, иногда две колонки по бокам) обладает фиксирован­ной шириной, не меняющейся при изменении размеров окна или при разных разрешени­ях. Ширина оставшегося про­странства высчитывается бра­узером самостоятельно, хотя в Opera 6 и Netscape 4 существу­ют ошибки: колонка фиксиро­ванной ширины оказывается шире, чем указано. Примеров такой верстки очень много.

О том, как избежать разночтения браузерами кода, рассказывается в главе «Брау­зер для пользователя и веб-ди­зайнера».

Можно также совме­щать оба типа верстки: напри­мер, блок с логотипом верстать жестко, а прочее содержимое страницы — эластично.

Простор для фантазии при тянущейся верстке огромен. Разных вариантов совмещения процентных и пиксельных указаний ширины масса. Некоторые из приемов описываются в главе «Браузер для пользо­вателя и веб-дизайнера». Например, указав для части колонок пиксель­ные значения и поставив в них прозрачные GIF-распорки, можно для оставшейся ячейки указать значение, явно превышающее ширину окна браузера (от 2000 пикселей до бесконечности), что позволит добиться одинаковой ширины ячеек во всех графических браузерах. Есть при­нцип «УКБМ — ТБУ» («У кого больше монитор — тот больше увидит»), который можно описать так: наиболее важная часть страницы видна пользователям с любым разрешением экрана, а остальные части появ­ляются тогда, когда ширина экрана намного больше ширины основного блока. В ход идут HTML, CSS, JavaScript, фоновые изображения.

Но есть еще и третий тип верстки, который используется намно­го реже остальных. Это верстка с шириной, зависящей от содержимого, или, попросту говоря, верстка по содержимому.

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

Рассмотрим пример, что­бы не быть голословными. Одна из страниц сайта galiana. com. ru выглядит так, как будто исполь­зует тянущуюся верстку. В то же время страница из другого раз­дела такая, как будто верстка в ней — фиксированная.

Справедливы оба утверж­дения. Дело в том, что на подоб­ных сайтах используется таблица и блок, где ширина не указана, а выравнивание самого блока (но не текста в нем!) задано по цент­ру. Таким образом, если внутри блока — текст, да еще сверстан­ный в несколько колонок, или иллюстрации, или какое-то другое содержимое, способное расширить границу блока почти до границ окна браузера, — блок разъезжается до разумных пре­делов, пока не закончится отве­денное ему пространство (как
газ). Если же ширина содержимого этого блока — 300 или 500 пикселей, то и ширина самого блока будет такой же. Если в блоке написать пару слов, то ширина блока станет вообще 50-100 пикселей.

Таким образом, подход удобен тем, что не приходится придумы­вать, чем заполнять пустое пространство, оставшееся на тех страницах, где содержимое блока узкое. Это пространство просто игнорируется (либо заполняется ненавязчивым фоном), а внимание посетителя кон­центрируется на том, что действительно есть на странице.

Реализовать такую верстку несложно. С использованием таблиц основа будет иметь такой вид:

<center>

<table>

<tr>

<td align="left">

То самое содержимое, от которого зависит ширина блока.

</td>

</tr>

</table>

</center>

Нельзя назвать этот пример кода очень сложным. А вот реализо­вать подобное с помощью блоков <div> довольно сложно. Дело в том, что таблица по умолчанию как раз принимает размер по содержимому, тогда как блок по умолчанию занимает 100% ширины, предоставляемой ему, если не задать ширину явно (что не входит в нашу задачу).

В качестве примера, когда ширина блока будет подогнано по со­держимому, можно привести следующий:

<div style="border:1px solid black; float:left">

123456

</div>

Разумеется, стили можно вынести в отдельные таблицы. Смысл таков: чтобы блок не разъезжался на ширину окна, ему присваивается параметр выравнивания float (рамка border в стилях приведена толь­ко для демонстрации).

Но у этого примера есть недостаток: по центру этот блок располо­жить нельзя: только слева или справа.

Недостаток исправляется не так уж сложно, правда, требуется знать ошибки в реализации браузерами свойств CSS:

<style type="text/css">

Body { text-align:center;

}

Div. centered {

Display:table; width:0; margin:0 auto; background-color:yellow;

}

</style>

<div class="centered">

Нечто не очень длинное

</div>

Требуются некоторые пояснения. Как известно, с помощью таб­лицы сделать блок с шириной по содержимому легко. Все современные браузеры, кроме Internet Explorer, с помощью свойства display:table позволяют назначать любому элементу такое поведение, как у таблиц. В Internet Explorer подобное поведение эмулируется свойством width:0 (браузер сжимает блок до той поры, пока не встретит минимальную преграду; главное — не использовать свойства overflow, например, overflow:hidden). Чтобы расположить блок по центру, во всех брау­зерах достаточно свойства margin:0 auto — но не в Internet Explorer, где это свойство игнорируется. Для него, такого особенного, приходит­ся писать выравнивание по центру для иерархически более высокого элемента (в данном случае body, но это не всегда подходит, поэтому можно заключить этот блок в другой, назначив последнему выравнива­ние по центру).

Internet Explorer и Firefox ведут себя в результате этих усилий оди­наково: сжимают блок до той поры, пока не будет достигнут минимум. Естественно, текст получается в узкую колонку шириной в одно слово. Единственный способ решить эту проблему — вложить в блок наряду с текстом какое-то содержимое фиксированной ширины, например, рас­порку из прозрачного изображения или <div>. Но в Opera почему-то ширина блока увеличивается, пока не кончится текст.

Народная мудрость гласит: всем мил не будешь. Это касается и браузеров.

Рассмотрим основные особенности верстки с помощью таблиц и блоков, и начнем хронологически — с таблиц.

Изначально таблицы были логическим тэгом и предназначались для вывода на экран только табличных данных. Однако из всех элемен­тов страниц только этот позволял равномерно выстраивать элементы не только друг под другом, но и друг рядом с другом. Это сразу натолкну­ло веб-дизайнеров на мысль, что тэг <table> — отличная основа для верстки. Блоки стало возможным располагать не только по вертикали, но и по горизонтали. Таблица (у которой можно отключать видимость границ с помощью border="0") дала сетку, чтобы можно было акку­ратно и красиво располагать содержимое.

Поскольку даже при появлении языка CSS, теоретически позво­лившего бы манипулировать всеми параметрами отображения любых элементов, далеко не все производители браузеров кинулись тут же внедрять поддержку этого языка, таблицы надолго остались основным средством верстки. За годы, когда компании — разработчики браузеров короткими перебежками внедряли поддержку все новых правил CSS в свои творения, веб-дизайнеры тоже не теряли времени и отрабатывали все новые приемы верстки с помощью таблиц. В итоге на вооружении «табличников» (так называют тех, кто привык верстать с помощью таб­лиц) оказались:

1. Полная браузерная поддержка. Несмотря на некоторые разночте­ния, в основном во всех браузерах таблицы работают одинаково.

2. Арсенал свойств CSS. Так, ранее было принято писать такой код:

<table border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td style="text-align:justify">Содержимое</td> </tr>

</table>

В каждой таблице приходилось писать подобные параметры. Но с применением CSS картина меняется. Сам HTML-код мож­но написать так:

<table>

<tr>

<td>Содержимое</td>

</tr>

</table>

То есть получается «чистый» HTML. Стилевые описания задают­ся один раз и автоматически применяются к каждой таблице:

<style> table { border:0px;

Border-collapse:collapse;

}

Table td {

Padding:0px;

Vertical-align:top;

Text-align:justify;

}

</style>

Код, конечно, не из двух строчек, но он позволяет сильно эко­номить, если у вас не одна таблица, а десятки. Если же требует­ся таблица с другими параметрами, ей просто нужно назначить класс, а этот класс описать в стилевой таблице.

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

4. Ячейки таблиц всегда четко выровнены друг относительно дру­га. Поэтому никогда не возникает проблем с подгонкой блоков в одних ячейках к блокам в других: структура таблицы заботится об этом сама. Это большое преимущество перед блоками <div> в тех случаях, когда требуется использовать большое количество элементов, которые нужно расположить в определенной после­довательности: если заранее неизвестны размеры блоков, то с помощью <div> их всегда более проблематично располагать в нужной последовательности и на нужном расстоянии друг от дру­га — но не невозможно.

Верстка с использованием блоков стала возможной тогда, когда вышли следующие версии браузеров: Internet Explorer 5, Opera 7, а также первые стабильные версии Firefox и Safari. В них было реализовано точ­ное позиционирование элементов почти без ошибок (максимального соответствия спецификациям в этом плане браузеры достигли к верси­ям Internet Explorer 6-7, Opera 8-9, Firefox 1.5 и Safari 2).

Смысл в замене табличной верстки на блочную — сразу в несколь­ких вещах. Во-первых, тэги <div> изначально предназначены именно для блоков, а не для чего-то иного, в отличие от <table> — это идео­логия чистого HTML. Ее можно принимать во внимание, а можно и не принимать. Во-вторых, вместо набора «тэг таблицы — тэг ряда — тэг ячейки» используется единственный тэг «блок» — это тривиальная эко­номия. В-третьих, тэг <div> в ряде случаев более мобилен в отношении стилевых определений (особенно это касается динамического присвое­ния параметров стиля с помощью JavaScript).

После внедрения практически полной поддержки CSS браузера­ми тэг <div> оказался не очень-то нужным. Поскольку любой элемент можно кардинально модифицировать или точно позиционировать с по-

Padding:5px;

}

.content { float:left; padding:5px;

}

</style>

<div class="navigate">

Меню навигации </div>

<div class="content">

Содержимое страницы </div>

Параметр float достаточно задавать лишь для одного слоя из двух. Однако Internet Explorer в этом случае между слоями добавляет небольшой промежуток, а Firefox накладывает слои друг на друга. Чтобы все смотре­лось именно так, как хочется, float следует указывать для всех слоев. Цве­та для блоков и фона страницы написаны только для наглядности.

Макет верстки из трех элементов сделать не так сложно. Чаще всего над колонкой навигационного меню и содержимым страницы есть так называемая «шапка», содержащая логотип и некоторые сведения контактного характера. Шапку можно просто растянуть на 100% шири­ны экрана (то есть оставить вид блока по умолчанию):

<style type="text/css">

* {

Margin:0px;

Padding:0px;

Background-color:#FFFFCC;

}

.topness {

Background-color:#FFCC66;

Text-align:center;

Padding:5px;

}

.navigate { float:left; width:200px;

Background-color:#FFCC9 9; padding:5px;

}

.content {

Float:left;

Padding:5px;

}

</style>

<div class="topness">

Шапка

</div>

<div class="navigate">

Меню навигации </div>

<div class="content">

Содержимое страницы </div>

Для всех трех блоков приведены минимальные стилевые описания. Цвета и текстовые параметры можно менять как угодно; принципиаль­ны только параметры, которые отвечают за расположение блоков. Соб­ственно, для первого блока («шапки») ничего менять не нужно: для этого элемента пригождается как раз его поведение по умолчанию. Для двух вторых же нужно задать выравнивание, побочным действием которого является тот эффект, что ширина блока (если она не задана явно) вычис­ляется по его содержимому. Поскольку колонка меню навигации нужна заданной ширины, указываем ширину явно, не боясь, что она расползет­ся вследствие каких-то потусторонних сил (ошибок браузера).

Нужно сказать, что этот пример самый простой, но не единствен­ный. Существует еще несколько приемов верстки в две колонки (при необходимости вы легко дополните их дополнительными блоками).

Например, для создания двухколонного макета используется па­раметр margin:

<style type="text/css">

#container { width: 7 5 0px; /* Общая ширина колонок */

}

#leftcol { /* Левая колонка*/ width: 2 0 0px; /* Ширина слоя */ float: left; /* Состыковка с соседним слоем */ color: white; /* Цвет текста*/

Background: #008000 /* Цвет фона левой колонки

*/

}

#rightcol { /* Правая колонка*/

Background: #e0e0e0; /* Цвет фона правой колонки

*/

Margin-left: 200px; /* Отступ слева */

}

P {

Padding: 10px; /* Поля вокруг текста */

Margin: 0em /* Убираем отступы */

}

</style>

<div id="container">

<div id="leftcol"><p> Текст в первой колонке </ p></div>

<div id="rightcol"><p> Текст во второй колонке </p></div>

</div>

В данном случае изначально используется фиксированная ши­рина общего блока, что, очевидно, не походит для тех, кто использует тянущуюся верстку

Если внизу после колонок предполагается разместить еще один слой, то для него следует использовать стилевой параметр clear. Дело в том, что браузеры по-разному располагают этот нижележащий слой, по­этому следует отменить действие обтекания, что clear как раз и делает.

<div id="container">

<div id="leftcol">Текст в первой колонке<^^> <div id="rightcol">Текст во второй колонке<^^>

</div>

<div style="clear: left"> Текст в нижней части </div>

Есть вариант и с позиционированием элементов.

При размещении двух слоев рядом по горизонтали левому слою необходимо задать абсолютное положение, а правому — относитель­ное. Это универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. При этом не имеет значения, как будет располагаться макет — по ле­вому краю или по центру окна — слои не изменят своего положения. Обязательно следует сместить правый слой (в примере он называется rightcol) по горизонтали с помощью параметра left на величину, равную ширине левого слоя. В противном случае слои будут наклады­ваться друг на друга.

<style type="text/css">

#leftcol { position: absolute; /* Абсолютное позиционирование */

Width: 2 0 0px; /* Ширина слоя */ background: #800000; /* Цвет фона */ color: white; /* Цвет текста */

}

#rightcol { position: relative; /* Относительное позиционирование */

Left: 200px; /* Смещаем слой вправо на ширину левого слоя */

Width: 550px; /* Ширина слоя */ background: #e0e0e0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */

}

</style>

<div id="leftcol">Левая колонка<^^>

<div id="rightcol">Правая колонка </div>

Помните только, что Opera 6 и Netscape 4 некорректно работа­ют с позиционированными слоями: указания позиционирования они просто пропускают. Впрочем, никто из тех, кто разрабатывает сайты на основе блочных моделей, не ориентируется на столь устаревшие бра­узеры: если на них ориентироваться, то в верстке сайтов можно смело возвращаться к середине 90-х годов.

Параметр padding, добавляющий поля вокруг текста, если его использовать в стиле левого слоя leftcol, вносит искажения в ма­кет страницы для браузера Firefox. Это связано с тем, что ширина эле­мента в этом браузере складывается из значений параметров width, padding и margin. Поскольку добавление полей увеличивает ширину слоя, то правая колонка начинает накладываться поверх левой колон­ки. Чтобы устранить эту особенность, атрибут padding следует приме­нить к стилю абзаца, который должен располагаться внутри слоя. Также можно добавить еще один внутренний слой и указать поля для него.

Относительное позиционирование также используется для по­добных целей:

<style type="text/css">

#leftcol { position: absolute; /* Абсолютное позиционирование */

Width: 550px; /* Ширина левой колонки */ background: #e0e0e0; /* Цвет фона содержимого */

Padding: 10px /* Поля вокруг текста */

}

#rightcol { /* Этот слой накладывается поверх */ position: relative; /* Относительное позиционирование */

Left: 500px; /* Положение от левого края */ top: 20px; /* Положение от верхнего края */ width: 2 0 0px; /* Ширина правой колонки */ background: #800000; /* Цвет фона */ color: #fff; /* Цвет текста */

}

</style>

<div id="leftcol">Левая колонка</div>

<div id="rightcol">Правая колонка</div>

Наложение слоев — это один из примеров того, чего трудно до­биться средствами таблиц HTML. Гораздо проще реализовать это на связке слоев и специализированных CSS-описаний.

У каждого слоя необходимо указать параметр float:left, кото­рый позволяет один слой расположить вплотную к другому справа.

Теперь задаем относительное позиционирование аргументом relative параметра position. Положение верхнего слоя управляется значением left и top. Но поскольку отсчет координат в данном слу­чае ведется от левого верхнего угла второго слоя, по горизонтали нужно указывать отрицательное значение. Впрочем, можно использовать так­же параметр bottom.

<style type="text/css">

#leftcol { position: relative; /* Относительное позиционирование */

Float: left; /* Совмещение колонок по горизонтали

*/

Width: 4 0 0px; /* Ширина слоя */ background: #800000; /* Цвет фона */ color: white; /* Цвет текста */

}

#rightcol { position: relative; /* Относительное позиционирование */

Float: left; /* Совмещение колонок по горизонтали

*/

Left: -50px; /* Сдвиг слоя влево */ top: 5 0px; /* Смещение слоя вниз */

Было, я съел. Осталась поваренная книга для Валькиной мамы, которая живет в Лежневе. Как это там... Соус пикан. Полстакана уксусу, две луковицы... и перчик. </div>

<div id="col2">Подается к мясным блюдам...

Как сейчас помню: к маленьким бифштексам. "Вот

Подлость, — подумал я,— ведь не просто к бифштексам, а к ма-а-аленьким бифштексам". Я вскочил и подбежал к окну. В ночном воздухе отчетливо пахло ма - а-аленькими бифштексами. Откуда-то из недр подсознания всплыло: "Подавались ему обычные в

Трактирах блюда, как то: кислые щи, мозги с горошком, огурец соленый (я глотнул) и вечный слоеный сладкий пирожок..."<^^>

<div id="col3">— "Отвлечься бы", — подумал я и взял книгу с подоконника. Это был Алексей Толстой, "Хмурое утро". Я открыл наугад. "Махно, сломав сардиночный нож, вытащил из кармана перламутровый ножик с полусотней лезвий и им продолжал орудовать, открывая жестянки с ананасами (плохо дело, подумал я), французским паштетом, с омарами, от которых резко запахло по комнате". Я осторожно положил книгу и сел за стол на табурет. </div>

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

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

В чем минус? В том, что колонки могут быть разной высоты. Сле­довательно, и линии окажутся разной высоты. И если не выверять коли­чество символов вручную, то верстка может получиться совсем некра­сивой, где блоки и линии «прыгают».

Решение тут простое. Всем трем блокам, являющимся колонка­ми, стоит назначить одинаковую высоту, не меньшую высоты самой вы­сокой колонки. Таблица стилей при этом примет такой вид:

<style type="text/css">

#col1, #col2, #col3 { width: 200px; /* Ширина колонок */ padding: 0px 7px; /* Поля по вертикали и

Горизонтали */

Body {

Position: relative;

/* чтобы потомки элемента body

Позиционировались по отношению к body */ height: auto !important;

/* для Firefox и Opera — чтобы не

Сработало следующее объявление */ height: 100%;

/* для IE (работает некорректно, что обеспечивает нужный результат) */ min-height: 100%;

/* для Firefox и Opera (в IE 7 делает

То же, что предыдущее объявление) */

}

P. footer {

Position: absolute;

TOC o "1-5" h z bottom: 0;

/* чтобы закрепить нижний колонтитул у

Нижнего края body */ width: 100%;

/* чтобы ширина ul не ограничивалась по

Содержанию */

}

Div {

Padding-bottom: 4em;

/* чтобы колонтитул не накладывался на

Основное содержание */

}

</style>

<div>

... содержание...

</div>

<p class="footer">Внизу </p>

Абзац (или любой другой элемент, кроме <div>), помеченный классом «footer», будет располагаться в самом низу страницы, как и требовалось. Единственный минус — для содержимого страницы при­ходится вводить элемент <div>. Тем не менее, решение универсально для разных браузеров.

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

Способ 3. Применение параметра text-align

<style type="text/css"> body {

Text-align: center; /* Выравниваем содержимое веб-страницы по центру */

}

#centerLayer { width: 4 0 0px; /* Ширина слоя в пикселях */ margin-left: auto; /* Отступ слева */ margin-right: auto; /* Отступ справа */ background: #fc0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */

Text-align: left; /* Выравнивание содержимого слоя по левому краю */

}

</style>

<div id="centerLayer">

В качестве «заполнителя» блоков обычно используют текст, начинающийся со слов «Lorem ipsum», что бессмысленно, потому что первое из этих слов является огрызком от какого-то другого латинского слова. Я придумал текст, который не использует слов «Lorem ipsum» — в отрыв от традиции к новым рубежам в верстке текста. Этот текст вы только что прочитали.

</div>

Способ 4. Параметр align тега <div>

<style type="text/css">

#centerLayer { width: 4 0 0px; /* Ширина слоя в пикселях */ background: #fc0; /* Цвет фона */ padding: 10px; /* Поля вокруг текста */

Text-align: left; /* Выравнивание по левому краю

*/

}

</style>

<div align="center">

<div id="centerLayer">

В качестве «заполнителя» блоков обычно используют текст, начинающийся со слов «Lorem ipsum»,

Что бессмысленно, потому что первое из этих слов является огрызком от какого-то другого латинского слова. Я придумал текст, который не использует слов «Lorem ipsum» — в отрыв от традиции к новым рубежам в верстке текста. Этот текст вы только что прочитали.

</div>

</div>

Способ 5. Ширина слоя в пикселях (абсолютное позициониро­вание)

<style type="text/css">

#centerLayer { position: absolute; /* Абсолютное позиционирование */

Width: 4 0 0px; /* Ширина слоя в пикселях */ height: 300px; /* Высота слоя в пикселях */ left: 50%; /* Положение слоя от левого края */ top: 50%; /* Положение слоя от верхнего края */ margin-left: -200px; /* Отступ слева */ margin-top: -150px; /* Отступ сверху */ background: #fc0; /* Цвет фона */ border: solid 1px black; /* Параметры рамки вокруг */

Padding: 10px; /* Поля вокруг текста */

Overflow: auto; /* Добавление полосы прокрутки */

}

</style>

<div id="centerLayer">

В качестве «заполнителя» блоков обычно используют текст, начинающийся со слов «Lorem ipsum», что бессмысленно, потому что первое из этих слов является огрызком от какого-то другого латинского слова. Я придумал текст, который не использует слов «Lorem ipsum» — в отрыв от традиции к новым рубежам в верстке текста. Этот текст вы только что прочитали.

</div>

Верстка для веб-страниц (в числе прочего) отличается от по­лиграфической верстки и тем, что она динамическая. Это значит, что не все элементы сразу показываются на странице. Часть из них появ­ляется по какому-то событию. Обычно за это отвечает JavaScript, но и на CSS можно реализовать некоторые вещи. Например, всплываю­щие подсказки:

<style> а.^ span{

Display:none; /* прячем подсказку, пока мышь не наведена*/

}

A. tt:hover{

Position:relative; /*Ставим точку отсчета для подсказки внутрь данной ссылки*/

Z-index:23; /* чтобы подсказка показывалась поверх этой и других ссылок*/

}

A. tt:hover span{

Display:block; /*показываем подсказку при наведении*/

Position:absolute;

Top:-10px;

Left:40px; /*три строки для позиции подсказки относительно левого верхнего угла ссылки*/ z-index:22;/*мне 22 + см. выше*/ background:#fafafa; /*фон, чтобы было видно подсказку */

}

</style>

<a class="tt" href="#"> Текст ссылки <span>Пояснение к ссылке </span>

</a>

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

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

Тяжелое полигра<