PDA

View Full Version : Floating Images differently



htims
Jan 22nd, 2009, 07:31 PM
Hi there,
I will have more than one image on my page that I will need to format. As all my image tags start with img anything I place in the css affects ALL my images. How can I apply different formatting to different images/sections of my webpage? I want some images to float right and some float left.

How will the html and the css code look?

Regards

jlhaslip
Jan 22nd, 2009, 07:34 PM
Wrap the images in a div with an ID and target the block of images, or give them classes according to the direction you want them floated to.

Excavator
Jan 22nd, 2009, 07:57 PM
Hell htims,

A left floated img and then a right floated img... styled with classes:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.left {
float: left;
}
.right{
float: right;
}
</style>
</head>
<body>
<img src="path/to/image.jpg" alt="description" width="200" height="150" class="left" />
<img src="path/to/image.jpg" alt="description" width="200" height="150" class="right" />
</body>
</html>

jerry62704
Jan 22nd, 2009, 09:44 PM
Expanding on that a little, let's say you have a left and a right (or two lefts will do the same thing often) floated div:

#divLeft {float:left;}
#divRight {float:right;}

And let's say you want the images in divLeft to have a border and the ones in divRight to have none and you want all the rest to have a 10px border.
#divLeft img {border-width:2px;}
#divRight img {border-width:0;}
img {border-width:10px;}

So this says if an img is in the divLeft then apply a rule, if it is in divRight apply a different rule and if it is anywhere else, a third rule.

htims
Jan 22nd, 2009, 10:29 PM
Great thanks Gerry for the further explanation!!