 |
|
Добавляем текстовые ссылки
Поместим текстовые ссылки на полагающееся им место. Эти пять ссылок разделены буллитом и заключены в тэг <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 для слоев)
Вкладывайте слои друг в друга
Эта техника помогает решить проблему с вариациями реализации блочной модели в разных броузерах. В IE5 поля, границы и отступы в одном блоке не очень-то хорошо уживаются друг с другом. Обязательно отделяйте декларации полей и границ от деклараций ширины. В неверной блочной модели, реализованной в IE5/Windows, поля и границы не прибавляются к общей ширине блока, тогда как W3C с полной определенностью говорит о том, что ширина блока складывается из ширины его содержимого плюс ширина полей и границ. Заметим, что IE5/Mac и броузеры Gecko корректно отображают блочную модель. Поэтому если вам необходимо задать ширину слоя, который содержит поля или границы, разделите его на два, один из которых будет вложен в другой.
11.3 Не используйте "nowrap" для слоев
В Netscape и Opera могут возникнуть проблемы при больших размерах шрифта