[Поиск]

Всем доброго времени суток, собственно - сабж. Ищу расширенный IMG ББ-код для булки 3.8. Конкретно - необходимо, чтобы текст мог обтекать рисунок. Может это и самому можно сделать?

Originally Posted by Ro0TT

Может это и самому можно сделать?

можно
ББ-код обтекания текста справа и слева вокруг картинки

Ой, спасибо большое, я искал, но так и не нашел подходящий запрос. Собственно, как и на IPB. Не перестроился еще..

нужно два ббкода, что бы в результате был сгенерирован такой HTML

<div style="display: inline-block;">
   <div style="float: left; padding: 5px;"><img src="image.jpg" border="0" alt="" /></div>
   <div style="vertical-align: top;">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</div>

расположение ббкодов в сообщении
[FLOATEXT][FLOAT="left"][IMG]картинка[/IMG][/FLOAT] Текст[/FLOATEXT]

пример



по образу и подобию можно сделать и ббкод, когда картинка будет справа
ВАЖНО!
расположение картинки и текста при написании сообщения, должно быть именно такое, как показано в примере, иначе "покорежит" пост
об этом пишут в теме по ссылке, которую Лью дала
я когда тестил на локалке, тоже столкнулся с этим
если не запихивать картинку в <div> то пост можно так исковеркать, жжуть...
подпись может "переехать" в тело поста справа или слева от текста
миниатюры вложений, если они есть, тоже будут коряво выглядеть
в моем варианте, картинкой может быть и ббкод [ATTACH]
поправил немного код, для расположения картинки справа или слева

kerk, учту, спасибо. У меня еще один вопрос, я сделал вывод сообщений из одного из разделов форума на сайт.

PHP Code:

    $result = $vbulletin->db->query_read("
                            SELECT T.threadid, T.postusername, T.title as title, T.replycount, T.postuserid as userid, F.description as ftitle, P.pagetext, P.dateline, T.lastpostid, T.views
                            FROM " . TABLE_PREFIX . "thread T
                            LEFT JOIN " . TABLE_PREFIX . "user U ON (T.lastposter = U.username)
                            INNER JOIN " . TABLE_PREFIX . "forum F ON (T.forumid = F.forumid)
                            INNER JOIN " . TABLE_PREFIX . "post P on P.postid = T.firstpostid
                            WHERE T.forumid in (".$forum_ids.") and T.visible = 1
                            ORDER BY T.threadid desc
                            LIMIT 0, ".$limit
    );

    require_once(DIR . '/includes/class_bbcode.php');
    //parse_bbcode
    $bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list(), true); 


Вопрос касательно:

PHP Code:

$bbcode_parser =& new vB_BbCodeParser($vbulletin, fetch_tag_list(), true); 


Не хочет парсить мои новые ББкоды, как можно вылечить?

Ro0TT,
один вопрос = одна тема
"не превращайте тему в викторину ©"

Originally Posted by kerk

нужно два ббкода, что бы в результате был сгенерирован такой HTML

<div style="display: inline-block;">
   <div style="float: left; padding: 5px;"><img src="image.jpg" border="0" alt="" /></div>
   <div style="vertical-align: top;">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
</div>

FLOAT выдирает объект из HTML разметки страницы. поэтому <div style="display: inline-block;"> здесь не нужен в том виде как написан. При такой вёрстке дивный блок схлопнется по высоте, а для правильных браузеров и по ширине справа, до размеров содержимого текста. В образовавшуюся яму свалится всё что находится ниже текста (вложения, подпись...). Поэтому вместо

<div style="display: inline-block;">

пишем

<div style="overflow:hidden">

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

<div style="clear: both;">&nbsp:</div>

При этом не забывайте, что правильные браузеры не умеют растягивать пустой блок на ширину страницы, поэтому им необходимо указать размер по горизонтали в 100%.

Далее, в коде указан padding, это неправильно если имелось ввиду сделать отступ текста от картинки. Неправильно, потому что padding сохраняет фон картинки и картинка просто уменьшится в размерах.

<div style="float: left; padding: 5px;">

Правильнее будет написать

<div style="float: left; margin: 5px;">
margin очистит края картинки от фона картинки, тем самым сформирует отступы текста от картинки.

Не нужен и этот блок

<div style="vertical-align: top;">

Во-первых, align: top и так идёт по умолчанию в дивном блоке. Во-вторых дивный блок и так провалится вверх между зафлоаченными блоками.


Таким образом, код будет выглядеть следующим образом.

   <div style="float: left; padding: 5px;"><img src="image.jpg" border="0" alt="" /></div>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry
     <div style="clear: both;">&nbsp:</div>

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

vizantium добавил 31.03.2012 в 22:03
Позабыла, вместо padding надо написать margin

  <div style="float: left; margin: 5px;"><img src="image.jpg" border="0" alt="" /></div>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry
  <div style="clear: both;">&nbsp:</div>

даже в шестом ешаке и при "такой верстке" все отображается корректно

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

Проблемы появляются когда блоки не заполнены, полупустые. В этом случае делается разметка страницы, чтобы фрагменты вёрстки находились в нужном месте на странице. Вот в этом случае тем кодом нельзя будет сделать разметку. страницы.

Должно быть взято за правило, что, если есть выше зафлоаченные блоки, то для того что бы избежать на 100% провала между зафлоаченными нижнего блока (вложения, подпись), последнему необходимо иметь в свойствах стиля clear:both

Originally Posted by vizantium

Проблемы появляются когда блоки не заполнены, полупустые. В этом случае делается разметка страницы, чтобы фрагменты вёрстки находились в нужном месте на странице. Вот в этом случае тем кодом нельзя будет сделать разметку. страницы

Opera


Ешак


в ббкодах ничего не изменялось
вообще ничего
текст нЕ полностью "обтекает" картинку, но верстка не ломается