ГлавнаяДизайн блога › Как сделать Обтекание Картинок и Видеороликов текстом?


Как сделать Обтекание Картинок и Видеороликов текстом?


Как сделать Обтекание Картинки текстомЗдравствуйте, дорогие друзья и читатели — Sozdaiblog.ru!

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

Не знаю почему, но половина разработчиков шаблонов для WordPress, при их создании игнорируют вставку функции обтекание картинки текстом. Сделано это специально или нет, мне узнать не удалось. Зато, нашлось лекарство для лечения этого недуга.

Итак.

 

Как сделать HTML обтекание картинки текстом.

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

 

как сделать обтекание картинки текстом

 

Конечно, это смотрится не очень красиво. Поэтому, нам нужно сделать обтекание картинки текстом.

Для этого, откройте папку с Вашей активной темой оформления, найдите файл — «style.css» и в самом конце добавьте кусок нового кода:


.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;
}

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

 

html обтекание картинки текстом

 

Таким образом, мы исправили косяк разработчика шаблона.

Но это ещё не всё.

 

Как сделать HTML обтекание видеороликов текстом.

При вставке видеоматериала в тело поста, с ним происходит та же беда, что и с картинками. Как и картинки, видео не обтекается текстом. На деле, это выглядит так:

 

обтекание текстом видео

 

Чтобы это исправить, открываем на редактирование уже знакомый файл — «style.css» и в самом конце добавляем новый стиль:

 

 #video-wrap {
 float: left;
 margin: 0 20px 5px 0;
 }

 

Теперь, при размещении нового видеоматериала, нужно, в WordPress открыть HTML-редактор и обернуть его код следующим образом:

 

<div id="video-wrap">Код Вашего видео</div>

 

После этих манипуляций, вновь вставленное видео, будет отображаться намного симпатичнее:

 

как сделать обтекание видео текстом

 

Вот такие простые способы помогут решить проблемы с обтеканием картинок и видеоматериалов Вашего ресурса печатным текстом.

Если, Вы знаете другие варианты, как сделать HTML обтекание картинки текстом, то обязательно напишите о них в комментариях.

Так же Вам понравится:

 

 

Всем кому понравилась статья, предлагаю подписаться на обновления блога, чтобы получать уведомления о выходе нового материала на свой адрес электронной почты.

На сегодня это всё. До новых статей…

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




