как в ЖЖ оформить отступ от картинки. иллюстрированное пособие

pink_mathilda — 22.05.2015 этот вопрос возник после очередного бегемотообзора, где я попросила хозяйку критикуемого журнала делать отступы при обтекании картинок текстом, чтобы текст на них не "наползал".
выяснилось, что она даже не подозревала о том, что так можно сделать, и попросила рассказать.
и вот я тут подумала, а вдруг пригодится не только ей одной, и решила завести новый тэг "ЖЖ-полезности", куда и буду сваливать подобные инструкции.
и сегодня мы будем вставлять фото бегемота так, чтобы было красиво :-)

итак, если вы верстаете свои посты в HTML, переходим сразу к п. 3
1. если вы вообще не знаете, как вставить картинку в пост или в комментарий, отсылаю вас к странице справки ТЫЦ
2. если вы используете визуальный редактор:
2.1. вставьте картинку
если вы сейчас наберете после нее текст, это будет выглядеть именно так.
согласитесь, смотрится не слишком привлекательно.

2.2. по двойному клику на картинке откроется окошко свойств:


вам нужно выставить значения в отмеченных пунктах. скажем, расстояние до текста=10, картинка слева. ВСЁ!
эта картинка вставлена в визуальном редакторе.






3. если вы используете HTML
3.1. ваша только что вставленная картинка - вот она:


3.2. вносим первое улучшение.
добавляем после тэга img
или(можно скопировать прямо отсюда).
это даст обтекание картинки текстом и разместит картинку по левому (в случае "left") или по правому ("right") краю поста.
смотрим, что получилось:

так уже лучше, правда?
но текст по-прежнему стоит вплотную к картинке.
при ориентации картинки в правой части поста, как правило, это выглядит чуть гуманнее из-за того, что строки текста у вас разной длины, если вы не извращались с еще каким-либо форматированием.
   вот тут можно, конечно, схитрить, как это только что сделала я.
   есть такое понятие "неразрывный пробел". в HTML он обозначается сочетанием символов & n b s p ;(пишется слитно без пробелов)
   в данном случае для отступа я их поставила три штуки:



но мы же не такие извращенцы, чтобы считать пробелы. тем более, это для наших целей сработает только в начале строки, а длинная фраза перенесется на следующую строку без отступа, как должно быть видно на примере выше.
поэтому переходим к п.3.3

3.3. вносим второе улучшение.
добавляем после нашего улучшения из п. 3.2(можно скопировать прямо отсюда) и смотрим, что получилось:

числом в кавычках мы задаём горизонтальный отступ от картинки в пикселях.
с этим числом вы можете поиграться самостоятельно и найти вариант, наиболее приятный вашему глазу.
я же для справки замечу, что для картинки можно задать и вертикальный отступ атрибутом vspace. этот же атрибут можно использовать для того, чтоб картинки по вертикали не налезали друг на друга.

ИТОГО
мы внесли в тэг вставки изображения маааленькое изменение, которое выделено красным цветом:



надеюсь, изложила внятно и будет кому-то полезно.

и да, мне тут напомнили про еще один мегахитрый способ (спасибо pamsik) сделать красиво:
сначала надо обработать фото доступными вам средствами, приделав к нему белую рамку. тогда эта рамка заменит отступ :-)
но вы-то теперь знаете, как сэкономить кучу времени.

если вы хотите, я могу наваять еще какую-нибудь инструкцию, пишите в каменты, какой вопрос желательно осветить!

пока могу предложить темы:
- как сделать пост в ЖЖ, не авторизуясь в нем, через отправку по электронной почте (должно быть актуально для тех, у кого на работе административно прикрыта авторизация на этом ресурсе и кто не пользуется мобильными приложениями);
- проведение экспериментов с катами и спойлерами (несколько штук в одном посте, вложенные друг в друга и пр);
- какие HTML-тэги форматирования текста применимы в ЖЖ
и так далее

Оставить комментарий

Популярные посты:

• Ранее
• Архив