Positioning images with css

Associate
Joined
3 Nov 2002
Posts
142
Hi, i have styled my site (header, gfx, menu, footer and text styles) in css. The site is currently plain text and in dire need of some pictures to break up the content.

What is the best way of positioning images? Sticking to the idea of style defined in stylesheets and not html, im thinking of giving each page (in addition to the main site stylesheet) its own image placement stylesheet. I would give each image in the page its own id, then im thinking i could position them as i see fit in the stylesheet.

Is this generally done? I would prefer to leave out class="float-right" on my images as i feel this is tying the display into the html and i would like to have a number of style sheets on this site.

Also, rather than giving the global img tag a style, i want images to float left, right, and all sorts, much like a magazine with the text wrapping around said pictures.

having said that this is the first time ive positioned and floated images so i am really open to suggestions and ideas!

Many thanks in advance,

Chris
 
So we are talking about content images and not images that make up the layout of the page?

I always have my .imgright and .imgleft classes in the stylesheet so they can be floated in a paragraph to the left or right and the text will flow around them.
I think thats the easiest and most elegant way of doing it really :)
 
So we are talking about content images and not images that make up the layout of the page?
Indeed :D

I always have my .imgright and .imgleft classes in the stylesheet so they can be floated in a paragraph to the left or right and the text will flow around them.

Ok i have had a few people tell me that now, but would you not agree that goes against the concept of css, as by referencing class="imgleft" or class="imgright" you are tieing the visual representation to the html?

Or am i being pedantic? Im thinking if i use id's for each image (and i will only have 5 or so per page), i could even hide them in print view, or if i design the site for a handheld device? sound sensible or should i stop worrying hehe?
 
well, for printing you could have another stylesheet that hides your images.

The presentational aspects of the right and left images are still dealt with the CSS so I think its alright.

I guess you could use your ID method - I use that for the thumbnail image links on my site. I think maybe you are worrying a little too much :) I think either method would be ok.

The main thing is, you arent putting align=left in the img tag :D
 
Back
Top Bottom