Recent Topics

1 Dec 11, 2007 18:44    

My b2evolution Version: 2.x
Sorry for this silly question -- what is the best way to float text around an image that is in the upper left (or right) of a post.

Here is a classic example: http://www.topiccluster.com/about-me/

Is there a css thingy for this (like a span class or something) or is this something this is specific to b2evo.

Sorry for the basic question.

Thanks,
Mark
Proudly running b2evolution at http://www.masonworld.com

2 Dec 11, 2007 19:21

Easy, but not something you can click your way to. Basically all you need is to have leftmargin or rightmargin class assigned to the image tag. Left makes the image go left and right makes it go right. Something like this:

<img src="path-to-image/image-name.jpg" alt="an image" width="150" height="110" class="leftmargin" />

Instant flowing text!

3 Dec 11, 2007 21:33

Presuming, of course, that the particular skin's CSS file has the appropriate class for such images, such as:

img.leftmargin {float:left; margin-right:2ex; margin-bottom:.2ex;}
img.rightmargin {float:right; margin-left:2ex; margin-bottom:.2ex;}

jj.

4 Dec 12, 2007 00:24

Far be it from me to disagree with the great EdB but I just set the "align" value in my img tag

<img src="whatever.jpg" align="left" />


This might not be strict CSS, but it works and is easy to do from the post writing page.

5 Dec 12, 2007 00:56

Far better to have a class="left" as you can then add margin, a border etc etc via your CSS, and it's just as easy to type as align="left" :)

6 Dec 12, 2007 03:56

Yeah b2evolution has always had leftmargin and rightmargin defined in the style sheets that are not part of the skin, so the only issue is whether or not the skin's style sheet contains a call to "img.css". In 2.2.0 you should see the following in your skin's stylesheet:

@import url(../../rsc/css/img.css);	/* Import standard image styles */

What leftmargin will do is

img.leftmargin {
	float:left;
	margin-right:1ex;
	margin-top:.2ex;
	margin-bottom:.2ex;
}

If you decide you wanted lets say a bigger gap under the image you could add a corrective bit to your skin's style sheet.

img.leftmargin {
	margin-bottom:1ex;
}

@david: I dunno if 6 extra letters is such a hard task ya know? Plus it's valid code. "align" is deprecated, so it might not work as desired for all visitors. Not that valid code works for all visitors because most visitors will, for some reason, use IE. But even IE can handle a class for an image.

Alt width and height attributes are being nice to your visitors and satisfying some "standards" - I think. I know it's being nice, and I'm pretty sure "alt" is something the accessibility people require - screen readers for blind people will pick up the alt tag and read it in place of the image. I forget if width and height are validation things though.

Bottom line is this: heck yeah you can get text to flow around an image. When you're really creative with style sheets you can even get text to flow around a background image!

7 Dec 12, 2007 16:44

Why did I ever question EdB? One of these days I'll learn.

I was unaware of the leftmargin class and its availability. I will start using this in my posts to help wrap the text neatly around my pics.

8 Dec 13, 2007 11:56

Question EVERYTHING! Especially people that spend way too much time posting in forums ;)

The big important part is that your particular style sheet calls the img.css thing that b2evo has. Not all skinners did it that way is the thing.


Form is loading...