(1 голосов, средний: 2.00 из 2)
Загрузка ...Обтекание картинок текстом в wordpress
Каждый раз, заводя новый блог вспоминаю, что где-то в завалах почтовых рассылок в The Bat лежит помеченное флажком письмо с постом из блога Дмитрия Донченко, где описана настройка стилей css для 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;
}
Вот и все, теперь вокруг картинок будет зазор в 5px и они будут плавно окружены текстом, как например на этой странице.
Меня читают
Спасибо за статью, только подскажите, пожалуйста, а куда именно в style.css это вставлять?
Просто я совершенно не разбираюсь в этом, но мне очень нужно сделать так, чтобы в записи текст обтекал картинку, и между ними был оступ. А никак не получается сделать :-/
Вот открываю я файл style.css и куда там вставлять этот текст, который Вы приводите, в какие строчки?
Да все просто. Копируете и вставляете в самый низ файла style.css, под самую последнюю строку.
Дельный совет, спасибо.
Обтекание происходит, но теперь большие картинки, которые стояли по центру, выровнялись по левому краю и никак не хотят становиться по центру. Почему так? Это в коде так прописано, что он картинку любого размера делает обтекаемым?
Код только на обтекание влияет, за расположение катинок отвечают html коды в ссылке на картинк,у обычно слова left, right, center. Если честно у меня таких проблем не разу не возникло.
До вставки кода, картинки стояли по центру, а после съехали налево, несмотря на то, что в html коде картинки указано center. Теперь остается либо удалить этот код, либо каждый раз устанавливать отступы по боками, чтобы выглядело по центру
Хотя, нет, все нормально, разобрался
Отличная инфа надо будет поэксперементировать!
Отлично сделали , есть чему поучится другим.
Можно было конечно и лучше сделать, но и так нормально.
Спасибочки, заработало!
Пишу пишу, а комменты мои не публикуются, админ вообще смотрит тут за этим делом? Или давно забил...
Не знаю почему мой пост пропал.
Жаль, так долго писал.
Короче вопрос такой — не работает у меня то что тут написано.
И не знаю почему. Если у кого то есть ответ, помогите плиз.
Текст не обтекает. Вставил это, и и все равно не обтекает.
админ смотрит, но ваш коммент спамфильтром отсевается, мог по запаре и удалить.
Слабое утешение!
когда совсем ничего не помогает, я обычно полностью копирую родной
файл из темы и продолжаю его мучить, обычно косяк где нибудь в знаках
препинания в коде. Может свойства темы, или виджеты мешают. А вообще сначала опробую все советы на Денвере, перед тем
как на сайт заливать.
Все тут понятно, смешно смотреть.