Wrapping images around text

[iLogan]

Hello,

Is there any way we can wrap images around text, I've looked but couldn't see anything

[xxMATTGxx]

Hello,

Is there any way we can wrap images around text, I've looked but couldn't see anything

Try the following:



URL
URL

[iLogan]

http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

edit: omg that's great thanks!!!

[Lee]

http://www.habboxforum.com/customavatars/avatar45160_5.gifIt works, however when using spoilers it goes right through it!

See?

[David]

Lee; that's a quote


http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

edit: omg that's great thanks!!!

[Lee]

Whoops your right, that's what I meant :)


@Lee (http://www.habboxforum.com/member.php?u=45160); that's a quote


http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

http://www.habboxforum.com/customavatars/avatar60296_27.gifLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, erat id viverra pellentesque, odio dolor ornare nibh, sed porttitor nisi lectus fermentum lectus. Quisque tristique, lectus in tristique tristique, urna sapien venenatis lacus, ut interdum nunc urna sit amet lacus. Mauris scelerisque suscipit risus, ut sodales quam fermentum sit amet. Vivamus non egestas ligula. In mattis, nibh et convallis sollicitudin, enim urna ultrices elit, vel imperdiet ante tellus nec metus. Vestibulum ac ligula vitae neque tincidunt auctor nec vitae risus. Cras dui dolor, congue at dictum volutpat, eleifend vitae dui. Duis et libero eu eros pharetra semper. Curabitur dictum suscipit sem, vel pretium neque pharetra in. Donec eget justo felis, hendrerit fermentum est. Integer dui nisl, congue vel accumsan nec, pretium vitae metus. In congue nibh sit amet leo mattis nec molestie orci lobortis. Vivamus ut lectus non odio congue bibendum. Nulla at lacus ac ante suscipit condimentum eget a risus. In aliquet lacus nec risus adipiscing ac molestie nisi scelerisque. Etiam scelerisque dui ut dolor vulputate vulputate.

edit: omg that's great thanks!!!

[Chippiewill]

http://www.habboxforum.com/customavatars/avatar45160_5.gifIt works, however when using spoilers it goes right through it!

Someone hasn't thought about the width of "bbcode_container" properly, I'm not entirely sure on the top of my head how to fix it though since the images is aligned by floating it. I might have a quick fiddle around to see if it's easily fixable.

Edit: If matt or whoever is fairly competant with html then they can read
http://www.complexspiral.com/publications/containing-floats/

whilst david isn't here.

edit2: sticking:
<hr style="display: block; clear: left; margin: -0.66em 0;
visibility: hidden;">
prior to bbcode containers then it should prevent floats extending into them. I'm fairly certain there's a way to incorperate this just on quote divs.

Edit3:

Matt, add "display: block; clear: left;" to the style info for bbcode_quote, fixes the problem.

[Chippiewill]

(Ran out of edit time) correction that should be:
display: block; clear: both;
otherwise it won't fix right aligned images.

[Chippiewill]

Alternatively stick
overflow: hidden;
inside "bbcode_container" if you want the quote to flow AROUND the image instead of being forced below it.

[xxMATTGxx]

Alternatively stick
overflow: hidden;
inside "bbcode_container" if you want the quote to flow AROUND the image instead of being forced below it.

Cheers, I've just added that to the Site Skin 2011 - Will do it to the rest of the styles in a minute if it's all good.

[Chippiewill]

Cheers, I've just added that to the Site Skin 2011 - Will do it to the rest of the styles in a minute if it's all good.
Just noticed on the SS2011 that announcements overflow from their container, if you stick:
margin-left:-15px
inside the announcement class it seems to fix it.

[xxMATTGxx]

Just noticed on the SS2011 that announcements overflow from their container, if you stick:
margin-left:-15px
inside the announcement class it seems to fix it.

These announcements?

http://mattgarner.net/upload/images/7tlaA.png

[David]

These announcements?

http://mattgarner.net/upload/images/7tlaA.png

http://icap.me/i/P5BZ8hzsF3.png

[Chippiewill]

These announcements?

http://mattgarner.net/upload/images/7tlaA.png

You didn't need to put it on announceinfo as well.

[xxMATTGxx]

You didn't need to put it on announceinfo as well.

Which one is it suppose to be on, just to make sure?

[Chippiewill]

Which one is it suppose to be on, just to make sure?
Only "announcement"/

On a further note, the non-logged in sitenotice hover thing (Covered in red) has its images hovering over its edge, you can fix this by replacing the 4/5 <br>s with one <br style="clear:both;"> or something similar.

EDIT:
Hold the phone, on the announcement thing so far - remove ALL changes, the margins stuff.]

Now on the class known as "announcements" (with an s) add "margin-top:10px;", this not only fixes the the overflow issue it also fixes an issue where the announcements are clipping with the bread crumbs (Forum> Help / Questions / Feedback > Habbox Feedback).

[xxMATTGxx]

Only "announcement"/

On a further note, the non-logged in sitenotice hover thing (Covered in red) has its images hovering over its edge, you can fix this by replacing the 4/5 <br>s with one <br style="clear:both;"> or something similar.

EDIT:
Hold the phone, on the announcement thing so far - remove ALL changes, the margins stuff.]

Now on the class known as "announcements" (with an s) add "margin-top:10px;", this not only fixes the the overflow issue it also fixes an issue where the announcements are clipping with the bread crumbs (Forum> Help / Questions / Feedback > Habbox Feedback).

What about now for both of them? Thanks once again.

[Chippiewill]

I personally wouldn't have just stuck in an extra break for the welcome thing, it kinda works although if you're gonna do that it'd probably do better with one more break as the bottom of the images is still just clipping with the bottom of the div (Edit: apparently that's only in chrome, more reasons why my way is better)). My way dynamically expands the div to fit the floats.

the announcements are all fine now.

[iLogan]

I don't even know why I can post announcements but in the hxl staff forums if I post an announcement it still appears funny:

http://grab.by/dmWO

[Chippiewill]

lol, that's because it includes your userbit title and your one has breaks in it.

I'll have a quick fiddle to see if it's fixable.

---------- Post added 30-04-2012 at 10:48 PM ----------

Hackiest thing ever but..:

br.usertitle understate{display:none;}

hopefully might work possibly? I'm not entirely sure how it works if there's a space in a class name.

not ready quite yet.

[Chippiewill]

br.understate {display:none;}

try that, it *shouldn't* break anything else, if it does then you'll have to stick it in a class by itself to prevent it from breaking.
deciding not to work for some reason, two ticks.

br.announcement {display:none;} should work and be safe even though testing it isn't working.