Как сделать обтекаемую картинку в посте
Опять немного вэб программирования и оформления сайта.
Задачка такая: хочу вставить в пост картинку, но так чтобы она не одинокая посредине стояла, а чтобы текст ей как бы обтекал с одной стороны. Например обтекал справа. При этом чтоб изменение масштабов окна браузера обтекание не портило. То есть таблицы отпадают.
Технически это означает что нужно прописать в стилях для картинки параметр float — обтекание, равным «left». Картинка прижмётся влево, а текст будет справа
1. Давайте определим каким стилев и в каких блоках у нас эта картинка находится изначально.
Откроем страницу с одним постом (что бы искать попроще) с одной картинкой. Правая клавиша мышки — «Просмотр кода страницы» (это для хрома, в других браузерах может быть в кнопках или панелях на верху)
Выясните внутри какого блока у вас находится эта картинка, не заключена ли она в какой-то специальный блок.
2. Открываем редактирование style.css ( в вордпрессе: админка — внешний вид — редактор)
находим место в файле где описывается стиль блока внутри которого стоит картинка. Например у меня это оказался стиль art-PostContent После его описания есть описания стилей art-PostContent p (абзатц) и art-PostContent ul (маркированный список), а я ещё вставлю art-PostContent img (картинка). Указываю только один параметр float: left.
Вот так:
В сущности всё. Сохраняем изменения и идём смотреть что получилось.
Кстати, практика показывает что работая на регион большого города всегда выгодней нанять профессионалов для раскрутки сайта и уже через месяц считать с него прибыль чем учиться раскручивать самому. Например продвижение сайтов москва как раз для такого случая.
Редактировать:
Комментарии (5) на запись “Как сделать обтекаемую картинку в посте”
- Василий 17.08.2011 10:32
-
Андрей
06.08.2012 21:56
Здравствуй. Все просто, но не все знают как сделать чтоб текст был с отступом.
-
Андрей
06.08.2012 22:00
Еще хотел бы сказать, конечно это не мое дело. но ссылки при наведении меняют шрифт и получается движение текста. Это плохо смотрится. Извени.
-
Мисс Удача
07.08.2012 14:43
пропишите в css отступы вокруг картинки. http://missudacha.ru/2011/04/sajtostroenie-css/
-
Андрей
07.08.2012 23:21
Здравствуй. Я в курсе этих мелочей. Имел ввиду иногда подробности помогают.
Обратные ссылки
Оставить комментарий
Все просто. Несколько раз повторить и запомнится. Спасибо!