Кривое оформление картинки в постах

Добрый день.
Проблема до жути проста, но справиться с ней мне не удается, да и в ВП я еще толком не разобрался.
Пишу пост, добавляю картинку по левому краю или по центру, но в опубликованной новости картинка всегда слева и текст всегда обтекает ее. То есть, картинку как по default всегда обтекает текст.
Чтоб не подумали, что совсем дурак, добавлю скриншотов 😀
Скрин в редакторе:

Скрин уже опубликованной новости:

Возможно проблема нубская, но что-то не нашел выхода..

Ну так посмотрите, что редактор в кодах прописывает. То, что вы таскаете картинку по всему тексту, для редактора еще ничего не значит. Все определяется настройками и свойствами для изображений.

Чтобы картинка была слева и обтекание – в куске кода img появится align="left"
Для центрования картинки float:none; margin-left:auto;margin-right: auto; или что-то типа align="center"

oldvovk
Смотрел я код.. там все ок, хоть руками пиши, хоть в визуальном редакторе.

<a rel="attachment wp-att-12" href="http://"><img class="aligncenter size-medium wp-image-12" title="" src="http:///wp-content/uploads/2010/08/unitaz-225x300.jpg" alt="" width="225" height="300" /></a>

Другой вариант:

<img class="aligncenter" src="http://s61.radikal.ru/i174/1008/e6/0848be50ad63.jpg" alt="" />

И еще один вариант:

<div align="center"><img src="http://s61.radikal.ru/i174/1008/e6/0848be50ad63.jpg" alt="" /></div>

В любом из вариантов на выходе картинка слева и текст ее обтекает. Посмотрел код самой страницы, все правильно, картинка должна быть по центру. На другом шаблоне все тоже самое

Необязательно. К примеру, ваш класс aligncenter не определен, либо просто не работает из css.
Посмотреть бы в живую пациента. Но не думаю, что это проблема самого wp

oldvovk
strouka.pp.ua
Если нужна админка, напишите в аську 256568. Не нашел, как на форуме отправить ЛС.

Ну и. А как оно у вас центроваться то будет, если в стилях style.css класс class="aligncenter" не определен. Его нет. Соответственно wp не находит определения и пробрасывает его до дефолта, я так понимаю. Попробуйте прописать для картинки примерно так в редакторе

<p><img style="display:block;float:none;margin-left:auto;margin-right: auto" title="Установка унитаза" border="0" alt="Монтаж унитаза" src="http://strouka.pp.ua/wp-content/uploads/2010/08/unitaz-225x300.jpg" width="225" height="300" /></p>

oldvovk, о чудо! 😀 Вы волшебник! Спасибо)
Добавил center и right в

.entry-content img {
    float: left right center;
    margin-right: 7px;
    border: none;

Все правильно ? Вроде работает, может еще куда надо "пихнуть" ? в стилях никогда не ковырялся.

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

Да можно и так. Хотя непонятно зачем для флоат сразу три определения. WP все равно примет последнее.
Попоробуйте убрать left right

Момент второй. Этим вы определили что картинки будут все центроваться, а если понадобится увести влево и вправо? Для этого и нужен отдельный класс. к примеру по классу center img будет центроваться, по классу right уводиться вправо.

Пример как у меня

img{border:0;}
img.centered{display:block;margin-left:auto;margin-right:auto;}
img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}

попробуйте так же интегрировать для себя

Изучайте css, пригодится и не только по wp, но и в других шаблонах.

oldvovk не выходит 😐 Видимо я что-то не так делаю / не туда вставляю. Надо ли удалять .entry-content img ? Оставлял без изменений, добавил ваш код, и все снова по левому краю и т.п. Удалял .entry-content img и оставлял ваш код – тоже самое. Могли бы вы скинуть готовый код или сказать, куда его приклеить ?
Оригинал

.post-index {margin:0 0 10px;}
#post-single {margin:0 0 20px;}
.posts-wrap {float:left; clear:none;width:580px; margin-top: 20px;}

.entry-content img {
    float: left;
    margin-right: 7px;
    border: none;
}

А вообще, большое вам спасибо, хотя бы знаю где чинить)

Ну что то так

.entry-content img {margin-right:7px;border:none;}
.entry-content img .aligncenter{display:block;margin-left:auto;margin-right:auto;}
.entry-content img .alignright{display:inline;float:right;}
.entry-content img .alignleft{display:inline;float:left;}

Что то типа такого. У меня другое постороение шаблона и css, но по идее такой css должен работать.
те в классе .entry-content для картинок именнр постов первым определено отступ вправо и отсутствие обрамления, второе определяет что при вложенном стиле .aligncenter картинка должна центрироваться и тд вправо и влево. Ну и остальное

oldvovk, это что-то удивительное, игнорируются все что не left 😆 Я уже все понял, спасибо вам за терпение и хорошее объяснение. Теперь знаю о css на грамм больше 😀
Возиться с этим шаблоном не буду, что-то в нем не так. Пробовал по разному.. И ваш вариант и свои другие.. Распознается только 1 float. И в нем надо указывать либо лефт либо райт, таким образом работает один вариант по выбору и не больше.

Anonymous
Отправить
Ответ на: