Все HTML-элементы на веб странице располагаются в общем потоке, сверху вниз (для блочных элементов) и слева на право (для строчных элементов). Такой способ отображения мало эффективен, но благодаря CSS предоставляется возможность изменить дизайн в лучшую сторону.
Плавающие элементы
Когда вы определяете плавающий элемент, вам нужно расположить его в коде прямо под тем элементом, под которым он должен "плавать", всё остальное содержимое расположенное в коде под плавающим элементом будет обтекать его на веб-странице. Рассмотрим более подробно то, как браузеры загружают плавающие элементы и остальное содержимое на веб-страницу.
Cначала браузер загружает элементы на страницу в обычном порядке, двигаясь сверху вниз, когда он встречает плавающий элемент, то размещает его с указанной стороны. Браузер исключает этот элемент из общего потока, и в результате он "плавает" на странице.
Поскольку плавающий элемент был исключён из общего потока, то остальные блочные элементы, расположенные в коде после него, загружаются на страницу так, будто этого элемента там и не было. Обратите внимание, что блочные элементы располагаются под плавающим элементом, это происходит потому, что плавающий элемент больше не является частью общего потока.
Если вы внимательно посмотрите на рисунок, то увидите, что в отличие от блочных, при размещении строчных элементов или простого текста, расположенного внутри блочного элемента, учитываются границы плавающего элемента, поэтому строчные элементы и текст обтекают его.
Имейте ввиду, что в одном ряду можно размещать несколько плавающих элементов, если это позволяет ширина родительского элемента.
Примечание: элементы с абсолютным и фиксированным позиционированием игнорируют свойство float.
С помощью CSS свойства float картинка была сделана плавающей с левой стороны.
Текст, расположенный в HTML коде ниже картинки, будет обтекать картинку
по правой и нижней стороне.
Для создания пустого пространства между картинкой и текстом, обтекающим ее, нужно добавить к картинке внешние отступы . Поскольку картинка смещена к левой границе родительского элемента, достаточно будет добавить внешние отступы только справа и снизу, чтобы слегка отодвинуть от нее текст:
Img { float: left; margin: 0 10px 10px 0; } Попробовать »
Отмена обтекания
Иногда требуется отобразить элемент таким образом, чтобы на него не влияли плавающие элементы, расположенные перед ним. Таким элементом к примеру может быть нижний колонтитул, который в любом случае должен отображаться под всеми остальными элементами страницы. Если у вас на странице высокое боковое меню, расположенное с левого края веб-страницы, то нижний колонтитул может подняться вверх и отображаться справа от него. Таким образом, вместо того, чтобы располагаться страницы, содержимое нижнего колонтитула появится на одном уровне с боковым меню. Данная проблема решается, с помощью свойства clear , которое сообщает браузеру о том, что стилизуемый элемент не должен обтекать плавающий.
Для CSS свойства clear можно установить одно из значений:
- left - плавающие элементы запрещены с левой стороны.
- right - плавающие элементы запрещены с правой стороны.
- both - плавающие элементы запрещены с обеих сторон.
- none - разрешает наличие плавающих элементов с обеих сторон.
С помощью свойства clear установлено, что плавающие элементы запрещены с правой стороны. Текст, расположенный ниже картинки, не будет обтекать картинку по левому краю.
Отмена обтекания блоков (float) наиболее часто встречающаяся операция при верстке HTML страниц. Мы рассмотрим все известные способы отменить действие CSS свойства float.
Прежде чем мы углубимся в методы очистки потока, давайте взглянем на проблему, которую мы пытаемся решить.
Типичный случай HTML верстки
Блоки .el-1 и .el-2 размещаются бок о бок внутри контейнера .container , и один элемент .main следует после .container :
Мы хотим, чтобы высота контейнера .container была равной высоте самого длинного из его дочерних элементов (т.е. либо .el-1 , либо .el-2 ) и чтобы блок .main , чтобы был после блока .container .
А вот, что мы видим: .container (черная рамка) схлопнулся, как будто в нем ничего нет, блок .main (блок с рыжим фоном) находится под блоком .container , как мы и хотели, но при этом он прячется за блоки .el-1 (с желтым фоном) и .el-2 (с розовым фоном). Черт знает что! Видел бы это мой начальник - непременно сказал бы мне,- "Используй, Шурик, табличную верстку" . К счастью, времена, когда web-страницы верстались таблицами уже давно прошли и мы отлично обойдемся и без них. Не верите? Читайте дальше.
Несмотря на то, что многие считают это багом браузера, - это всего лишь принцип, по которому работают плавающие элементы. Следовательно нам нужно заставить родительский элемент расширяться, чтобы полностью вмещать дочерние элементы. Тогда, следующие элементы будут располагаться под контейнером.
Способ 1: метод старой школы
Как вам известно, CSS свойство clear устанавливает с какой стороны элемента запрещено его обтекание другими элементами, следовательно это свойство может предотвратить налезание элементов поверх плавающих. Идея заключается в следующем: вставьте пустой элемент, который свойство clear под обтекаемыми блоками. Это использовать определенный класс для подобного элемента - давно устоявшаяся традиция, так что вы можете использовать его в вашем HTML. Вот классический CSS код:
Clear { clear: both; }
Который применим к нашей HTML верстке:
Наш демо-пример, реализуемый с помощью этого метода:
Если вас не волнует схлопывающийся контейнер, а только неправильно расположенный блок .main , то вы можете также поместить "очищающий поток" элемент после контейнера. Но, если вы решите сделать так, то гораздо проще будет просто добавить свойство clear самому элементу .main .
Это простой и понятный метод. Тем не менее, в современной верстке практикуется отделение контента от стиля, поэтому лучше его не использовать.
Способ 2: свойство overflow
Используя свойство overflow в теге .container , мы можем заставить контейнер расшириться до высоты размещенных элементов. Наш CSS будет выглядеть следующим образом:
Container { overflow: hidden; /* или "auto" */ }
Наш HTML останется таким же, каким и был изначально, без дополнительных элементов. Вот, что мы получим в итоге:
К сожалению, у этого метода есть недостаток: любой дочерний элемент, который выступает за пределы контейнера, будет либо обрезан (в случае overflow: hidden;), либо вызовет появление полос прокрутки (в случае overflow: auto;).
Способ 3: класс “clearfix”
Мы создаем класс .clearfix с псевдо-элементами ::before и ::after и задаем им display: table , что создает анонимную ячейку таблицы. Этот класс будет использоваться для очищения плавающих элементов. CSS код выглядит так:
Clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; /* ie 6/7 */ }
Изменим немного HTML код добавив к классу container класс clearfix :
Вот результат работы наешго новвого класса:
если вам не нужна поддержка браузеров ниже IE8, то наш код значительно сократится:
Clearfix:after { content: ""; display: table; clear: both; }
Способ 4: значение contain-floats для min-height
Container { min-height: contain-floats; }
Этот код дает практически тот же эффект, что и clearfix, или overflow, но с помощью одной строки кода и, к тому же он лишен тех недостатков, о которых мы говорили ранее. К сожалению, пока ни один из браузеров не поддерживает это свойство, так что просто имейте его ввиду.
Итак, у вас есть целый набор различных «clearfix» методов. Применение класса .clearfix стало стандартом, и я очень рекомендую использовать его вместо прежних двух методов.
Влад Мержевич
Плавающими будем называть такие элементы, которые обтекаются по контуру другими объектами веб-страницы, например, текстом. Правильнее говорить «обтекаемые элементы», но с другой стороны термин «плавающий элемент» давно уже прижился, так что его и буду использовать в дальнейшем.
Плавающие элементы достаточно активно применяются при вёрстке веб-страниц и служат для реализации этих и не только задач:
- обтекание картинок текстом;
- создание врезок;
- горизонтальные меню;
- колонки.
Обтекание происходит с помощью стилевого свойства float со значением left или right . По умолчанию обтекание для элементов не устанавливается, но если это по каким-либо причинам необходимо указать явно, следует использовать значение none . На рис. 3.32 показан результат применения разных значений на изображение рядом с текстом.
Рис. 3.32. Обтекание картинки текстом
Сам HTML-код остаётся практически неизменным и привёден в примере 3.21.
Пример 3.21. Использование float
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt ut lacreet dolore
magna aliguam erat volutpat. Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
В данном примере показано добавление свойства float
со значением left
к тегу
. Это значение выравнивает элемент по левому краю родителя или другого плавающего элемента, а все остальные элементы, вроде текста, обтекают его по правой стороне. Значение right
, наоборот, выравнивает элемент по правому краю родителя или другого плавающего элемента, а все остальные элементы, вроде текста, обтекают его по левой стороне.
Итак, с терминологией разобрались. Давайте дополним пример 3.21, чтобы рисунок лучше гармонировал с текстом. Самое главное - задать отступ справа от изображения и на всякий случай снизу. Для этого к тегу
добавляется класс с именем fig
, у которого установлено свойство margin
, оно одновременно определяет свой отступ на каждой стороне изображения (пример 3.22).
Пример 3.22. Обтекание картинки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Винни-Пух был всегда не прочь немного подкрепиться, в
особенности часов в одиннадцать утра, потому что в это время
завтрак уже давно окончился, а обед еще и не думал начинаться.
И, конечно, он страшно обрадовался, увидев, что Кролик достает
чашки и тарелки.
Результат примера показан на рис. 3.33.
Рис. 3.33. Рисунок с выравниванием по левому краю и обтеканием по правому
Создание врезок
Врезкой называется блок с рисунками и текстом, который встраивается в основной текст. Врезка обычно располагается по левому или правому краю текстового блока, а основной текст обтекает её с других сторон (рис. 3.34).
Рис. 3.34. Вид врезки
Чтобы врезка выделялась в тексте, у неё обычно устанавливают фоновый цвет и добавляют рамку. По своему виду врезки напоминают приведённый выше способ обтекания текстом картинки, поэтому код для создания врезок практически идентичен предыдущему (пример 3.23).
Пример 3.23. Добавление врезки
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
— инструмент Magic Erase.
По своему действию похож на инструмент Magic Wand, но в отличие от него, не выделяет область, а стирает ее.
Инструмент Magic Erase (Волшебный ластик) стирает пикселы близкие по цвету. Если мы работаем со слоем Background или со слоем, прозрачность на котором заблокирована, пикселы заменятся на фоновый цвет. Во всех остальных случаях мы получим прозрачную область.
Принцип работы с инструментом Magic Erase напоминает работу с инструментом Magic Wand. А именно, вначале устанавливаем подходящее значение Tolerance, включаем флажок Anti-aliased для создания плавных границ, убираем флажок с параметра Contiguous для одновременного удаления всего фона, после чего щелкаем по фотографии в районе неба. Если слой Background был предварительно переименован, мы получим прозрачные участки в нужных местах.
При создании врезок следует обязательно указывать её ширину с помощью свойства width . Иначе размер слоя окажется гораздо шире, чем это требуется.
Расположение слоев по горизонтали
По умолчанию блочные элементы выстраиваются по вертикали один под другим, но при помощи свойства float их можно заставить располагаться рядом по горизонтали. При этом требуется установить ширину слоёв и задать для них float . Если ширина не указана, она будет равна содержимому слоя с учётом полей и границ. В примере 3.24 взят каталог товаров, созданный в предыдущем разделе с помощью строчно-блочных элементов, и переделан под использование float . Чтобы блоки были заметны, фон веб-страницы установлен серым.
Пример 3.24. Блоки по горизонтали
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Компьютеры и орг.техника 4296
Мобильные устройства 2109
Фото 315
Видео 1856
Результат примера показан на рис. 3.35.
Рис. 3.35. Расположение слоев при использовании свойства float
Из-за разного текста в подписи высота блоков также получается разной, из-за чего некоторые блоки «цепляются» за другие и не переходят на другую строку. Здесь может помочь установка высоты всех блоков через свойство height , например 100px или возврат к использованию display : inline-block .
Влияние обтекания
Свойство float кроме способности по созданию плавающих элементов имеет ряд особенностей, о которых необходимо знать. Главная особенность в том, что float действует на все близлежащие элементы, заставляя их участвовать в обтекании. Рассмотрим это на примере 3.25, где показано создание стрелок на одной строке с использованием значений left и right свойства float .
Пример 3.25. Влияние обтекания
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Хотя для текста и стрелок используются разные блочные элементы, которые должны располагаться на разных строках, влияние float заставляет подниматься текст выше, поскольку он попадает в зону обтекания (рис. 3.36). Также не отображается цвет фона у слоя arrow из-за того, что плавающие элементы не участвуют в потоке документа, по сути, это аналогично тому, что слой arrow оставить пустым.
Рис. 3.36. Влияние обтекания на нижележащий текст
Плавающие элементы не оказывают влияние на высоту блока, в котором они находятся. Чтобы это обнаружить, достаточно обвести блок рамкой и поместить внутрь плавающий элемент с текстом (пример 3.26).
Пример 3.26. Высота блока
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Рисунок не оказывает воздействие на высоту слоя и выходит за его пределы (рис. 3.37).
Рис. 3.37. Высота слоя с плавающим элементом
Все эти особенности плавающих элементов могут оказать довольно неприятное воздействие на макет веб-страницы, особенно в случаях подобным перечисленным выше. Основной способ добиться желаемого результата - это в нужный момент отменить обтекание. Для этого есть несколько способов.
Отмена обтекания
Обтекание это мощный инструмент вёрстки, применяемый для выравнивания и упорядочивания элементов. Однако чтобы держать этот инструмент под контролем, необходим противовес, без которого огромный потенциал float сужается до пары узких задач. Речь идёт об отмене обтекания с помощью разных методов. Перечислим четыре наиболее популярных.
Ширина элемента
Если плавающий элемент будет занимать всю доступную ширину, то остальные элементы, следующие за ним, будут начинаться с новой строки. Для этого надо включить свойство width со значением 100%. Так, стиль в примере 3.25 можно дополнить следующим образом:
Left { float: left; width: 50%; } .right { float: right; width: 50%; text-align: right; }
Каждый слой со стрелкой теперь занимает ширину 50% и в сумме они дают 100% ширины, поэтому абзац, идущий после слоя arrow , начнётся с новой строки.
Этот метод применяется редко, поскольку ширину нельзя применить к изображениям, к тому же он не решает проблему с высотой слоя и его фоном.
Использование overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров. Значение auto в частности, добавляет полосы прокрутки при необходимости, а hidden отображает только область внутри элемента, остальное скрывает. Кроме этого, использование overflow со значением auto , scroll или hidden отменяет действие float . Стиль для примера 3.25 дополняется всего одной строкой:
Arrow { overflow: hidden; }
Результат после применения свойства overflow сразу меняется (рис. 3.38).
Рис. 3.38. Влияние свойства overflow на фон
Аналогично дополняется пример 3.26:
DIV { overflow: hidden; }
Результат показан на рис. 3.39.
Рис. 3.39. Влияние свойства overflow на границу
overflow одно из самых популярных свойств работающее в связке float . Но иногда возникают ситуации, когда применение этого метода недопустимо. Это происходит в тех случаях, когда элемент выходит за пределы элемента, при этом он будет «обрезан». В примере 3.27 картинка сдвигается влево от своего исходного положения.
Пример 3.27. Обрезание области элемента
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Винни-Пух в гостях у Кролика
Результат примера показан на рис. 3.40.
Рис. 3.40. Обрезание картинки
В IE6 метод работает только при установленном свойстве hasLayout . Чтобы его включить, можно добавить zoom : 1 наряду со свойством overflow .
Свойство clear
Для отмены действия float применяется свойство clear со следующими значениями.
- left - отменяет обтекание с левого края элемента (float : left ). При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.
- right - отменяет обтекание с правой стороны элемента (float : right ).
- both - отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется отменить обтекание элемента, но неизвестно точно с какой стороны.
Чтобы отменить действие обтекания, свойство clear надо добавлять к элементу, идущему после плавающего. Обычно вводят универсальный класс, к примеру, clear и вставляют пустой тег
Пример 3.28. Использование clear
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
В данном примере для класса clear установлено свойство clear со значением both . Если вам требуется использовать разные значения, то можно ввести несколько классов и применять их по необходимости.
Этот метод также является одним из самых популярных в вёрстке в силу простоты и универсальности. Но опять же иногда возникают комбинации, в которых использование clear даёт сбой. Это происходит, когда в коде встречается одновременно несколько разных плавающих элементов. Так, в примере 3.29 с помощью float создаются две колонки, а в правой колонке float упорядочивает фотографии.
Пример 3.29. Использование float
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Меню
Лучшие фотографии
По комментариям
Софийский собор
Польский костёл
Новая строка
Результат примера показан на рис. 3.41. Свойство clear действует не только на класс photo , но и на класс col1 , т.е. на все элементы выше, у которых установлено float . Поэтому «Новая строка» начинается не сразу же после фотографий, а после завершения левой колонки.
Рис. 3.41. Ошибка с отображением строки
В подобных ситуациях помогает комбинация разных методов. Так, фотографии можно добавить в контейнер с overflow и удалить clearleft . Колонка приобретёт следующий вид.
Новая строка
Псевдоэлемент:after
Частое включение пустого тега
Clearleft:after { content: "."; /* Выводим текст после элемента (точку) */ clear: left; /* Отменяем обтекание*/ visibility: hidden; /* Прячем текст */ display: block; /* Блочный элемент */ height: 0; /* Высота */ }
Какой именно выводить символ значения не имеет, он в любом случае скрывается от пользователя через visibility , но даже будучи скрытым, текст при этом занимает какую-то высоту и влияет на близлежащие элементы. Поэтому выводимый текст ещё необходимо превратить в блочный элемент и задать ему нулевую высоту.
Поскольку текст, генерируемый через псевдоэлемент :after , располагается после элемента, он с лёгкостью заменяет конструкцию
. Там, где она требуется достаточно только добавить класс clearleft , как показано в примере 3.30.Пример 3.30. Псевдоэлемент:after
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Винни-Пух в гостях у Кролика
Браузер IE не поддерживает :after до версии 7.0 включительно, поэтому приведённый пример в этих версиях работать не будет. Добавление zoom : 1 к плавающему элементу отменяет обтекание в IE.
Удобство приведённого метода заключается в использовании класса clearleft , который при необходимости добавляется к любому тегу. Также можно ввести дополнительные классы, стиль у которых будет различаться другими значениями clear .
Использование картинок в html-страничке всегда более информативно и наглядно, по-сравнению со сплошным текстом.
Вставить картинку в html-текст возможно несколькими способами и в классике этих способов 3:
- выравнивание изображения по центру
- обтекание изображения текстом
- размещение изображения в поле
Выравнивание изображения по центру
Для выравнивания изображения по центру колонки текста, проще всего тег поместить в контейнер
Для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега
Как это реализовано, смотрите в примере 1.
Пример 1. Выравнивание рисунка по центру
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок по центру</ title > <style type = "text/css" > </ style > </ head > <body > <p class = "cimg" > <img src = "images/sample.gif" width = "200" height = "100" alt = "Иллюстрация" > </ p > </ body > </ html > |
В данном примере к контейнеру
Добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание изображения текстом
Обтекание изображения текстом - один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.
Рис. 2. Рисунок выровнен по левому краю страницы и обтекается текстом справа
Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега
- vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).
Пример 2. Обтекание изображения текстом с использованием HTML
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок в тексте</ title > </ head > <body > <p > <img src = "images/sample.gif" width = "100" height = "200" alt = "Иллюстрация" align = "left" vspace = "5" hspace = "5" > </ p > </ body > </ html > |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right — выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).
Пример 3. Обтекание изображения текстом с использованием CSS
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок в тексте</ title > <style type = "text/css" > </ style > </ head > <body > <p > <img src = "images/sample.gif" width = "100" height = "200" alt = "Иллюстрация" class = "cimg" > Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </ p > </ body > </ html > |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Здесь к тегу добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.
Изображение на поле
При таком формате размещения изображения в документе обтекание изображения происходит только с одной стороны. Данный способ размещения напоминает двух колоночную структуру, где в одной колонке размещается картинка, а во второй — текст.
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рисунок 3).
Рис. 3. Размещение изображения в поле слева от текста
Я знаю два способа создать подобную структуру — с помощью HTML-тегов
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок на поле</ title > <style type = "text/css" > </ style > </ head > <body > <table width = "100%" cellspacing = "0" cellpadding = "0" > <tr > <td class = "leftcol" > <> </ td > <td valign = "top" > </ td > </ tr > </ table > </ body > </ html > |
|
Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. |
то, что получится в результате показано на рисунке 4.
Рис. 4. Изображение на поле слева от текста
В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается - 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте — vertical-align: top.
CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя
Пример 5. Размещение изображения на поле с слоев и CSS-стилей
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <code > <html > <head > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > <title > Рисунок на поле</ title > <style type = "text/css" > </ style > </ head > <body > <div id = "pic" > <img src = "images/igels.png" width = "90" height = "78" alt = "Вы не поверите, но это ёжик" > </ div > <div id = "text" > Ёжики защищены от внешней агрессии колючим панцирем, который спасает их от тех, кто хочет поживиться вкусным и нежным мясом ежа. Но не стоит считать это животное и совершенно безобидным, все-таки это хищник. Да, он не питается волками и лисами, но только потому, что уступает им в размерах. А вот закусить червячком или даже змеей ему вполне под силу. </ div > </ body > </ html > |
Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.
P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.
Наличие изображений на веб-страницах улучшает их внешний вид, привлекает внимание, а также способствует лучшему восприятию текстов. Обтекание картинки текстом html позволяет связать контент с иллюстрациями и рационально разместить материал. Постоянно разрабатываются новые способы создания изображений, позволяющие воплощать творческие идеи. При этом новые стили макетов основаны на одних и тех же способах, создающих безграничный простор фантазии.
Позиционирование картинок относительно текста может производиться в html или с помощью свойств CSS.
Теги html: обтекание картинки текстом
Картинки располагают на странице тремя способами:
- центральное положение;
- обтекание текстом;
- вставка в поле.
При большом размере картинку располагают посередине страницы, сначала поместив в контейнер < p > тега img, после чего для него устанавливают атрибут align="center". Если часто используют изображение, следует применять стиль CSS к тегу < p >.
Когда изображение небольшое, рядом располагают текст. Способ является наиболее распространенным. Обтекание текстом делают несколькими способами. Но сначала картинку нужно вывести на экран. Если к ней известен путь, например, "foto1.jpg", ее вставляют на html страницу с помощью следующей записи:
< p>< img src =" foto1.jpg ">< /p>
Пример соответствует случаю, когда файлы html и рисунка находятся в одной папке.
Если за изображением следует текст, он будет располагаться ниже. Это не всегда удобно, поскольку по бокам будут оставаться пустые места, Поэтому страницу оформляют так, чтобы создать обтекание картинки текстом html. Для этого у тега img существует атрибут align, задающий расположение фото или рисунка относительно текста. От этого параметра зависит, с какого края страницы располагается графический материал и каким образом его обтекает текст.
Атрибуту можно задавать следующие значения:
- left - перемещение картинки влево при обтекании текстом справа;
- right - обтекание изображения слева при его размещении справа;
- bottom - значение по умолчанию, когда картинка располагается слева, первая строка текста начинается на уровне нижней ее части;
- top - изображение размещается аналогично предыдущему значению, но первая строка расположена по его верхнему уровню;
- middle - начальная строчка текста проходит напротив середины изображения.
У тега img есть параметры, которыми можно задавать расстояние от текста до картинки (hspace и vspace). Без их применения текст будет располагаться к картинке вплотную. Кроме того, выбираются габаритные размеры рисунка width и height. При этом должна соблюдаться пропорция между шириной и высотой. Если габариты не задавать, по умолчанию рисунок переносится с размерами исходника, что не всегда удобно.
Перемещение изображения к левому краю с его обтеканием текстом можно сделать с помощью записи:
< p>< img src =" foto1.jpg " align="left" width=150 height=100 hspace=5 vspace=5>Текст< /p>
Применение таблиц
Обтекание картинки текстом html легко делать с помощью таблицы, внутри ячейки которой помещается изображение. Здесь свойство align применяется для тега table. Таблицы имеют больше управляемых параметров, что создает для них преимущества:
< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= "foto2.jpg" width=150 height=100>
< /table >
Граница таблицы делается невидимой и не позволяет тексту приблизиться к изображению. Отступы между ячейками и внутри них могут регулироваться.
Использование стилей
Из предыдущих примеров видно, как просто сделать обтекание картинки текстом html. CSS позволяет достигнуть аналогичных результатов. Обтекание создают с помощью свойства float. Здесь также выравнивание обеспечивается значениями left и right.
Для этого создается класс и ему присваиваются стили CSS:
margin: 5px 12px 3px 0px;
Затем стилевое свойство float добавляется к селектору img:
< img src= "foto1.jpg" class="fotoleft" >
Кроме выравнивания изображения с помощью значения left, здесь также устанавливаются отступы текста от картинки свойством margin. Аналогично делается обтекание текста слева, если применить свойство right.
Стили позволяют накладывать текст непосредственно на изображение. Для этого текст вставляется в блок с полупрозрачным фоном, который накладывается на картинку.
Делать эффектное обтекание текстом и его накладывание на изображения не так уж трудно, поскольку этого добиваются последовательными экспериментами.
Обтекание изображений округлой формы текстом html
Веб-страницы состоят преимущественно из прямоугольных областей. Всем известно, как сделать обтекание картинки текстом в html. Стили применяют для создания геометрических фигур, но они не связаны с укладкой контента внутри или снаружи элементов. Можно рисунок разделить на 2 части и разместить с обеих сторон блоки отступов разной ширины. За ними сразу располагается текст.
Процесс создания подобного обтекания является трудоемким, и его надо делать отдельно для каждого нового рисунка.
Обтекание текстом сложных фигур
Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.
Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.
Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:
shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */
< p>Пример текста< /p>
Код создает круг, идеально обтекаемый текстом.
Аналогично будет создаваться любая неправильная форма, благодаря поддержке Photoshop, который позволит получить CSS код фигуры.
Заключение
При построении макетов страниц с применением разных способов размещения на них изображений и текста можно создавать уникальный дизайн. Для этого необходимо освоить основные правила верстки, обеспечивающие обтекание картинки текстом html.
