Главная | Обратная связь | Поможем написать вашу работу!

Пример 3.11. Абсолютное позиционирование

XHTML 1.0CSS 2.1CSS 3IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> Позиционирование </title> <style type="text/css" >. layer1 { width: 217px; /* Ширина слоя */ height: 512px; /* Высота слоя */ background: url( images/bg2.png ) no-repeat; /* Фоновая картинка */ position: absolute; /* Абсолютное позиционирование */ right: 20%; /* Положение справа */ bottom: 0; /* Положение снизу */ }.layer2 { background: #000; /* Цвет фона для IE */ background: rgba( 0,0,0, 0.5 ); /* Цвет фона с полупрозрачностью */ color: #fff; /* Цвет текста */ position: absolute; /* Абсолютное позиционирование */ bottom: 30px; /* Положение снизу */ width: 207px; /* Ширина слоя */ padding: 5px; /* Поля */ } </style> </head> <body> <div class="layer1" > <div class="layer2" > Позвоночник человека </div> </div> </body></html>

Результат данного примера показан на рис. 3.21. Браузер IE до версии 9.0 не поддерживает формат RGBA для цвета.

Рис. 3.21. Положение слоя на странице

Обратите внимание, что абсолютно позиционированный элемент может выходить за верхний и левый край окна браузера, при этом не возникает полос прокрутки. Также при использовании свойства position ширина слоя автоматически приравнивается ширине контента плюс, как обычно, ширина отступов, границ и полей.

Использование float

Свойство float превращает элемент в плавающий, при этом он прижимается к левому или правому краю родителя, а текст его обходит с других сторон. Такое поведение текста напоминает поток воды, обтекающий камень, поэтому элементы с таким поведением и называются плавающими. В отличие от абсолютно позиционированных плавающие элементы не обладают властью над координатами, их не получится заставить встать в точно заданную точку, но они имеют ряд примечательных характеристик. Настолько, что свойство float для вёрстки стало использоваться повсеместно. Перечислим лишь ряд возможных приложений:

галереи небольших фотографий;
двух и трёхколоночные макеты;
горизонтальные меню;
иллюстрации в тексте;
многоколоночный текст.

float может добавляться к изображениям (тег <img>), блочным элементам вроде <p>, <div> и к строчным элементам (<span>, <a>, <strong>). В примере 3.12 показано использование float для абзаца с фотографией.

Пример 3.12. Плавающий элемент

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

Результат примера показан на рис. 3.22.

Рис. 3.22. Плавающий элемент

Свойство float лишь частично влияет на элемент в потоке. Можно управлять положением по горизонтали, меняя значение float с right на left, но по вертикали положение элемента задаётся его местом в коде.

Блочные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,..., <h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

Блоки располагаются по вертикали друг под другом.
На прилегающих сторонах элементов действует эффект схлопывания отступов.
Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1> Заголовок </h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a> Заголовок </a></h1>.
По ширине блочные элементы занимают всё допустимое пространство.
Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
Текст по умолчанию выравнивается по левому краю.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет <div> как универсальный кирпичик вёрстки. Тег <div> допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь <div>. В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега <div>

<div id="container" > <div id="intro" > <div id="pageHeader" > <h1><span> css Zen Garden </span></h1> <h2><span> The Beauty of <acronym title="Cascading Style Sheets" > CSS </acronym> Design </span></h2> </div> <div id="quickSummary" > <p class="p1" ><span> A demonstration of what can be accomplished visually through <acronym title="Cascading Style Sheets" > CSS </acronym> - based design. Select any style sheet from the list to load it into this page. </span></p> </div> </div></div>

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри <div> располагается два тега <p> и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0CSS 2.1IE 7IE 8IE 9Cr 12Op 11Sa 5Fx 5

Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги <p>, а пунктиром — анонимный блок.

Рис. 3.23. Блоки в документе

⇐ Предыдущая 1 2 3 456 7 8 9 10 Следующая ⇒

Воспользуйтесь поиском по сайту: