Позиционирование и свободное перемещение в CSS

Лабораторная работа № 10

Позиционирование и свободное перемещение в CSS

Цель: изучение форматирования Web-страниц с примененим возможностей позиционирования и свободного перемещения в CSS

Задание:

1. Создайте Web-страницу по образцу. Следуйте рекомендациям, изложенным ниже (п. 1-10). Необходимые элементы (изображения, банеры и т.д.) найти самостоятельно в Internet .

2. Создайте Web-страницу, с похожим форматированием, но со своим контентом на русском языке. Можно использовать имеющийся, но выполнить перевод с помощью on - line переводчиков (например, translate . google . com ). Очень приветствуется применение Ваших приемов форматирвания.

3. Обе страницы представить на защиту.

Постановка задачи

Если не принимать в расчет верхний навигационный блок, рекламный блок и "Совет дня", то мы имеем дело с версткой в три колонки. Так как центральная колонка будет содержать контент, то от ее высоты будет зависеть высота всего документа. Понятно, что высота всех трех колонок должна быть одинакова. Обратите также внимание на отступы шириной 9px слева и справа от центральной колонки.

Верстка в три колонки

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

1. Сперва зададим нужные поля и отступы для тела документа. Обратите внимание, что задаем для него нулевой отступ, потому что в Opera он по умолчанию не равен нулю. Также задаем #FFF в качестве цвета фона.