42 комментарияА что думаете Вы?

  1. Павел

    Денис, у тебя даже приятно поспамить в комментариях. Всегда можно найти полезности для своего блога.

    [Ответить]

    Денис Черников ответил:

    Спасибо, Павел! Дружеский спам иногда разрешаю!))))

    [Ответить]

  2. Александр Красильный

    Отличная статья! Сегодня как раз с соседом по комнате вели дискуссию на данную тему. А тут, оп, смотрю вы уже статью написали. Вот покажу ему этот пост, и пусть знает, что я был прав! =) Спасибо!

    [Ответить]

    Денис Черников ответил:

    Спасибо, Александр! Я рад, что статья Вам пришлась к месту!

    [Ответить]

  3. Светлана Бобровская

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

    Обтекание видео текстом не предусматривается, и я давно хотела найти способ этого добиться, не удавалось. Огромное спасибо за подсказку!

    [Ответить]

    Денис Черников ответил:

    функция есть, но не всегда в шаблоне есть стили под эту функцию!

    [Ответить]

    Светлана Бобровская ответил:

    Тогда понятно. Мне просто не встречались такие шаблоны. :) Скажите, а если вставлять файл SWF так же как с видео можно делать?

    [Ответить]

    Денис Черников ответил:

    Их полно! Попробуйте!

    [Ответить]

  4. Любовь

    В Word Press это делается значительно проще.

    [Ответить]

    Денис Черников ответил:

    Так мы и говорим про Word Press вообще то!

    [Ответить]

  5. blogrub

    Обтекание картинок на моем шаблоне автоматом стоит, а вот обтекание видео, это новое для меня

    [Ответить]

    Денис Черников ответил:

    Думаю, что для многих это в новинку!

    [Ответить]

  6. Denis

    Неплохо можно где нибудь применить)

    [Ответить]

    Денис Черников ответил:

    Конечно, можно!

    [Ответить]

  7. Сергей

    Спасибо Денис. У тебя как всегда есть интересные фишки. Возьму на заметку.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей! Как всегда, стараюсь выдавать полезные вещи, которые действительно могут пригодиться!

    [Ответить]

  8. Елена

    Денис, я давно к тебе захожу на твой блог и каждый раз использую твои фишки у себя на сайте. Данная статья-супер! буду экспериментировать!

    [Ответить]

    Денис Черников ответил:

    Спасибо, за доверие! Заходите!

    [Ответить]

  9. Олег

    Обтекание картинок делаю средствами WordPress на вкладке Дополнительно, а вот про видео — это интересно. Правда, обычно видео на всю ширину статьи вставляю и обтекание не требуется. Но кто его знает, что еще может понадобиться.

    [Ответить]

    Денис Черников ответил:

    Зато, теперь Вы знаете, что есть такая функция!А знание, это лучшее оружие!

    [Ответить]

  10. Елена

    Про картинки знала, а вот про видео — могла только догадываться. Спасибо, буду пользоваться. Как всегда все очень здорово.)))

    [Ответить]

    Денис Черников ответил:

    Просто, мало кто вставляет видео непосредственно в тело статьи, отсюда и незнание данной функции. Теперь Вы в курсе, применяйте и заходите почаще за новыми плюшками!)))

    [Ответить]

    Елена ответил:

    Обязательно Денис, буду заглядывать))) Спасибо.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Елена! Буду рад Вашим визитам!

    [Ответить]

  11. Kleva

    Спасибо большое за статью. Она действительно очень полезная. Сейчас буду пробовать сделать у себя на блоге оптикание текста.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!Применяйте и приходите к нам в гости почаще!

    [Ответить]

  12. Галина

    Да, интересненько, стоит сделать обтекание видео, смотрится прикольно...

    [Ответить]

    Денис Черников ответил:

    Конечно, сделайте! Мне тоже нравится!

    [Ответить]

  13. Олег

    Вы умеете подробно и интересно объяснять и излагать мысли! Очень нравится ваш стиль изложения. Ну и информация очень полезная, конечно. Спасибо!

    [Ответить]

    Денис Черников ответил:

    Всегда пожалуйста, Олег! Спасибо за положительный отзыв! Заходите, если что!

    [Ответить]

  14. Александра

    Почему-то не получилось (( http:// konsalder.ru/%D0%B2%D0%B5%D0%B1%D0%B8%D0%BD%D0%B0%D1%80-%D0%BD%D0%BB%D0%BF/ Может я стиль наверно добавила? Нужно прямо в самый конец вставить в новую строчку?

    [Ответить]

    Денис Черников ответил:

    Александра, работать должно 100% будьте внимательней, в инструкции всё чётко.

    [Ответить]

    Александра ответил:

    Ура-ура! Получилось! Спасибо)

    [Ответить]

    Денис Черников ответил:

    Поздравляю!

    [Ответить]

  15. joey

    Добавил стиль в ксс файл, прописываю в дивах ид, но видео не становиться обтекающим текстом. Видимо шаблон у вордпресса такой.

    [Ответить]

    Денис Черников ответил:

    Это должно работать во всех шаблонах! Попробуйте кэш браузера почистить и если есть плагин кэширования, то и его почистите! (с условием, если Вы всё правильно делаете)

    [Ответить]

  16. виктор

    Денис,здравствуйте!спасибо за код css!картинки теперь выглядят намного лучше в постах

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Виктор! Всегда пожалуйста.

    [Ответить]

  17. Людмила

    Денис, спасибо, спасибо, спасибо!!!За такую замечательную статью — помощь.Все получилось как хотела!Счастья и благополучия на все времена.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Людмила! Вам тоже спасибо, за пожелания счастья!

    [Ответить]

  18. Andrey

    Денис!

    Посмотрите пожалуйста код:

    Css

    #video-wrap {

    float: left;

    margin: 0 20px 5px 0;

    }

    Html

    [video width="480" height="360" mp4="http://test.sait.ru/wp-content/uploads/2014/05/Рука-крошит-отточенную-сталь-Не-бойся-я-с-тобой.mp4"][/video]

    Пробовал вставлять, и ничего не изменилось!

    [Ответить]

    Денис Черников ответил:

    Читайте внимательнее инструкцию!

    [Ответить]

Оставить комментарий!

Вверх