Layout of images help!

[sirichmond]

Hello all,

This is simple but it has fried my brain

http://www.shinehairsalon.net/V5//team2.html

I have a div with images in it (a container), simple so far but I need a way to keep them spaced from each other the same. I have fiddled it to look right but not ideal.

I made the images 127 wide but the gaps between them are first to second 3px, second to thrid 4px and third to fourth 3 px which does not look right. In order to get them to fit the width with the div above I have had to make the fourth image 1 pixel narrower than the rest. Its all caused by the gap between the second and third. How can I use CSS to make them exactly 3 px apart.

I have a class for the images

.riders {
padding:5px;
background-image: url(images/bkg/blackbkg.png);
margin-top:1px;
margin-bottom:1px;
text-align:center;
}

Thanks
Si

 

[lordhughes]

If i understand you correctly you have multiple img tags within a div one approach to this would be to use the first and last child selectors

.rider:first-child {
   margin: 0px 0px 0px 1px; //top right bottom left
}

.riders:last-child {
  margin: 0px 1px 0px 0px; //top right bottom left
}

 

[sirichmond]

I have one large div with all the images in

#facecontainer {
position:relative;
margin-left:100px;
margin-right:0px;
padding:0px;
width: 560px;

}

Then I have the images inside this container with a class of "riders"

<div id="facecontainer">
<img src="images.jpg" width="127" height="130" class="riders" />
<img src="images.jpg" width="127" height="130" class="riders" />
<img src="images.jpg" width="127" height="130" class="riders" />
<img src="images.jpg" width="126" height="130" class="riders" />

like so and class below

.riders {
padding:5px;
background-image: url(images/bkg/blackbkg.png);
text-align:center;
}

Each image is set in a semi transparetn black background

 

[Limenote]

float the images and use your own margins, bookend the rows with a different class to keep the container flush. Remember to clearfix the container. If you need more help let me know.

 

[sirichmond]

That would be great as I am currently banging my head, its simple I know but to the home web designer it is burning my fuse.

Link is now http://www.shinehairsalon.net/V5/halloffame.html

CSS for the container which holds all the images below

#facecontainer {
position:relative;
margin-left:100px;
margin-right:0px;
padding:0px;
width: 560px;

}

CSS for the images

.riders {
padding:5px;
background-image: url(images/bkg/blackbkg.png);
text-align:center;
}

HTML is below

<div id="facecontainer">
<img src="images/riders/simonrichmond_main.jpg" width="127" height="130" class="riders" />
<img src="images/riders/philwardman_main.jpg" width="127" height="130" class="riders" />
<img src="images/riders/garethrichardson_main.jpg" width="127" height="130" class="riders" />
<img src="images/riders/marccrossfield_main.jpg" width="126" height="130" class="riders" />
</div>