RTFM! статьи, советы, скрипты
::Заработок с помощью сайта ::JScript по-русски! ::Все русские мануалы::
МЕНЮ
О САЙТЕ
НОВОСТИ
СТАТЬИ
КНИГИ
АППЛЕТЫ
СВЯЗЬ

СЧЕТЧИКИ
Rambler's Top100
Рейтинг@Mail.ru
Яндекс цитирования

Позиционирование.CSS-2

Автор: М. Дубаков Сайт: http://www.webmascon.com/     Рейтинг: N/A из 7       <<НАЗАД
   
   
   Обтекаемость плавающей модели
   Плавающая модель в теории вещь крайне простая и понятная. В CSS существует возможность создавать блоки, которые будут не следовать друг за другом, как в нормальном потоке, а прилипать к краю контейнера, выстраиваясь в колонки.
   
   При плавающей модели блок вырывается из нормального потока и смещается максимально вверх и влево (или вправо). Получается, что если, скажем, создать три блока, суммарная ширина которых не превышает 100%, то получится три колонки.
   
   Для объявления блока плавающим имеется свойство float, которое может принимать значения left и right. Как вы догадываетесь, значения определяют сторону, к которой блоки будут прилипать. Сразу небольшой пример для наглядности. Создадим три блока с толстой рамкой, которые образуют колонки на основе плавающей модели:
   
   DIV {border: 3px solid #DDD; margin: 3px}
   #menu {width: 20%; float: left}
   #main {width: 40%; float: left}
   #news {width: 25%; float: left}
   . . .
   <div id="menu">меню</div>
   <div id="main">текст</div>
   <div id="news">новости</div>
   
   Плавающая модель выглядит вполне привлекательно. Пока возникает один вопрос, как сделать так, чтобы блок переносился под все остальные? Это как раз та ситуация, на которой мы споткнулись при абсолютном позиционировании. В плавающей модели есть свойство clear, которое позволяет располагать блок ниже всех плавающих блоков. Свойство clear принимает следующие значения:
   
   left: блок перемещается ниже всех плавающих блоков с объявлением float: left
   right: блок перемещается ниже всех плавающих блоков с объявлением float: right
   both: блок перемещается ниже всех плавающих блоков
   Давайте дополним наш пример таким блоком.
   
   #copy {width: 90%; clear: left}
   . . .
   <div id="menu">меню</div>
   <div id="main">текст<br><br><br></div>
   <div id="news">новости</div>
   <div id="copy">копирайт</div>
   
   В блок main я вставил несколько переводов строк, чтобы увеличить его высоту. Для теста так можно делать. В результате блок copy будет расположен ниже всех остальных блоков.
   
   При создании плавающих блоков есть только одно важное правило:
   
   ПРАВИЛО
   Для плавающих блоков надо всегда задавать ширину, потому что в противном случае блок будет растягиваться, чтобы вместить в себя все содержимое.
   
   Раз уж плавающая модель оказалась простой понятной, давайте попробуем применить ее к нашему многострадальному примеру. Как и раньше, будем пользоваться правильной блоковой моделью, то есть код адаптирован для браузеров Mozilla и Opera. Позже я покажу, как внести в код кросс-браузерность. За основу будем брать код, который был написан при попытке сверстать макет на основе абсолютного позиционирования.
   
   Как обычно, начнем с шапки. Сам HTML-код совершенно не изменится: все те же блоки с логотипом и т.п. Но зато поменяется CSS-код. Для двух верхних блоков он станет вот таким:
   
   #top-left {
    width: 487px;
    background: url(i/bd.gif) repeat-x 0px 49px;
    padding-left: 30px;
    float: left}
   
   #top-right {
    width: 233px;
    padding-top: 49px;
    float: left}
   
   В блоке top-left появилось только одно объявление, которое делает блок плавающим, и исчезло объявление высоты блока. Оказывается, что высота блока в данном случаен ни на что не влияет. В блоке top-right я убрал все свойства абсолютного позиционирования и тоже включил для блока плавающую модель. Но раньше мы задавали смещение от верхнего края, а у плавающей модели такого свойства нет. Значит смещение надо реализовать другим способом. Обычно смещение можно сделать с помощью отступа, в данном случае верхнего padding-top.
   
   После таких изменений два верхних блока будут в браузере выглядеть совершенно так же, как при абсолютном позиционировании, то есть правильно. Далее между верхними блоками и центральными блоками имеется пространство. Для того, чтобы быть уверенным в том, что центральные блоки начнутся после верхних блоков, не помешает создать блок со свойством clear. Заодно он будет отбивать блоки:
   
   .space {clear: left; height: 20px}
   
   В HTML-коде блок с классом space будет находится между верхними и центральными блоками:
   
   . . .
   <div id="top-right">
    <div class="rectangle"></div>
    <img src="i/news.gif" width="59" height="9" border="0" alt="">
   </div>
   <div class="space"></div>
   <div id="main-left">
   . . .
   
   Давайте быстро разберемся с центральными блоками. HTML-код для них тоже не изменится, а стили станут вот такими:
   
   #main-left {
    width: 125px;
    float: left}
   #main {
    width: 364px;
    padding: 0px 14px;
    float: left}
   #main-right {
    font: 10px Verdana;
    width: 233px;
    float: left}
   
   Свойства абсолютного позиционирования заменены на свойства плавающей модели. Кроме того, опять возникает необходимость сделать отступы между центральным блоком и двумя крайними. Проще всего задать левый и правый отступы только для центрального блока, что и сделано объявлением padding: 0px 14px.
   
   Как видите, в целом можно заметить, что CSS-код для плавающей модели компактнее, чем для абсолютного позиционирования.
   
   Сейчас как раз настал момент, когда можно отлично заметить, для чего необходимо свойство clear. Давайте не будем вставлять блок с таким свойством между центральными блоками и нижним блоком. Блок bottom-left сделаем плавающим:
   
   #bottom-left {width: 233px; float: left}
   
   Блок bottom-left позиционируется совершенно правильно. Он смещается максимально вверх и прилипает к другому плавающему блоку main. Так и должен себя вести любой приличный плавающий блок. Но нам такого не надо, нам надо расположить нижний блок под всеми остальными. Поэтому в HTML-коде после всех центральных блоков мы вставляем блок с классом space.
   
   Осталось только сделать блок с копирайтом:
   
   #bottom-right {
    background: url(i/bd.gif) repeat-x;
    font: 10px Verdana;
    width: 237px;
    padding-left: 280px;
    float: left}
   
   Используем черную точку для создания фоновой черной линии, затем задаем шрифт для копирайта, устанавливаем ширину и большой левый отступ, чтобы правильно позиционировать текст внутри блока. В итоге в браузере Mozilla макет выглядит отлично. Ура, можно наливать шампанское!
   
   Давайте, правда, шампанским немного повременим, потому что впереди у нас адаптация кода для браузера Internet Explorer. Нам надо исправлять блоковую модель, а точнее, задавать для данного браузера другие значения свойств width там, где используются отступы. Таких блоков у нас всего три: top-left, main и bottom-right. Еще раз сформулирую задачу: для браузера Internet Explorer необходимо установить ширину с учетом отступов, а для всех остальных браузеров оставить текущие значения ширины. То есть нам пригодится решение, которое позволяет разделить код для двух таких типов браузеров. Решение, к счастью, есть. Если заключить значение свойства в кавычки, то его не будут воспринимать браузеры Mozilla и Opera. Например, если мы напишем:
   
   A {border: "1px solid #000"}
   
   То рамки вокруг ссылок сделает только браузер Internet Explorer. В нашем случае нечто подобное надо сотворить с шириной. Давайте подумаем. Начнем думать на примере блока main:
   
   #main {
    width: 364px;
    padding: 0px 14px;
    float: left}
   
   Сначала посчитаем, какую ширину надо задать для браузера Internet Explorer. Раз ширина содержания 364 пикселя, а ширина отступов (левого и правого) 28 пикселей, то ширина должны быть 264+28=392 пикселя. Отлично, делаем следующее. Для браузера Mozilla оставляем первым текущее объявление ширины. А сразу вслед за ним вставляем объявление ширины для браузера Internet Explorer, но заключенное в кавычки!
   
   #main {
    width: 364px; width: "392px";
    padding: 0px 14px;
    float: left}
   
   В итоге получается, что браузер Mozilla прочитает первое значение, но проигнорирует второе. А браузер Internet Explorer прочитает и первое, и второе значения, но значение, указанное в коде позже, переписывает первое значение! Вот таким простым, с одной стороны, но весьма элегантным способом решается проблема блоковой модели. Конечно, способов множество, но это наиболее эффективный. Совершенно аналогичным образом добавляем объявления для остальных двух блоков:
   
   #top-left {
    background: url(i/bd.gif) repeat-x 0px 49px;
    width: 487px; width: "517px";
    padding-left: 30px;
    float: left}
   #bottom-right {
    background: url(i/bd.gif) repeat-x;
    font: 10px Verdana;
    width: 237px; width: "517px";
    padding-left: 280px;
    float: left}
   
   Все, после этого вид макета во всех браузерах правильный, и уж точно можно открывать шампанское (у вас в холодильнике обязательно должна лежать бутылочка для подобных моментов).
   
   Наверное, многие из вас с удивлением обнаружат, что вес документа изменился незначительно. Действительно, достаточно часто заявляется, что применение стилей значительно сокращает размер кода. Однако в нашем случае правило не сработало. Отчасти это связано с тем, что макет достаточно простой, но все же обычно экономия не бывает очень большой.
   
   За счет чего же плавающая модель выигрывает по сравнению с табличной версткой? Самое главное преимущество – уменьшение сложности и повышение логичности. Значительно сократилось использование картинок и очень сильно упростился чистый HTML-код. Да, добавились стили, которые сами по себе не являются простыми, но произошло качественное разделение структуры и представления документа. Теперь HTML-код описывает структуру, а CSS-код – представление. Сразу скажу, что разделение не стопроцентное, но очень даже значительное.
   
   
   


<<НАЗАД      ОЦЕНИТЬ СТАТЬЮ    ВЕРСИЯ ДЛЯ ПЕЧАТИ>>
Статья прочитана :  раз.




пейкюлю



 
 
 
 
 
pauk ©® 2000-2015. All rights reserved.
При перепечатке ссылка на сайт и указание обязательны.
Мнение администрации сайта не всегда совпадает с мнением автора.
Орфография и пунктуация - авторские.
Администрация не несет никакой ответственности за использование материалов.
.
Protected by Copyscape DMCA Takedown Notice Infringement Search Tool