Реферат: Раздвижные двери CSS
#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}
Перед добавлением левого фонового изображения сделаем паузу и посмотрим, что мы имеем к этой минуте, в примере 1. (Не обращайте внимания на правило, которое я применил к элементу body в файле примера. Оно лишь задает основные значения для полей, отступов, цветов и текста.)
- - -
Теперь мы можем разместить левое изображение впереди правого, применив его к ссылке (нашему внутреннему элементу). Сразу же добавим отступ, чтобы отодвинуть текст от краев закладки:
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}
Результат показан в примере 2. Наши закладки начали обретать форму. В этом месте обратимся к смущенным пользователям IE5/Mac, которые задают себе вопрос: «Что здесь вообще происходит? Закладки сложены в вертикальную стопку и растянуты по ширине на весь экран.» Не беспокойтесь, скоро дойдем и до вас. А пока просто следите за происходящим или временно переключитесь на другой браузер и будьте уверены—скоро мы решим проблему IE5/Mac.
- - -
Теперь, когда картинки для простых закладок заняли свое место, зададим изображения для текущей закладки. Сделаем это, обратясь к элементу списка с id="current" и ссылке внутри него. Так как мы не меняем никаких свойств фона кроме фоновых изображений, будем использовать свойство background-image:
#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
В нижней части наших закладок нам нужна какая-то обводка. Но применение свойства border к родительскому #header не позволит нам «просочить» текущую закладку через эту границу. Вместо этого мы создадим новое изображение с нужной нам обводкой по его нижнему краю. И пока мы работаем с этим изображением, добавим легкий градиент, чтобы это выглядело так:
Мы применим это изображение к фону нашего контейнера #header (вместо заданного ранее желтого цвета), сдвинем его вниз контейнера и назначим фоновый цвет, совпадающий с верхним цветом созданного градиента. Мы также уберем добавленный изначально отступ для элемента body и добавим отступ в 10 пикселей к верхней, левой и правой частям элемента ul:
#header {