5561-1 (Продвинутая CSS-верстка: шаг за шагом), страница 2

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;

}

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

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

#topBar b { # Top nav bar text links (sitemap, experts...)

display:block;

text-align:left;

font:bold .8em/1.7em Arial,Geneva,sans-serif;

}

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

На этом этапе мы заменим тестовые заголовки типа "Это заголовок 1" и "Это заголовок 2" на реальные заголовки сайта WebReference – "WebReference.com: Dev the Web™" и "internet.com" соответственно. Еще мы добавим заголовок для блока "Совет дня", причем располагаться он будет в том же блоке, что и заголовок "WebReference.com: Dev the Web™". Для этого нам понадобится новый слой, назовем его "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

}

Дело сделано! Мы успешно воспроизвели основную страницу WebReference.com без единой таблицы. Нам осталось только добавить баннер на его законное место. Взгляните. Примечание: финальный вариант разметки еще не тестировался в IE6, но мы обязательно это сделаем в самом ближайшем будущем. (прим. переводчика: в IE6 страница отображается вполне корректно)

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

#advBar img{margin-bottom:1em}

Дальнейшие планы

Надеемся, что из этой статьи вы почерпнули некоторые идеи по использованию CSS для создания многоколоночной верстки. Для дальнейшего улучшения дизайна мы можем добавить в левую колонку дополнительные информационные или рекламные блоки. Для верхнего блока ([sitemap | experts .... search]) и центрального заголовка (WebReference: Dev the Web .... Tip of the Day]) мы можем применить методику, описанную в A List Apart (хотя наверняка возникнут проблемы с позиционированием формы поиска). Разумеется, любые изменения мы будем тестировать во всех основных броузерах.

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

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

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

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

Вкладывайте слои друг в друга

Эта техника помогает решить проблему с вариациями реализации блочной модели в разных броузерах. В IE5 поля, границы и отступы в одном блоке не очень-то хорошо уживаются друг с другом. Обязательно отделяйте декларации полей и границ от деклараций ширины. В неверной блочной модели, реализованной в IE5/Windows, поля и границы не прибавляются к общей ширине блока, тогда как W3C с полной определенностью говорит о том, что ширина блока складывается из ширины его содержимого плюс ширина полей и границ. Заметим, что IE5/Mac и броузеры Gecko корректно отображают блочную модель. Поэтому если вам необходимо задать ширину слоя, который содержит поля или границы, разделите его на два, один из которых будет вложен в другой.

Не используйте "nowrap" для слоев

В Netscape и Opera могут возникнуть проблемы при больших размерах шрифта

В IE 5.x есть ошибка CSS, которой можно воспользоваться

IE 5.x интерпретирует комментарии, хотя должен их игнорировать. Это можно использовать для создания некоего подобия "if-then", чтобы обойти в нем некоторые ошибки CSS. Мы использовали этот прием, но потом перешли на методику с использованием свойства inherit. В IE6 этот прием не работает.

#fontChanger {font-size:.8em;//font-size:1em;}

Следите за шириной слоев и таблиц

Установка ширины в 100% может привести к тому, что ширина такого слоя в IE не совпадет с шириной слоя, для которого ширина задана как auto (по умолчанию). Кроме того, для таблицы с width=100% IE5.5 установит ширину равную ширине всего экрана, а вовсе не блока, в который эта таблица вложена. Во избежание вы можете использовать //width:100% для внешнего блока и width:inherit для самой таблицы.

#topBar{background:#FC0;//width:100%;}

#topBar form{display:inline;}

table.c{font:.8em/1em Arial,Geneva,sans-serif;width:100%;//width:inherit;}

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

У плавающих блоков могут возникать проблемы с директивой clear

Особенно у форм. Во избежание можно заключать блоки в дополнительные контейнеры и указывать clear для них. Хороша также методика, описанная в A List Apart.

Не используйте фиксированную высоту

Броузеры пятых и шестых версий ее просто не поддерживают, равно как и min-height. А IE 5.5 к тому же не понимает min-width, max-width и max-height.

В Opera и Netscape задавайте для форм нулевой отступ (margin:0)

Особенно в плавающих блоках.

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

Opera расходится с W3C в толковании спецификации CSS, поэтому для корректного отображения отступов вам придется задать высоту и ширину не только для родителя, но и для потомка. Отметим, что в Opera и IE 5.5 систематически возникают ошибки, если у родителя тоже заданы отступы.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/