→
←

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

Категории: Для блога, Как сделать?

В некоторых случаях не работает обтекание изображений текстом. Человек вставляет картинку в блог, в параметрах картинки ставит ее расположение слева к примеру и надеется что после публикации, сама картинка будет слева, а в правой части будет текст, но это не всегда выглядит так, как показывает нам редактор Wordpress.

А происходит этот как правило в тех случаях, когда в файле CSS-стилей шаблона Wordpress не прописаны стандартные стили для правильного обтекания текстом изображений. Эти стили можно найти на сайте Wordpress.

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

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}
 
.alignleft {
   float: left;
}
 
.alignright {
   float: right;
}
 
.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}
 
.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}
 
.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

Для красоты к строкам:

.alignleft {
   float: left;
}
 
.alignright {
   float: right;
}

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

.alignleft {
   float: left;
   margin-right: 5px;
}
 
.alignright {
   float: right;
   margin-left: 5px;
}

Bookmark and Share

Facebook Twitter del.icio.us Digg Reddit Technorati RSS

Опубликовано 26 Март 2009

Метки: , , ,

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

Комментарии: 23Напишите свой комментарий!

  1. andy Написал(а):
    26 Март 2009 at 7:29 пп

    огромное спасибо!!

    постоянно мучался с этими картинками

  2. rotor Написал(а):
    26 Март 2009 at 9:02 пп

    К последним примерам (.alignleft, .alignright) можно добавить и margin-bottom: 5px, чтобы текст не наползал на картину снизу :)

  3. ViCTiM Написал(а):
    27 Март 2009 at 9:43 дп

    Спасибо, как раз то что нужно было :)

  4. UdAvSt Написал(а):
    27 Март 2009 at 9:59 дп

    Спасибо! Наконец-то заработало как надо, теперь заметки выглядят по человечески.

  5. Genius Master Написал(а):
    27 Март 2009 at 6:43 пп

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

    Вопрос не по теме: Как сделать так чтобы мои Трекбеки отображались на других блогах. Отправил в общей сложности около 10 на разные блоги с разных статей, но они не отобразились. Первые отравил несколько месяцев назад последний неделю назад. Не отображаются! Движек Wordpress, может быть что-то делаю неправильно, или ошибка какая-то в теме? Подскажите что делать? Заранее благодарен.

  6. Kolobochek Написал(а):
    31 Март 2009 at 12:45 дп

    Большое спасибо =)

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

  7. Сергей Написал(а):
    4 Апрель 2009 at 5:33 пп

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

    С уважением Ляшенко Сергей

  8. rotor Написал(а):
    6 Апрель 2009 at 12:41 пп

    Для тех, у кого не происходит обтекание картинок.

    Скорее всего, придется обновить WordPress, так, как эта возможность была добавлена в последних версиях сборки движка (хотя могу ошибаться).

    Чтобы настроить обтекание в старых версиях, придется использовать классы к изображениям или наследование в CSS.

  9. Dmitriy Donchenko Написал(а):
    7 Апрель 2009 at 9:49 дп

    А если точнее то все эти классы добавлены с версии 2.5, а для того чтобы они работали, нужно вставить код в style.css а при добавлении картинки к записи, установить ей правильное выравнивание, все это делается в визуальном режиме редактирования записи.

  10. Супп! Написал(а):
    12 Апрель 2009 at 7:32 дп

    Одно время долго мучался с проблемой обтекания на одном из своих блогов. Позже нашел ответы на Wordprees.org. Дмитрию большое спасибо за подробную информацию по этому вопросу. Думаю, новичкам в Wordpress она пригодится.

  11. Алекс Написал(а):
    13 Апрель 2009 at 4:39 пп

    Как то нужно было поправить текст справа от картинки у себя на блоге... Замучался искать как это сделать, а теперь когда уже не нужно нашел. Но лучше поздно чем никогда))

  12. Радкевич С. Написал(а):
    21 Апрель 2009 at 1:18 пп

    Большущее спасибо, целых 2 часа лазил по форумам, но там одна муть, а попробовал ваш способ — все отлично заработало. Теперь буду вставлять картинки почаще.

  13. JD Написал(а):
    4 Май 2009 at 7:58 пп

    Огромное спасибо! Сама в стилях не сильна, но теперь все супер!

  14. Vootshi Написал(а):
    22 Май 2009 at 8:22 пп

    Помогите кто нить... млин, я уже часа два вставляю эти куски кода в style.css и ничего не получается... скажите — куда именно надо вставить, я ваще не знаю всех этих тэгов, маюсь методом тыка и не выходит... пошОл топиться (((

  15. Денис Написал(а):
    16 Сентябрь 2009 at 12:23 дп

    Спасибо, большое спасибо!

  16. Саня Написал(а):
    31 Октябрь 2009 at 4:34 пп

    Помогите пожалуйста как сделать так чтобы текст налез на картинку!?

  17. Dmitriy.Donchenko Написал(а):
    31 Октябрь 2009 at 5:16 пп

    Наверное сделать картинку фоном? А поверх написать текст?

  18. Glam Написал(а):
    4 Ноябрь 2009 at 10:01 пп

    Спасибо большое. Долго разбирался, наткнулся на ваш блог в гугле, теперь все картинки обтекаются нормально :)

  19. Юлия Написал(а):
    7 Ноябрь 2009 at 8:35 пп

    Дмитрий, большое спасибо за инструкцию, как раз столкнулась с такой проблемой. Просьба — пишите, пожалуйста, куда именно (после какой строки) в файле вставлять код — для тех, кто еще не очень хорошо знает HTML.

  20. mixa Написал(а):
    1 Декабрь 2009 at 9:23 дп

    Отличная инструкция. Взял на заметку.Спасибо

  21. Pasha Написал(а):
    6 Декабрь 2009 at 6:19 пп

    Я весьма Вам благодарен. Ві спасли меня. Хорошо что в мир не без добріх людей.

  22. euGneSH Написал(а):
    7 Январь 2010 at 8:13 дп

    Огромное спасибо за помощ! А то я пользуюсь шаблоном 2006 года, там это не учтено :)

  23. Сергей Написал(а):
    26 Январь 2010 at 4:45 пп

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

BlogMemes.ru