Список налезает на картинку, рисунок или изображение при обтекании его текстом. Например так: картинка выравнивается по левому краю (всплывает налево) - float:left; , текст списка обтекает её справа, как на скриншотах. При обтекании картинки, (нумерация, маркировка) списка наползают на изображение и получается трабл (trouble , англ. - «ошибка», «проблема»). Щёлкайте картинки для полного просмотра:

Напрашивается простой способ подправить ситуацию - увеличить отступ (margin) у картинки до тех пор, пока бу́ллеты списка не «слезут с неё»

В случае простого увеличения отступа (margin) у рисунка, вместе со списком - «уезжает» вправо и обычный текст

Оставим картинку в покое и займёмся списком, за пределы которого вылезает его маркировка. Корень проблемы кроется в редко используемом свойстве элемента списка . Это свойство определяет положение (размещение) маркеров списка относительно его текста. list-style-position имеет два значения: outside - маркер (бу́ллет) находится за границей элемента списка, как отдельный независимый объект и inside - маркер расположен внутри элемента (маркер встроен в элемент и обтекается его текстом).

Значение list-style-position по умолчанию, для всех браузеров - outside . Маркер находится за границей элемента списка, как отдельный независимый объект. Вот потому-то он и «лезет» на нашу картинку. Margin (отступ) картинки «упирается рогом» непосредственно в текст списка, а бу́ллеты «зависают» за его пределами и попадают на поле изображения. Радикально меняет обстановку с обтеканием рисунка списком предлагаемый CSS-код:

li {
  margin: 0;
  padding-left: 1,9em;
  list-style-position: inside;
  text-indent: -1em;
  overflow: hidden;
  }

