В вордпрессе 2.6 добавляю изображение в статью. Хочу, чтобы она была в левом верхнем углу, а справа ее обтекал текст. Все, как в обычной книжке. Жму "добавить картинку", выбираю картинку на компьютере в формате JPG, ставлю галочку "выравнивание слева", размер "миниатюра" и "вставить в запись". Сохраняю и что я вижу – картинка вставляется в разрыв, текст выше и текст ниже, никакого обтекания нет.
Причем, если я провожу все эти манипуляции в визуальном редакторе, то отображается все нормально – текст справа, картинка слева, а после сохранения перехожу на страницу и там текст уже разорват картинкой.
Пробовал все комбинации, и в HTML редактора и в визуальном, и картинки разные, и выравнивание по центру и справа, и все эти "миниатюры, оригинальный размер и т.п."
Подскажите, пожалуйста, в чем тут может быть ошибка?
Посмотрите какой класс прописывает вордпресс картинке и посмотрите что у вас в style.css относительно этого класса прописано.
И что для img прописано – тоже смотрите.
при просмотре исходного кода страницы есть вот такая строка
<p class="MsoNormal" style="text-align: justify; text-indent: 30pt;"><a href="http://www.мойсайт.ru/wp-content/uploads/2009/02/dantist1508.jpg"><img class="alignleft size-medium wp-image-270" title="dantist1508" src="http://www.мойсайт.ru/wp-content/uploads/2009/02/dantist1508.jpg" alt="" width="150" height="150" /></a>текст статьи</p>
Получается класс MsoNormal, о нем в style.css нет упоминаний.
А относительно img в style.css прописано следующее:
/* Images */
img.left {
float: left;
margin: 5px 5px 0 0;
padding: 5px;
border: 1px solid #E6E6E6;
}
img.right {
float: right;
margin: 5px 0 0 5px;
padding: 5px;
border: 1px solid #E6E6E6;
}
.entry img.wp-smiley {
border: none;
margin: 0;
padding: 0;
}
.entry img {
margin: 5px;
padding: 5px;
border: 1px solid #E6E6E6;
}
.entry a img {
border: 1px solid #E6E6E6;
}
.entry a:hover img {
border: 1px solid #515151;
}
поменяйте
img.left {
на
img.alignleft, img.left {
Поменял, все осталось по прежнему 🙁 Вот фрагмент статьи в html редакторе
<p class="MsoNormal" style="text-align: justify; text-indent: 30pt;"><a href="http://www.мойсайт.ru/wp-content/uploads/2009/02/dantist1508.jpg"><img class="alignleft size-medium wp-image-270" title="dantist1508" src="http://www.мойсайт.ru/wp-content/uploads/2009/02/dantist1508.jpg" alt="" width="150" height="150" /></a>Для того, чтобы ….
Обновите кеш браузера.
Похоже получилось, спасибо большое 🙂
Появился еще вопрос. Заметил такую особенность – если в процессе добавления картинки ввести тег «alt», то обтекания нет. Вот фрагменты кода, полученные и редактора записей:
<a href="http://www.мойсайт.ru/wp-content/uploads/2009/02/supy200.jpg"><img class="size-full wp-image-309" title="supy200" src="http://www.мойсайт.ru/wp-content/uploads/2009/02/supy200.jpg" alt="Супы" width="200" height="160" /></a>картинка с тегом «alt» – нет обтекания текстом
<p style="text-align: justify; text-indent: 28.5pt;"><a href="http://www.мойсайт.ru/wp-content/uploads/2009/02/supy200x170.jpg"><img class="alignleft size-full wp-image-314" title="supy200x170" src="http://www.мойсайт.ru/wp-content/uploads/2009/02/supy200x170.jpg" alt="" width="200" height="170" /></a>
картинка без тега «alt» – есть обтекание
Наверное надо в style.css исправить какую-то команду?
извините за оффтоп, но реально тебе советую подучить HTML и CSS…
Полностью согласен, знания лишними никогда не будут.
Но в данном конкретном случае, может быть вся заминка в одном-единственном неправильно прописанном операторе?