Реферат: Продвинутая CSS-верстка: шаг за шагом
background:#FC0;
font-weight:bold;
font-size:1em;
text-align:center;
}
Размер фиксированный против размера относительного
Чтобы предотвратить превышение длинным подзаголовком ширины блока, мы изменим некоторые декларации для "rgtBar" и "main", переписав их в относительных единицах ("em"). Прежде мы задавали ширину в 143 px. Это составляет примерно 9em, если размер шрифта в броузере равен стандартным двенадцати пунктам (двенадцать пунктов – это16px). Поэтому мы задаем для "rgtBar" и "main" поля и ширину не в 143px, а в 9em. Теперь, благодаря относительным единицам, правый блок будет менять свою ширину пропорционально установленному пользователем размеру шрифта. Взгляните.
#main {
margin-right:9em; # - Use variable widths rather than fixed, they are
more user-friendly. This also applies to font sizes.
padding-right:9px;
background:#FFF;}
...
#rgtBar {
position:absolute;
width:9em; # - likewise
top:0;
right:0;
}
Описанная методика решает большинство проблем с превышением размера содержимого над размером содержащего блока. Для блока "Совет дня" мы тоже задали ширину в относительных единицах, но для левого блока все же решили остановиться на единицах абсолютных, так как его содержимое не могло разрушить верстку.
Плавающая форма поиска
Теперь разместим форму поиска и текстовые ссылки в верхнем навигационном блоке. Форму мы определим как первого потомка "topBar" и укажем ей перемещение вправо. Мы уже выяснили, что для плавающих элементов следует явно задавать ширину, и наша форма не является исключением. Определим ей ширину 10.5em – благодаря относительным единицам элементы формы будут пропорционально изменять размер в зависимости от размера шрифта в броузере пользователя. Также мы зададим для формы выравнивание к правому краю (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;