Прописать спасительный код для элемента списка (

  • ) можно глобально (как в примере), или с присвоением индивидуального класса, например.list (код CSS .list ol>li,.list ul>li{list-style-position: inside;} ). В первом случае, код для обтекания картинки будет распространяться глобально - на все списки на странице, во втором - только на списки класса list (class=”list”).

    Разница большая:

    • При назначении глобальных свойств, действующих сразу на все списки на странице - изменяются элементы управления, созданные на основании этих свойств и списков. В результате - «уезджают» меню и менюшки навигации сайта.
    • В случае с индивидуальным классом, вида (class=”list”) - его придётся вставлять вручную в html-код требуемых списков.
    • Выручает «золотая середина» - найти в шаблоне класс текстового блока страницы и назначить свойства обтекания рисунков только для его списков. Тогда, в тексте новости (сообщения, комментария) страницы - списки будут красиво обтекать картинки и изображения, а остальная часть сайта - останется неизменной.

    Прописанное свойство для элемента списка (

  • ) слегка отражается на свойствах самого списка (теги
      ,
        ). Оно и вестимо, ведь «втянув» маркёр внутрь списка и сделав отступ для его отображения (padding-left: 1,9em;) мы визуально уменьшили ширину списка на 1,9em. Подобная мелочь с успехом исправляется в CSS, в свойствах списков (теги
          ,
            ). Примечательно, что изменение отступа для списка никак не отражается на его обтекании рисунка

            Перед началом работы со списком по данной теме, неплохо ему задать рамку (свойство border:2px solid #000;). Это позволит наглядно увидеть расположение бу́ллетов «до» и «после» редактирования.

            Интересный эффект обтекания картинки даёт простое использование для списка CSS-свойства overflow: hidden; . В этом случае - обтекание выполнится нормально, но у списка будут отсутствовать маркёры (бу́ллеты). Иногда, именно такой эффект и требуется получить. Пример кода для обтекания рисунка списком, с простым overflow: hidden;

            Код CSS для элементов списка

            li {overflow: hidden;}

            Код CSS для всего списка
            (глобально, для всей страницы):
            ul,ol {overflow: hidden;}

            Подобные извращения с overflow: hidden; навеяны вышестоящим кодом. На самом деле, такого-же эффекта можно достичь простым list-style: none; Это CSS-свойство убирает маркеры списка без всяких там «обрезаний». Кроме этого, свойство работает в любой ситуации, тогда как overflow: hidden; - только в сочетании с list-style-position: outside; - когда списка находятся за пределами текста списка.

            Сверстать блок, состоящий из картинки и текста, причем текст не должен обтекать картинку.

            Слева правильно, справа — нет

            Дополнительное условие: ширина ни текста, ни картинки строго не определена. При отсутствии картинки текст занимает всю отведенную ширину.

            Решение

            Текстовый блок

            Пробуем написать стили. С левой колонкой все ясно:

            Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ }

            Теперь рисунок стал слева, а текст обошел его справа. Но если текста больше, он будет «подныривать» под рисунок (см. картинку выше), а этого-то нам и не нужно.

            Первое, что приходит в голову — «зафлоатить» и текст. Но в этом случае, если не прописать ширину текст упадет под рисунок!

            float:left/right будет требовать ширину — иначе ничего не получиться!

            Думаем дальше… Хорошим решением может показаться.description{ : XXXpx}. Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все-таки задан. Предположим, это резиновый блок новостей. Картинка не может быть шире, скажем 200px, а уже текст тянется и занимает всю оставшуюся ширину.

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

            Запретить обтекание можно просто добавив :hidden; для текстовой колонки. Тем самым мы установим для нее новый контекст форматирования (подробнее эта тема скоро будет раскрыта).

            Единственный браузер, который среагирует на это неправильно — это конечно IE6. Специально для него колонке устанавливаем , например «флоатим» (ширину при этом задавать не понадобится).

            Итак, решение поставленной задачи выглядит так:

            Photo { float: left; /* задаем обтекание */ margin:10px; /* отступ для красоты */ display:inline; /* для IE6, чтоб отступ слева не удвоился */ } .description{ overflow:hidden; } * html .description{ float:left; }

            Как всегда, в боевых условиях вместо используем .

            Всем привет. В прошлых уроках мы научились вставлять в текст картинки и . Однако, нерешенной осталась одна проблема. Для того, чтобы страница выглядела красиво и привлекательно, картинка должна обтекаться текстом. Решить эту проблему средствами html и css мы сегодня попробуем.

            Как настроить обтекание картинки текстом с помощью html.

            Как мы помним, картинка в текст вставляется следующим образом:

            Для того, чтобы прижать ее к левому краю страницы, и заставить текст обтекать ее справа мы добавляем в код следующий параметр:

            Как видите, за позиционирование картинки на странице и соответствующие «обтекание» её текстом отвечает атрибут align . Для того, чтобы прижать картинку к правому краю и сделать, чтобы текст обтекал ее слева нужно выставить значение этого атрибута:

            Как настроить обтекание картинки текстом с помощью css.

            Данное свойство редко задается напрямую через html. Намного чаще, позиционирование картинки и обтекание ее текстом задается в файле style.css. Это можно сделать, задав изображению класс, и описав этот класс в css.

            Класс мы задаем следующим образом.

            class=" picture " />

            Идентификатор класса » picture » может быть любым. Главное, чтобы он совпадал в html документе и таблице стилей. Собственно говоря, в таблице стилей (т.е файле style.css) необходимо прописать следующее свойство

            Picture {

            Float:left; /* Выравнивание по левому краю */

            Для того, чтобы сделать выравнивание вправо:

            Picture {

            Float:right; /* Выравнивание по правому краю */

            Margin: 7px 7px 7px 0; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/

            Ну вот, в общем, и все. Не забывайте писать в комментария насколько вам помогла эта статья, а также ставьте лайки.

            Как сделать обтекание картинки текстом в HTML и CSS - 4.4 out of 5 based on 16 votes

            Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.

            Обтекание картинки текстом при помощи HTML

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

            Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: . Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:

            Где foto.jpg - это относительный путь к картинке..jpg

            У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align="left" по левому краю). Атрибут align имеет следующие значения:

            • left - изображение будет расположено по левому краю, а текст будет обтекать его справа;
            • right - изображение расположится справа, а текст будет обтекать его слева;
            • bottom - отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
            • top - тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
            • middle - при данном значении происходит выравнивание середины изображения по базовой линии строки.

            Теперь рассмотрим каждый элемент на практике.

            1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:

            2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:

            3. Для выравнивания изображения по правому краю нужно соответственно прописать:

            4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.

            5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.

            Обтекание картинки текстом при помощи свойств CSS

            На самом деле, те примеры создающей обтекание текста и позиционирование картинки, которые мы рассмотрели выше являются немного устаревшими, сейчас принято все элементы отвечающие за внешний вид страницы делать при помощи свойств и значений CSS.

            Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.

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

            Теперь классу leftfoto нужно присвоить определенные CSS стили.

            Leftfoto{ float:left; margin: 4px 10px 2px 0px; }

            Данный код располагают между тегами ..., заключив в теги или помещают во внешний файл стилей CSS.

            Разберем те элементы, которые мы здесь задали:

            • float:left; - мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align="left".
            • margin: 4px 10px 2px 0px; - мы задали внешние отступы, 4px - от верха, 10px - справа, 2px снизу и 0px слева от изображения.