Как сделать HTML Обтекание картинки и Видео текстом
Здравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!
В этой статье Вы узнаете, как сделать HTML обтекание картинки текстом, а на десерт я покажу, как применить такой же эффект к видеоматериалам Вашего ресурса.
Не знаю почему, но половина разработчиков шаблонов для WordPress, при их создании игнорируют вставку функции обтекание картинки текстом. Сделано это специально или нет, мне узнать не удалось. Зато, нашлось лекарство для лечения этого недуга.
Итак.
Как сделать HTML обтекание картинки текстом.
Если, разработчик шаблона для вордпресс поленился довести до ума своё детище, то при вставке изображения в тело поста оно будет выглядеть следующим образом:
Конечно, это смотрится не очень красиво. Поэтому, нам нужно сделать обтекание картинки текстом.
Для этого, откройте папку с Вашей активной темой оформления, найдите файл — «style.
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
display:block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
a img.alignright {
float:right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float:left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.
wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin:0;
max-width: 98.5%;
padding:0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}
wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin:0;
max-width: 98.5%;
padding:0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0;
padding:0 4px 5px;
}
Теперь, всем изображениям добавятся новые стили, и они будут выглядеть так:
Таким образом, мы исправили косяк разработчика шаблона.
Но это ещё не всё.
Как сделать HTML обтекание видеороликов текстом.
При вставке видеоматериала в тело поста, с ним происходит та же беда, что и с картинками. Как и картинки, видео не обтекается текстом. На деле, это выглядит так:
Чтобы это исправить, открываем на редактирование уже знакомый файл — «style.css» и в самом конце добавляем новый стиль:
#video-wrap {
float: left;
margin: 0 20px 5px 0;
}
Теперь, при размещении нового видеоматериала, нужно, в WordPress открыть HTML-редактор и обернуть его код следующим образом:
<div>Код Вашего видео</div>
После этих манипуляций, вновь вставленное видео, будет отображаться намного симпатичнее:
Вот такие простые способы помогут решить проблемы с обтеканием картинок и видеоматериалов Вашего ресурса печатным текстом.
Если, Вы знаете другие варианты, как сделать HTML обтекание картинки текстом, то обязательно напишите о них в комментариях.
Так же Вам понравится:
Всем кому понравилась статья, предлагаю подписаться на обновления блога, чтобы получать уведомления о выходе нового материала на свой адрес электронной почты.
На сегодня это всё. До новых статей…
С уважением, Денис Черников!
Обтекание картинки текстом — HTML и css – WP-Club
Очень важно красиво разместить все элементы на странице, чтобы всё смотрелось органично и стояло на своих местах. Чтобы сделать всё правильно нельзя обойтись без CSS. Чтобы притянуть картинку к левому краю дописываем атрибут align=left после .jpg» и закрываем скобки />, чтобы притянуть картинку вправо аналогично вставляем align=right. Конечно, текст обтекает картинку, но отступов он сам не сделает, поэтому в любом случае необходима работа с CSS. Существует много способов решения данной проблемы, рассмотрим самые правильные и несложные варианты.
Первый вариант
Заключите нужное изображение в тег div, затем откройте файл CSS и придайте ему вот это значение: float: left (right = лево-право на ваше усмотрение) и проставьте нужные отступы.
Второй вариант
Присвойте нужному изображению класс. В CSS добавьте поля float: left (right). Margin: 15px 15px 15px 0 — длина отступа: сверху, справа, снизу (отступ к которому прижимается текст к картинке, по умолчанию равен нулю). Случается, что нужно оформить несколько изображений на одной странице. К примеру, изображения находятся в посте. В коде страницы он отображается приблизительно вот так:
<div class=content></div>
В файле CSS, в этом примере необходимо дописать:
.content img {
float: left;
margin: 10px 10px 10px 0;
}
После этого, все картинки в элементе «content» будут отображаться с заданными вами отступами. А если понадобиться одну картинку выставить по-другому — задайте id (id=your_img), а в CSS допишите:
#your_img {
float: right;
margin: 5px 0 5px 5px;
}
Как наложить на картинку текст
Иногда нужно написать текст прямо на изображении, что-то ввиде анонса или назвния.
Как и в прошлом случае способов несколько:
Первый вариант
Сделайте блок, вставьте в него текст, саму картинку сделайте фоном данного блока.
<div>Ваш-текст</div>
.my_block {
(фон-картинка): url (your_image.jpg) — адрес изображения top left no-repeat;
(ширина): 300px;
(высота): 200px;
(заполнение): 250px 1 1 1;
}
Этот вариант подойдёт и для логотипа, и для шапки.
Второй вариант
Сразу создать два блока, первый с картинкой, второй с текстом (сделайте полупрозрачный фон). И наложить один на другой задав необходимые параметры.
<div>
<img src=»любая-ваша-картинка.jpg» />
<div>Любой-текст</div>
.img {
(ширина изображения): 300px;
(высота изображения): 200px;
(заполнение): относительное;
}
.text {
background-color (цвет фона): #AAA;
(ширина): 300px;
(высота): 30px;
(положение): абсолютное;
(влево): 0px;
(вправо): 500px;
}
В этом примере первый блок размещен внутри второго при помощи свойства под названием position.
У блока с текстом задан нужный фон и сам внедрён в нижнюю часть картинки.
На самом деле здесь нет ничего сложного. Сделать красивое обтеканием текстом, а также наложить нужные слова на изображения достаточно просто. Необходимо немного времени. чтобы вникнуть во все эти тонкости и внимательно следовать приведённым ниже инструкциям.
Не бойтесь экспериментировать с дизайном, делайте ваш сайт ещё красивее, подбирайте лучший вариант, и тогда ваш сайт, и вы как его владелец добьётесь успеха.
Источник
Все что нужно знать для работы с сайтом
Быстрая навигация по этой странице:
Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.
Общее решение задачи
CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.
Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.
Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?
Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.
Для начала присвоим нашему изображению класс:
<img src="моя_картинка.jpg" />
Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:
.img_class {
float: left;
margin: 10px 10px 10px 0;
}
Свойство margin требуется для того, чтобы задать отступы текста от картинки — иначе он вплотную к ней прижмется, что будет не очень красиво. При этом мы задаем их сверху, справа и снизу, а левый отступ ставим равным нулю — так как само изображение будет находиться слева.
Массовое применение для всех изображений
Если требуется, чтобы все изображения в документе выравнивались по левому краю, тогда этот вопрос можно решить сразу на уровне того блока (элемента) страницы, в котором они находятся — чтобы не прописывать каждый раз class для изображения. Даже небольшая экономия трафика того стоит.
Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.
В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:
.content img {
float: left;
margin: 10px 10px 10px 0;
}
Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):
#my_img {
float: right;
margin: 10px 0 10px 10px;
}
Накладываем текст на изображение
Порой необходимо, чтобы текст был написан прямо на изображении — например, часто бывает красиво, если сделать большую картинку к статье, а на ней написать название статьи или какую-то аннотацию.
Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.
Во-первых, можно создать блок, в котором будет написан текст, а изображение будет выступать фоном для этого блока:
<div>Текст, который будет наложен на картинку</div>
.my_block {
background: url (my_img.jpg) top left no-repeat;
width: 500px;
height: 300px;
padding: 400px 0 0 0;
}
В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.
Данный метод особенно хорошо подходит для элементов дизайна (шапка, логотип сайта), в которых уже заранее известен и размер изображения, и текст, который будет написан.
Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):
<div> <img src="моя_картинка.
jpg" />
<div>Текст, который будет наложен на картинку</div>
</div>
.img {
width:500px;
height: 300px;
position: relative;
}
.text {
background-color: #FFF;
width: 500px;
height: 50px;
position: absolute;
left: 0px;
top: 450px;
}
В приведенном примере мы разместили один блок внутри другого с помощью свойства position — блок с текстом будет иметь белый фон и располагаться в нижней части изображения.
Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!
Картинки в HTML
Раздел: Сайтостроение / HTML /
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
>>> Вёрстка сайта с нуля 2.
0 >>>
Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто пропустил, то см. эту статью здесь.
Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые
полезные атрибуты тега <img>, а также “фишки” использования рисунков.
Обтекание рисунка текстом в HTML
Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:
Для выравнивания картинки в тексте в теге <img> можно
применить атрибут align.
Выравнивание как раз и позволяет добиться обтекания картинки текстом.
Стандарты HTML определяют пять значений для атрибута align:
left— выравнивание по левому краюright— выравнивание по правому краюtop— выравнивание по верхнему краюbottom— выравнивание по нижнему краю (это значение по умолчанию)middle— выравнивание по середине
Если вы не используете атрибут align, то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).
Некоторые браузеры могут поддерживать и другие значения, но мы о них говорить не будем, поскольку это уже за рамками стандарта.
Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение
атрибута align должно быть равно left. Это немного странно, если думать о выравнивании текста.
Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.
Пример выравнивания картинки по левому краю (обтекание текстом справа):
<img src="images-in-html.jpg" align="left">
А вот так примерно это будет выглядеть в браузере:
Рамка вокруг рисунка в HTML
Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку
вокруг рисунка. Для этого можно использовать атрибут border. Делается это примерно так:
<img border="5" src="warning.png">
Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.
Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут
border не указан.
Поэтому, чтобы быть уверенным в том, что
рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.
Атрибуты hspace и vspace
Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.
Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты
hspace и vspace, которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:
<img src="images-in-html.jpg" align="left"
hspace="50" vspace="10">
В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:
Картинка в заголовке HTML
Иногда требуется вставить картинку в заголовок.
Сделать это несложно. Например:
<h3><img src="warning.png" alt="!!!"> Очень важно</h3>
А выглядеть это будет примерно так:
И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.
О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.
А если хотите знать больше и прямо сейчас, то изучите курс о вёрстке сайтов.
|
Как создать свой сайт
Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты… Подробнее… |
img обтекание текстом html | Все о Windows 10
На чтение 6 мин.
Просмотров 1 Опубликовано
В этой статье мы разберем варианты, как сделать обтекание картинки текстом. Всего есть несколько способов. Рассмотрим каждый из них. Для начала советую ознакомиться со статье html тег , чтобы иметь базовые знания по изображениям на html страницах.
1. Обтекание с помощью стилей тега
Картинку можно выровнять только оперируя со стилями CSS тега . Как известно синтаксис тега допускает в атрибутах задавать выравнивание изображения:
где VALUE может принимать значения
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- bottom — выравнивание по первой строке текста (это значение стоит по умолчанию)
- top — выравнивание по верхней строке текста
- middle — выравнивание по базовой строке текста
Вот как это будет выглядеть на странице:
Картинка как бы слиплась с текстом, поэтому сделаем отступы.
Причем есть два варианта как это можно сделать.
Вариант 1.1. Через свойство CSS — hspace и vspace
Для этого в атрибутах тега добавляем два значения:
Вот как это будет выглядеть на странице:
Атрибут hspace задает горизонтальный отступ в пикселях, vspace – соответственно вертикальный
Вариант 1.2. Через свойство CSS — padding и margin
Для этого в атрибутах тега добавляем два значения:
Вот как это будет выглядеть на странице:
Выглядит лучше за счет того, что мы не стали делать отступ слева. Вместо margin можно использовать padding , эффект будет аналогичный.
Использование свойства float вместо align
Помимо свойства align в атрибутах тега в стилях есть CSS свойство float , которое также отвечает за выравнивание. Синтаксис следующий:
Например, если написать в предыдущем примере вывод картинки следующим образом:
То это преобразуется в следующее:
Благодаря float можно задавать единый class для картинок, что очень даже удобно.
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
Решение
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float , добавляемого к селектору IMG . Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению.
Поэтому в примере введёно универсальное свойство margin , которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, с
Как обернуть текст вокруг изображения.
Есть два простых способа сделать так, чтобы текст автоматически обтекал изображение, размещенное на веб-сайте. Один включает небольшой фрагмент кода в строке HTML, которая ссылается на изображение, а другой метод включает немного CSS.
HTML-метод
Начнем с HTML. В вашем HTML-документе у вас должен быть контейнер, будь то таблица или раздел, содержащий абзац текста. Сразу над этим текстом будет разметка для вашего изображения.Например:
Lorem ipsum dolor sit amet ...
Этот код отображает изображение с именем image.jpg над текстом. Что мы хотим сделать, так это выровнять его по правой стороне абзаца, чтобы он находился внутри текста. Мы делаем это, задавая значение align в тегах .
Lorem ipsum dolor sit amet...
И теперь наше изображение будет отображаться в тексте так:
Метод CSS
Для тех, кто разбирается в CSS, этот метод немного более надежен. Реализация аналогична, но предполагает включение строки в теги