... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Слои в CSS. Выпадающее меню. (стр.2)

 

 


Свойство 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>&nbsp;||&nbsp;
<A HREF="#">Фильмы</A>&nbsp;||&nbsp;
<A HREF="#">Статьи</A>&nbsp;||&nbsp;
<A HREF="#">Обзор</A>&nbsp;||&nbsp;
<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;
}

 

Страница: - 1 - | - 2 - | - 3 - | - 4 - | - 5 - | - 6 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены