Поплавки.Эх рыбалка.. хорошо бы было сейчас закинув удочку посидеть на каком ни будь тихом пруду под пенье птиц и шорох камыша.. сидишь себе наблюдаешь за поплавком, потягиваешь пивко, где то неподалёку горит костер.. запах ухи смешавшись с ароматами разнотравья кружит голову и ты окунаешься в нирвану.. в мир спокойствия и гармонии.. Ладно, будем считать, что отдохнули перед очередной порцией информации.. и хотя в этой главе речь пойдёт о поплавках диалоги будут вовсе не о рыбалке.. Итак, свойство float - что поделаешь, этому свойству, при переводе с английского не придумали более точного определения, нежели чем "поплавок". А элемент с таким свойством называют "всплывающим" Теперь побольше конкретики и примеров.. Обтекание элементаСвойство float определяет, по какой стороне будет выравниваться - всплывать элемент, при этом остальные элементы будут обтекать его с других сторон. Выравнивание элемента происходит по краям родительского элемента или же по краям окна браузера. Значения свойства float:
Небольшой пример: заставим текст обтекать фотографию по правому краю при этом сам блок с фотографией "всплывёт" с левой стороны. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>float</title> </head> <body> <div style="border: solid 1px black; width: 220px"> <div style="float: left;"> <img src="graphics/fon.jpg"> </div> Текст в этом блоке обтекает рисунок помещённый в контейнер div с правой стороны, так как сам блок с рисунком, с помощью свойства float с значением left, "всплывает" слева. </div> </body> </html> А вот в примере ниже показано как могут располагаться элементы относительно друг друга, если свойство float присвоено нескольким элементам Пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>float</title> </head> <body> <div style="float: right; background: #c5ffa0; border: solid 1px black; padding: 10px; width: 420px"> <span style="float: left; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по левому краю</span> <span style="float: right; background: #c0e4ff; border: solid 1px black; padding: 5px; width: 150px">блок выровнен по правому краю</span> содержание блока div обтекает выровненные элементы span слева и справа </div> </body> </html> Запрет обтеканияСвойство clear запрещает обтекание элемента с левой и/или правой стороны. Если для элемента установлено обтекание с помощью свойства float то clear отменяет обтекание данного элемента с указанных сторон. Значения:
Вот пример где clear отменяет действие float <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>clear</title> </head> <body> <div style="background:#cc0; width:150px; height: 50px; float:left;">Этот блок всплывает слева.</div> <div style="background:#c0c; width:150px; height: 100px; float:left;">И этот блок всплывает слева.</div> <div style="background:#0c0; width:300px; height: 80px; clear:left;">А этот блок отменяет обтекание с левой стороны.</div> </body> </html> Блочная вёрстка.В довершение главы акцентирую Ваше внимание на еще одном способе верстки сайта, ранее в учебнике HTML я приводил примеры верстки страницы при помощи таблиц и фреймов, теперь имея накопленный багаж знаний, настало время познакомить Вас с блочной версткой сайта, используя блоки div и свойства CSS. Разберём классический макет верстки сайта из трёх колонок, а так же "шапки" и "подвала".. в котором правая и левая колонки имеют фиксированную ширину, а центральная колонка "резиновая" т.е. занимает собой всё оставшееся место. Взгляните на пример: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title>Блочная вёрстка</title> </head> <body style="background: #cc0; margin:0;"> <div style="clear:both; background: #0c0; padding: 5px;">Логотип</div> <div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div> <div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div> <div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание<br><br><br><br><br> И ещё куча текста..</div> <div style="clear:both; background: #0c0; padding: 5px;">Подвал</div> </body> </html> Что было понятно "расшифрую" каждую строчку из примера выше: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Блочная вёрстка</title> </head> - Думаю понятно..:) стандартное начало любой страницы.. <body style="background: #cc0; margin:0;"> - Используем margin:0 для того чтобы обнулить поля в окне браузера. <div style="clear:both; background: #0c0; padding: 5px;">Логотип</div> - Создаём контейнер с будущим логотипом и запрещаем его обтекание с обеих сторон, используя clear:both, теперь что бы не случилось, последующие блоки будут идти снизу, а шапка сайта как ей и положено будет располагаться сверху. <div style="float: left; background: #c0c; padding: 5px; width: 170px">Меню</div> - Левая колонка с "Меню" выровнена по левому краю свойством float: left и имеет фиксированный размер в 170 пикселей. <div style="float: right; background: #c0c; padding: 5px; width: 170px">Реклама</div> - Правая колонка с рекламой выровнена по правому краю свойством float: right; и тоже имеет фиксированный размер 170 пикселей. <div style="margin:0 180px; background: #0cc; padding: 5px;">Основное содержание</div> - Центральная колонка никак не выравнивается, но занимает своё место по центру, так как имеет широкие поля слева и справа margin:0 180px, тем самым не накладываясь на правую и левую колонки. Почему поля 180 пикселей, а не 170 в соответствии с ширенной колонок "Меню" и "Реклама"? Отвечаю: потому что кроме ширины width: 170px эти колонки имеют ещё и отступы со всех сторон padding: 5pxскладываем 170+5+5=180 - такая вот арифметика.. <div style="clear:both; background: #0c0; padding: 5px;">Подвал</div> - Ну и "подвал" блок, в котором, как правило, располагаются контактные данные и авторские права, так же как логотип запрещает на всякий случай обтекание слева и справа clear:both и тем самым устремляется вниз страницы. </body> </html> - Это нужно "расшифровывать"? :) В данном примере стилевое описание блоков div происходит с помощью атрибута style - на самом деле это глупо.. привел такой пример, что бы просто понятнее было разобраться в коде, а вообще при блочной верстке обычно назначают каждому блоку свой идентификатор id (см. Глава 6 Классы и идентификаторы.)и всё это дело с остальными потрохами выносят в отдельный css файл.. Полезные советы:
|
