Раздвижные двери CSS
Информация - Компьютеры, программирование
Другие материалы по предмету Компьютеры, программирование
ум два способа расположения группы объектов в один ряд. У каждого есть свои преимущества и недостатки. Оба требуют обращения к довольно сложным аспектам CSS, в результате можно быстро запутаться. Первый способ использует строчные элементы, второйсвойство float.
Первый способвозможно более распространенныйпредполагает изменение свойства display на inline (строчный). Строчный метод привлекателен своей простотой. Однако он приводит к проблемам в реализации нашего метода Раздвижных дверей в некоторых браузерах. Второй способ, на котором мы и сосредоточим наше внимание, использует плавающую модель для выстраивания элементов списка в горизонтальный ряд. Плавающая модель, однако, тоже может разочаровать. Ее противоречивое поведение порой нарушает всю мыслимую логику. Но все же общее понимание того, как справляться с несколькими плавающими элементами и знание надежных способов выхода из плавающего ряда (или его заключения в контейнер) может сотворить чудеса.
Мы попробуем поместить несколько плавающих элементов внутрь другого плавающего элемента-контейнера. Это надо сделать так, чтобы внешний родительский плавающий элемент полностью окружил внутренние плавающие элементы. Тогда мы сможем добавить позади наших закладок фоновый цвет или фоновое изображение. Важно помнить, что положение следующего за закладками элемента должно быть восстановлено при помощи CSS-свойства clear. Тогда плавающие закладки не смогут влиять на расположение других элементов страницы.
Начнем со следующего кода:
На практике блок #header мог бы содержать например, еще логотип и форму для поиска. В нашем примере мы сократим значение href для каждой ссылки до “#”. Понятно, что в реальной жизни вместо этого значка будет указан путь к файлу или папке.
Начнем работу с CSS с присвоения свойства float контейнеру #header. Это дает гарантию того, что контейнер в действительности вмещает элементы списка, которые тоже будут плавающими. Так как мы сделали #header плавающим, нам нужно присвоить ему ширину в 100%. Мы также добавим временный желтый фон, чтобы убедиться, что этот родительский элемент растягивается на всю ширину позади закладок. Ну и наконец зададим несколько основных шрифтовых свойств, чтобы обеспечить единство внешнего вида элементов:
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}
Мы также зададим нулевое значение для полей и отступов элементов ul и li и уберем маркер списка. Для всех элементов списка напишем объявление float:left:
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
Для ссылок мы зададим блоковое отображение с тем, чтобы контролировать происходящее, не беспокоясь о строчной модели:
#header a {
display:block;
}
Затем мы добавим наше правое фоновое изображение к элементу списка (изменения и добавления показаны полужирным шрифтом):
#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 {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;<