body { margin:9px 9px 0 9px; padding:0; background:#FFF;}

2. Теперь мы определим наш первый div (назовем его "level0"). Для него мы только лишь укажем цвет фона – это будет цвет нашей левой колонки.

#level0 { background:#FC0;}

3. Вложим второй слой внутрь нашего level0 и назовем его "level1".

#level1 { margin-left:143px; padding-left:9px; background:#FFF;}

В этом новом слое указали место для левой колонки и отступ от нее. Цвет отступа задается цветом фона для слоя.

Вложим в "level1" слой под названием "level2"

#level2 { background:#FFF3AC;}

С помощью этого слоя мы задаем цвет фона для правой колонки. Теперь левая колонка и отступ отчетливо видны.

Для правой колонки мы по уже описанной методике добавляем в слой "level2" слой "level3".

#level3 { margin-right:143px; padding-right:9px; background:#FFF;}#main { background:#CCC;}

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

Шапка и рекламный блок

Мы пока еще не углублялись в тонкости разметки для боковых колонок, лишь визуально их отделили, но уже сейчас понятна методика по отображению трех колонок одной высоты. Перед тем как двигаться дальше, добавим в разметку верхний навигационный блок и место для рекламы. Вложим слой "topBar" в "level1" и перед слоем "level2", а в "topBar" поместим слой "advBar".

...#topBar { background:#FC0;}#advBar { background:#FFF3AC;}</style>...<body> <div id="level0"> <div id="level1"> <div id="topBar"> This is the top navigation bar. <div id="advBar"> This is the advertisement bar. </div> </div> <div id="level2"> <div id="level3"> <div id="main"> The code you are reading. </div> </div> </div> </div> </div></body>...

4 "Совет дня"

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

#tipDay { float:right; width:175px; background:#FFF3AC;}

Заполнение контентом

Теперь давайте решим, как именно мы будем заполнять блоки содержимым. Самым естественным решением было бы использовать свойство float, но из-за проблем с отображением плавающих блоков в Opera и IE нам придется использовать абсолютное позиционирование. Ошибки в IE небольшие, и ими можно было бы пренебречь, но, к сожалению, с проблемами в Opera справиться не удалось.

Заполняем боковые блоки

Начнем с левого навигационного блока – добавим к нему слой "lftBar". Так как решено использовать абсолютное позиционирование, то теперь есть относительная свобода в выборе места для кода, определяющего слой. Его можно поставить внутрь "level0", до или после "level1" или даже на один уровень вложенности со слоем "level0" – это не повлияет на его отображение – если, конечно, выберем правильные координаты.

Мы попытались вложить "lftBar" в "level0", указав для "lftBar" нулевые координаты top и left, а для "level0" – относительное позиционирование (position: relative), но в IE5.5 слои почему-то перекрывались. Поэтому решено установить для "lftBar" абсолютные координаты относительно тела документа.

#lftBar { position:absolute; width:143px; top:9px; left:9px;}

Для правого навигационного блока использован слой "rgtBar". Было важно, что бы его верхний край совпал с верхним краем слоя "main", что содержит основной контент. Поэтому можно вложить "rgtBar" в "level2", до или после "level3", установив для "level2" относительное позиционирование, а для "rgtBar" – нулевые координаты top и left и ширину, равную правому полю слоя "level3".

#level2 { background:#FFF3AC; position:relative;}...#rgtBar { position:absolute; width:143px; top:0; right:0;}

Расставляем по местам

С нашей версией было две проблемы в IE для Windows. Первая проблема состояла в том, что блок с <Советом дня> исчезал, хотя содержимое блока main его исправно огибало. Эту проблему мы разрешили, установив для слоя "tipDay" относительное позиционирование (такая установка привела к повышению z-index и слой автоматически разместился поверх остальных).

5.3 Странности наследования: "Auto" против "Inherit"

Второй проблемой в IE/Windows было то, что правый навигационный блок отодвигался максимально вправо. Для решения проблемы пришлось явно указать ширину слоя "level2" (в который вложен "rgtBar"). IE не понимает декларацию 'auto', но зато понимает 'inherit' (хотя и довольно-таки странным образом), и это можно использовать для наших целей.

Для "level0" установили ширину в 100%, а в качестве ширины для "level2" указали 'inherit'. Фокус в том, что в IE "level2" наследует значение ширины от "level0" (100%), в то время как в прочих броузерах происходит наследование от "level1" ('auto') (а указав для "level2" ширину в 100%, то возникли бы проблемы с отображением в IE 5.5+, который понимает 100%, как ширину всего окна броузера). Эту ошибку CSS в IE5, кстати, вполне можно использовать для решения сходных проблем – подробности смотрите в разделе использованных приемов.

#level0 { background:#FC0; width:100%; # - New, outermost DIV}#level2 { background:#FFF3AC; position:relative; width:inherit; # - New, inherits 100% from level0 in IE5 # inherits auto from level1 in all others}#tipDay{ float:right; width:175px; background:#FFF3AC; position:relative; # - New, forces z-index so this div displays in IE}

Очищаем стиль

Теперь самое время провести генеральную уборку. Для начала избавимся от слоя "level3" и передадим все его стилевые декларации слою "main".

Добавим правому блоку границу с помощью свойства border-right слоя "main".

Также сделаем два заголовка для основной области и поставим в правый блок несколько тестовых подзаголовков.

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

#main { # Where the main content goes margin-right:143px; padding-right:9px; background:#FFF;}#main h1 { # Where our main section headers go margin:0; padding-left:.3em; font:1.25em Verdana,Helvetica,Arial; color:#609; background:#FC0;}#main dt { # Bump up the main content links font-weight:bold; font-size:120%; margin-top:.8em}#rgtBar h3 { # Subheads for right nav bar, (newsletter, experts...) margin:0; padding:3px; background:#FC0; font-weight:bold; font-size:1em; text-align:center;}

Плавающая форма поиска

Теперь разместим форму поиска и текстовые ссылки в верхнем навигационном блоке.

Форму определим как первого потомка "topBar" и укажем ей перемещение вправо. Мы уже выяснили, что для плавающих элементов следует явно задавать ширину, и наша форма не является исключением. Определим ей ширину 10.5 em – благодаря относительным единицам элементы формы будут пропорционально изменять размер в зависимости от размера шрифта в броузере пользователя. Также зададим для формы выравнивание к правому краю (text-align:right), так как сама форма чуть шире, чем ее элементы.

#topBar form { float:right; width:10.5em; text-align:right;}

Нужно установить в ноль все поля формы поиска, чтобы максимально уменьшить ее размер по вертикали. Для Netscape мы определим высоту строки в 0.7 em, тогда кнопка "Search" по высоте сравняется с полем ввода (на отображение в IE и Opera эта директива никак не повлияет).

Двигаемся дальше. Форма частично накладывается на рекламный блок. Этого мы позволить не можем, так как в нем прямо под формой будет располагаться текстовая ссылка, поэтому определим для "advBar" свойство clear. Напоследок, установим для "topBar" ширину в 100%, дабы избежать ошибки в IE и укажем для поля ввода размер шрифта в 8 em, чтобы его размер изменялся соответственно размеру шрифта в броузере.

#advBar { background:#FFF3AC; clear:right; # - New, clear the search form}...#topBar form { # The search form float:right; width:10.5em; text-align:right; margin:0; line-height:.7em; # - Crucial!}#topBar input { font-size:.8em;}

Добавляем текстовые ссылки

Поместим текстовые ссылки на полагающееся им место. Эти пять ссылок разделены буллитом и заключены в тэг <b>, поэтому именно этот тэг должен стать вторым потомком блока "topBar". В IE 5.0 для Windows мы обнаружили странный эффект, из-за которого ссылки выравнивались к правому краю. Решить эту проблему можно было либо заключив ссылки в слой с выравниванием налево, либо сделав <b> блочным элементом, указав для него необходимое выравнивание. Мы предпочли второй способ.

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

#topBar b { # Top nav bar text links (sitemap, experts...) display:block; text-align:left; font:bold .8em/1.7em Arial,Geneva,sans-serif;}

10Добавляем содержимое и заголовок
для "Совета дня"

На этом этапе мы заменим тестовые заголовки типа "Это заголовок 1" и "Это заголовок 2" на реальные заголовки сайта WebReference – "WebReference.com: Dev the WebT" и "internet.com" соответственно.

Еще добавим заголовок для блока "Совет дня", причем располагаться он будет в том же блоке, что и заголовок "WebReference.com: Dev the WebT". Для этого нам понадобится новый слой, назовем его "tipTit", который будет первым потомком слоя "main". Укажем для него перемещение и выравнивание к правому краю, ширину, стиль шрифта и высоту строки для вертикального выравнивания. Ширину определим в 7em (такую же, как и у блока "tipDay").

Чтобы избежать проблем в IE, которые описаны выше, позиционирование его сделаем относительным.

#tipTit { float:right; width:7em; text-align:right; position:relative; font:.8em/1.8em Arial,Geneva,sans-serif; background:red;}.note { color:red}

Осталось только добавить баннер на его законное место.

#advBar p{text-align:right;margin:0 0.5em;font-weight:bold;}#advBar img{margin-bottom:1em}

Основные приемы CSS

Сохраняйте гибкость

По возможности используйте относительные величины (em или % для шрифтов, em для слоев)