На этой странице:
В рассмотренных ниже примерах рамка и внутренний отступ не задаются, поэтому в трюке Целика необходимости нет.
Абсолютное позиционирование можно использовать при проектировании дизайна гипертекстовой страницы. Рассмотрим несколько типичных примеров.
Страница состоит из четырёх абсолютно позиционированных областей фиксированной ширины:
Размеры выбраны с учетом размещения без горизонтальной прокрутки в окне шириной в 640 пикселов.
Файл 10p33.css
/* 1. Заголовок и логотип */ .title { position: absolute; left:0px; top:0px; width: 610px; height: 60px; background: #06DFE1; } /* 2. Меню */ .menu { position: absolute; left:0px; top:60px; width: 100px; background: #FFE3CC; } /* 3. Основное содержимое */ .contents { position: absolute; left:100px; top:60px; width: 320px; background: #FFF2A6; } /* 4. Новости */ .news { position: absolute; left:420px; top:60px; width: 190px; background: #E5E5E5; }
Файл 10p33.htm
В предыдущем примере ширина всех блоков на страницы была фиксирована. Вот почему, такой макет был назван “жёстким”.
Рассмотрим пример “резинового” дизайна, при котором ширина области зависит от содержимого и ростом последнего стремится занять всю доступную ширину окна.
Макет состоит из трёх абсолютно позиционированных областей:
Ширина области с основным содержимым не указывается, и эта область будет растягиваться до правой границы окна браузера.
Файл 10p34.css
/* 1. Заголовок и логотип */ .title { position: absolute; left:0px; top:0px; height: 60px; background: #06DFE1; } /* 2. Меню */ .menu { position: absolute; left:0px; top:60px; width: 100px; background: #FFE3CC; } /* 3. Основное содержимое */ .contents { position: absolute; left:100px; top:60px; background: #FFF2A6; }
Файл 10p34.htm
Плавающий блок — это блок, с заданным свойством float.
Если задано значение left, блок прижимается к левой границе родительского элемента, остальные элементы обтекают блок справа.
Если задано значение right, блок прижимается к правой границе родительского элемента, остальные элементы обтекают блок слева.
Чтобы прекратить обтекание, нужно после плавающего блока поместить элемент со свойством clear. У этого свойства имеются следующие значения:
Разработчики активно используют плавающие блоки при проектировании дизайна своих страниц. Рассмотрим несколько примеров.
Добавим в рассмотренный ранее макет резинового дизайна плавающий блок для отображения колонки новостей:
Файл 10p35.css
/* 1. Заголовок и логотип */ .title { position: absolute; left:0px; top:0px; height: 60px; background: #06DFE1; } /* 2. Меню */ .menu { position: absolute; left:0px; top:60px; width: 100px; background: #FFE3CC; } /* 3. Основное содержимое */ .contents { position: absolute; left:100px; top:60px; background: #FFF2A6; } /* 4. Новости */ .news { float:right; width: 190px; background: #E5E5E5; }
Файл 10p35.htm
Построим макет страницы на 5 блоках. Блоки не будут позиционироваться, но блоки 2, 3, 4 будут плавающие с “прилипанием” слева и с заданием ширины соответственно в 16, 52, 31 процент от ширины окна документа (родительского элемента):
Файл 10p36.css
/* 1. Заголовок и логотип */ .title { background: #06DFE1; } /* 2. Меню */ .menu { float:left; width: 16%; background: #FFE3CC; } /* 3. Основное содержимое */ .contents { float:left; width: 52%; background: #FFF2A6; } /* 4. Новости */ .news { float:left; width: 31%; background: #E5E5E5; } /* 5. Автор */ .author { clear:left; background: #00FFBF; }
Файл 10p36.htm