How should we place photos within content??? (Not FIR)

[jfitz]

Hi guys,
I have a question, maybe you can help me out.
First of all, let me say that I'm not asking about Fahrner Image Replacement or any of those related techniques.

I'm doing a site at the moment and there are some photos, related to the content, that I'd like to pepper the content with. I'd much prefer to have the text wrap around them and have some to the left and some to the right. So, my dilema is this, I can't use the align attribute with xhtml strict and I'd rather not use inline styling. I'm wondering how you guys achieve this sort of thing.

The answer is, obviously, going to involve floats but I'm wondering how I assign the images class names (or ids) that will make semantic sense, i.e. it wouldn't make sense to alternate between class names of "left" and "right" since that might not be the case after a site overhaul.

Is there a way around this? or is this really a good place to use inline styling (eeuch)

Your ideas will be very much appreciated.
John

[Paul O'B]

Is there a way around this? or is this really a good place to use inline styling

I can't think of any good reasons for inline styling (unless you want to overule a users stylesheet - which is a bad reason anyway )

If you want each image unique then apply id's and apply the name that makes sense to you.

If you can use the same class for all images then just use a classname e.g. .contentimage {etc..}

You could also define a class of left and right e.g.

.left {float:left}
.right {float:right}

Then you could use the folowing:

<img class="contentimage left" src="etc..............
<img class="contentimage right" src="etc..............

But theres really not much difference as you could just have contentimagel and contentimager as separate classes anyway.

Remember the most important part will be the alt content so don't forget about that. This is more important than what you've called the style name.

If you select the image contextually through a parent id then you can just apply a class of left or right to the image and that will makes as much sense as anything.

Paul

[jfitz]

If you can use the same class for all images then just use a classname e.g. .contentimage {etc..}

You could also define a class of left and right e.g.

.left {float:left}
.right {float:right}

Then you could use the folowing:

<img class="contentimage left" src="etc..............
<img class="contentimage right" src="etc..............

Cheers Paul,
That's pretty much what I figured. The main reason I don't want to use class names with "left" / "right" in them is so when the site is overhauled and somebody's looking to align the images differently, say, all left or more randomly, I thought they shouldn't have to deal with class names that won't make sense anymore.

I'd also like to avoid bloating the css with ton's of unique selectors.
I was just hoping that there might be some wizardry out there that I hadn't heard of that would allow this. I had considered a little javascript to randomly float them left or right but I quickly shelved using this for the sake of my sanity.

I reckon the simplest thing is to just use more generic class names like .imageOdd and .imageEven. For me though, this isn't so much about knowing css but getting to grips with what other people's rationale is when they're laying out pages. You know yourself, often clients want their sites to look similar to a magazine. You want to give them that look but not have to sell your css soul in the process.

Good points on the alt tags and selecting through context though.
Any other ideas?

[Paul O'B]

I understand what you were getting at now

Yes image left and image right make no sense if you change them at a later date therefore a generic image name would be better. Or add meaning by multiple class as above.

.image {generic styles etc...}
.house {float:left}
.gate {float:right}
 
<img class="image house" etc...

obviously there is a bigger code overhead this way.

Alternatively if you give ids to the paragrpah that the image is contained in then you don't need to give the image a class at all unless there are multiple images in one paragraph of course.

It seems to be six of one and half a dozen of another

Paul

[jfitz]

Ah, you're a good man Charlie Brown! Thanks for the input. BTW, nice one on the lines below! I know I've read that you can specify two classes before but I'd never absorbed it till you showed it in your response

<img class="image house" etc...

Do you see my point though now about including the style in with the html? I know it's sacrilege but it might be justified when the styling is so individual to the particular page. I feel like I deserve a slap for even suggesting it but when you're laying out like a magazine then any restyle down the line is going to mean giving some individual attention to the pages. Agh, I don't know. I suppose it's a case of chanting the old mantra "Web pages are not magazines...web pages are not ma..."
Thanks Paul

[LJK]

Hi -
You've already gotten some fantastic advice, so I'll just add a bit. (Personal experience, only - absolutely no expertise) !

- Using a li for pics is really great if you want to use them as link/navbar images, or if it's a section of a p or div that'll have a row or column of pics.

- [Link 'buttons' of small pics, & created pic 'borders' are nice, clean ways to use images if you have many but want to keep the content text clear of them.]

- Splitting the main div into 2 p's with float:left and float:right is nice; you can switch back and forth between the two p classes depending on which way you want the content to go. [Be sure to clear, eh Paul?] If another page differs, just make a variation on the divs or other elements that need to be changed: i.e. div.main1 -> div.main2 , etc.

- If you'd like to avoid the internal styles (who wouldn't?), go with a linked, external sheet - just add comments where you think a future editor may be at all confused: CSS references in the html, and vice-versa!

Have fun, & I hope this wasn't too painfully basic,
El

[jfitz]

just add comments where you think a future editor may be at all confused:

Ah yes, the oft forgotten and under appreciated practice of good commenting. Sound advice.