Coldhart,

There are several ways to accomplish what you want.

Hmmm.

I would recommend keeping it simple in the HTML and using the CSS file to do the styling work.

In the HTML, something like

 <img class="left" src="..." alt=".." title=".." />

In the CSS:

img.left { float:left; margin:0 10px 0 0; }

likewise

img.right { float:right; margin:0 0 0 10px; }

Where "margin:X X X X" is shorthand for "margin:top right bottom left".

Hope this helps.

-stk

PS - Are you using the FireFox browser and "Web Developer" plugin? If not, you're missing the oppty to edit your CSS on the fly (seeing the changes as you type them in). Very handy.

Also, if you're having problems identifying the images in the blog (but changing the CSS is getting images in the sidebar), you might try being more selective in your CSS selectors. (i.e., instead of using "img.left", which selects ANY <img> tag with a class="left", you might pick on ".bPost img.left" or ".bText img.left" ... which would select any element having a class="bPost" or "bText" AND any <img> tag having class="left"). I'm not sure what skin you're using, but the bPost and bText are generally reserved for POSTS (thus, bypassing the sidebar problem).

I used to add hspace="5" and vspace="5" inside an image tag to create a margin, but CSS is really the best way to do it. I just added this to my css file:

img {
margin: 5px;
}

You might also check out the /rsc/img.css file. You can add class="left.margin" to your image tag and it will align it to the left, wrap text around it and add a margin. And you'll be using the the most valid code out of these three solutions.

Some examples:

<p><img style="float:right;margin:8px;padding:0px;" src="somewhere/image.jpg" />This text appears on the left side of the image, since the image is intended to appear on the right.</p>

<p><img style="float:left;left:8px padding:0px;" src="somewhere/image.jpg" />This text appears on the right side of the image, since the image is intended to appear on the right.</p>

<p style="clear:right">Nothing (inside this same section defined by a &lt;div&gt; tag) is going to appear on the right side of the paragraph.</p>

<p style="clear:left">Nothing (inside this same section defined by a &lt;div&gt; tag) is going to appear on the left side of the paragraph.</p>

<p style="clear:both">Nothing (inside this same section defined by a &lt;div&gt; tag) is going to appear on any side of this paragraph.</p>

<p style="text-align:center;clear:both;"><img style="margin:8px;padding:0px;" src="somewhere/image.jpg" /><br/>This paragraph is centered with nothing on the sides.</p>

You can define the margin and padding styles with 4 (four) parameters (in that order: top, right, bottom, left), any missing parameter has the last given parameter value (ie. margin:8px means the same as: margin: 8px 8px 8px 8px).

For more information, see the [url=http://www.w3schools.com/css/default.asp]CSS Tutorial[/url] section of the very well documented and interactive [url=http://www.w3schools.com/default.asp]W3 Schools[/url] site.

stk wrote:

In the HTML, something like

 <img class="left" src="..." alt=".." title=".." />

AFAIK, the img tag does not accept any title attribute (this would be the same as alt anyway...)

kwa, FYI 8|

The <img> tag accepts BOTH "title" and "alt", though they are very similar. Both are XHTML-valid.

Alt is recommended and REQUIRED for XHTML-valid code (though it can be empty - i.e., alt=""). It's for accessibility - displaying in place of the image (if the image cannot be retrieved, for whatever reason). Also ... IE displays this as "bubble text", when you hover over the image.

Title is optional and used for whatever title you want to give the image. However, Firefox (Mozilla) will only display TITLE (as bubble text) on hover - it won't display Alt text in a bubble ... using it (as it was intended) - displayed only if the image isn't accessible.

So ... if you want fly-over text on an image in BOTH Mozilla and IE ... use Title, if you're only after accessiblity, use alt. Or, if you're like me, use BOTH.

Why use both? Think of when you use an image as a link. There can be a huge difference between what you want to show up if the image isn't found -vs- what you want to come up as fly-over bubble text.

<a href="www.davidSandstrom.com"><img src="www.blah" alt="David at the concert" title=" Click: go to David's Website, which has tons more concert images " /></a>

-stk :D

PS ... As a side note, Title can be effectively used in a variety of other situations. One such one is the <span> tag, where you want to provide (more) information:

Our <span title="They were FREE, because I won the KIGY contest"> concert seats</span> were totally awesome.  We were in the front row.

stk wrote:

The <img> tag accepts BOTH "title" and "alt", though they are very similar. Both are XHTML-valid.
[...]
Why use both? Think of when you use an image as a link. There can be a huge difference between what you want to show up if the image isn't found -vs- what you want to come up as fly-over bubble text.

<a href="www.davidSandstrom.com"><img src="www.blah" alt="David at the concert" title=" Click: go to David's Website, which has tons more concert images " /></a>

You're right, I was wrong. The img tag both supports the alt and title attributes as written into the [url=http://www.w3.org/TR/html4/struct/objects.html#h-13.2]HTML 4.01 standard[/url].

In the case of an image linking elsewhere, I've used the alt attribute for the image and the title attribute for the link...

Interesting ...

I just tried combining <a title> <img alt> and <img title> to see how it works in IE.

<img title> overrides <a title>, meaning ... if BOTH <a title> and <img title> are defined, <img title> will show up on hover, but not <a title>

likewise, if <img title="">, it STILL overrides <a title="somthing">

Also, IE will display ALT on hover, EVEN IF <a title="something"> (So, a combination of <a title> and <img alt> will show (on hover) <a title> in Mozilla, but <a alt> in IE ... which may not be what you want).

If <img title=""> ... it overrides ALT and (nothing) is displayed on hover (because <img title=""> ... image title equals nothing).

So, what does all this mean?

Better to use <img title> and <img alt> than <a title> and <img alt>, because <img title> will override BOTH <img alt> and <a title> for hover text. (The <img title> will show in BOTH Mozilla AND IE).

Define <img alt> WITH <img title> ... then <img alt> is displayed similarly in Mozilla AND IE - ONLY IF the image can't be obtained, for whatever reason.

Hope this helps.

-stk :D

After figuring out different browsers did different things with the image alt or title attributes I got in the habit of making all my image tags be <img src="foo" alt="bar" title="bar" /> along with width and height and (if needed) class attributes. I didn't POST images that way - just the ones in my skin's _main.php file. Since opting to use as few images as possible, imagining I'd get more visitors if they didn't have to wait for images to load, I can't say I adhere to this anymore.

b2evolution MIGHT restrict use of title or alt in an image tag, but if it doesn't then it makes sense to use matching text for both those attributes in your image tags. I also feel secure in saying if stk knows he has shared how to alter conf/_formatting to allow posting with both attribs in that tag if need be eh?

Standards are too tricky. I think everyone should be allowed to make up their own, like IE does ;)

Ed brings up an interesting point and I'd never considered it before, but in the conf/_formatting.php file, "title" is neither an allowed attribute of the <img>, <span> OR the <acronym> tags ... yet I use it all the time.

So what's up?

I think the answer lies in the fact that, like "class", "title" is considered to be a core attribute and is allowed in ALL tags, (without needing to be explicitly defined).

Around line 102 in _formatting.php =>

// Allowed Attribute classes
define('A_coreattrs', 'class title');

So there isn't any fancy-schmansy _formatting.php editing required to allow the title attribute. It's there to use.

Thanks stk for those tests and precious information.

I must says I've been using the alt and title attributes for search engines first, then for users. Now, I will try to use the alt attribute for disabled people to explain what the image displays and the title attribute for robots. Maybe robots are going to use both?

I sense a feature request (or at least a hack): make the "description" field on the image upload screen become both the alt and title attributes in the generated code.