akry: (Default)
akry ([personal profile] akry) wrote2009-03-02 08:15 pm

Liveinternet: как сделать, чтобы весь текст обтекал картинку

Сейчас на Ли.ру багов больше, чем в специальном рассаднике. Это связано с принципиальной позицией администрации, но нам по любому надо как-то вертеться. Какждый выкручивается, как может. Я вот ставлю патчи со стороны браузера, чтобы если не у всех, то хотя бы у меня всё смотрелось хорошо. Автоматическое сохранение набираемого текста например, расширение поля для ввода текста, ускорение загрузки.

Но не всё можно сделать у себя. Один из багов, который меня раздражал — поведение абзацев при обтекании картинки. На скриншоте оно вполне видно. Фотография выравнена влево. По идее абзацы должны мирно обтекать её справа, и так и выглядит, когда набираешь текст. Но сохранив его, в дневнике видишь, что обтекает картинку только первый абзац. А остальные уплыли под картинку.

Баги Liveinternet: перенос абзацев

Почему? Дело в том, что не очень умелый верстальщик в файле blog.css написал следующее:

css source

А должен был либо ничего не писать, либо написать «clear:none». Ну да нас больше волнует не вопрос «кто виноват», а «что делать нам». Кто-то может попытаться достучаться до ValeZ, как это безуспешно делаю я уже полгода. Но по счастью этот ляп мы можем исправить проще.

Открываем исходный код текста:

FCKEditor Source Button

Видим много кода, среди которого нас интересует несколько абзацев после проблемной картинки. Абзацы обозначаются тегами <P>. Дальше просто. Внутри угловых скобок после каждого неправедно перенесённог «P» дописываем строку: style ="clear:none". Выглядеть будет так:

Clear:none

 Сохраняем пост, всё работает как надо:

clear:none result

Что приятно, каждый увидит этот пост именно так, с правильным обтеканием.

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

 

UPD. Я сдела скрипт для GreaseMonkey, который все означенные операции проделывает автоматически и незаметно для вас. Подробности здесь.


Post a comment in response:

This account has disabled anonymous posting.
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting