Sozdaiblog.ru
Назад

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

Опубликовано: 22.10.2012
Время на чтение: 8 мин
43
38

Как сделать Обтекание Картинки текстомЗдравствуйте, дорогие друзья и читатели — 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 обтекание картинки текстом, то обязательно напишите о них в комментариях.

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

 

 

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • Павел
    Опубликовано: 22.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Александр Красильный
    Опубликовано: 22.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Светлана Бобровская
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

      • Светлана Бобровская
        Опубликовано: 23.10.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Любовь
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • blogrub
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Denis
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.10.2012 Ответить на сообщение

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

  • Елена
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.10.2012 Ответить на сообщение

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

  • Олег
    Опубликовано: 23.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 24.10.2012 Ответить на сообщение

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

  • Елена
    Опубликовано: 25.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 25.10.2012 Ответить на сообщение

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

      • Елена
        Опубликовано: 30.10.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 30.10.2012 Ответить на сообщение

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

  • Kleva
    Опубликовано: 26.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.10.2012 Ответить на сообщение

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

  • Галина
    Опубликовано: 02.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 02.11.2012 Ответить на сообщение

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

  • Олег
    Опубликовано: 12.12.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 12.12.2012 Ответить на сообщение

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

  • Александра
    Опубликовано: 22.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.01.2013 Ответить на сообщение

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

      • Александра
        Опубликовано: 22.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 23.01.2013 Ответить на сообщение

          Поздравляю!

  • joey
    Опубликовано: 29.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 29.01.2013 Ответить на сообщение

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

  • виктор
    Опубликовано: 21.04.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 21.04.2013 Ответить на сообщение

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

  • Людмила
    Опубликовано: 03.05.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 04.05.2013 Ответить на сообщение

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

  • Andrey
    Опубликовано: 13.05.2014 Ответить на сообщение

    Денис!
    Посмотрите пожалуйста код:
    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]
    Пробовал вставлять, и ничего не изменилось!

    • Денис Черников
      Опубликовано: 13.05.2014 Ответить на сообщение

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

  • Алексей
    Опубликовано: 28.09.2016 Ответить на сообщение

    сверху и снизу видео отступ появился, а справа текст «прилипает» вплотную

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.