Предыдущая страница реферата | 1  2  3  4  5  6  7  8 | Следующая страница реферата

Первый способ—возможно более распространенный—предполагает изменение свойства display на «inline» (строчный). «Строчный» метод привлекателен своей простотой. Однако он приводит к проблемам в реализации нашего метода Раздвижных дверей в некоторых браузерах. Второй способ, на котором мы и сосредоточим наше внимание, использует плавающую модель для выстраивания элементов списка в горизонтальный ряд. Плавающая модель, однако, тоже может разочаровать. Ее противоречивое поведение порой нарушает всю мыслимую логику. Но все же общее понимание того, как справляться с несколькими плавающими элементами и знание надежных способов «выхода» из плавающего ряда (или его заключения в контейнер) может сотворить чудеса.

Мы попробуем поместить несколько плавающих элементов внутрь другого плавающего элемента-контейнера. Это надо сделать так, чтобы внешний родительский плавающий элемент полностью окружил внутренние плавающие элементы. Тогда мы сможем добавить позади наших закладок фоновый цвет или фоновое изображение. Важно помнить, что положение следующего за закладками элемента должно быть восстановлено при помощи CSS-свойства clear. Тогда плавающие закладки не смогут влиять на расположение других элементов страницы.

Начнем со следующего кода:

 

 Home

 News

 Products

 About

 Contact

 

На практике блок #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;

Рекомендуем скачать другие рефераты по теме: доклад, контрольные работы 2 класс.





Предыдущая страница реферата | 1  2  3  4  5  6  7  8 | Следующая страница реферата