Свойство margin-top:0рх на первый взгляд кажется ненужным, но
оно помогает устранить различия в размерах абзацных отступов, которые
установлены в разных браузерах. В результате задания этого свойства
расстояние от верхнего края окна до заголовка будет одинаково во всех
браузерах. Отступ справа в 0.5 em сделает заголовок аккуратнее.
Теперь займемся строкой меню. Она будет располагаться прямо под заголовком. Стиль этого блока будет следующим:
#menu {
background-color: #C0C0C0;
border-bottom: 1px solid;
border-top: 1px solid;
padding: 2px 10px;
position: absolute;
top: 50px;
width: 100%;
}
|
Строка меню будет шириной на весь экран, сверху и снизу будет тонкая
черная граница. Весь блок будет сдвинут вниз на 50 пикселей, что
совпадает с высотой блока #head. Чтобы текст не прилипал к краям
блока, создаем отступы. Сверху и снизу поменьше, всего 2 пикселя, с
боков по 10 пикселей. Все отступы задаем именно в пикселях, а не в
каких-либо других относительных единицах, для того чтобы эти размеры не
зависели от базового размера шрифта, установленного в браузере, или от
каких-либо других параметров. Здесь как никогда нам нужна точность
позиционирования текущих элементов и будущих блоков подменю.
HTML-код меню будет содержать только ссылки на разделы, разделенные
двумя горизонтальными линиями и оформленные следующим образом:
<DIV ID="menu">
<A HREF="#">Главная</A> ||
<A HREF="#">Фильмы</A> ||
<A HREF="#">Статьи</A> ||
<A HREF="#">Обзор</A> ||
<A HREF="#">Форум</A>
</DIV>
|
Стиль для ссылок внутри блока #menu должен определить параметры
шрифта, зафиксировать цвет и размер шрифта в пикселях, полужирное
начертание и убрать подчеркивание.
#menu A {
color: Navy;
font: bold 13px Tahoma, sans-serif;
text-decoration: none;
}
|
И последний блок, где располагается основной текст страницы, должен
находиться ниже двух предыдущих на 80 пикселей. Правило для него будет
следующим:
#content {
font-size: 0.8em;
padding: 0.5em;
position: absolute;
left: 0px;
top: 80px;
}
|
|