margin help

[spires]

Hi

 

I have an image, that is inside of an <a> tag, that is inside of a <div>

 

// CSS
#boxImgs a img {
	float: left;
	border:none;
	margin-right: 30px;	
}

// Script
                  <div id="boxImgs">
                      <a href="#"><img src="images/testimonials/play3.jpg" /></a>
                      <a href="#"><img src="images/testimonials/play4.jpg" /></a>
                      <a href="#"><img src="images/testimonials/houses.jpg" /></a>
                  </div>

 

I want all the images to have a right margin, except for the last image in the row.

 

 

Can I do something like the following?

 

// CSS
#boxImgs a img {
	float: left;
	border:none;
	margin-right: 30px;	
}
#boxImgs a img .noMargin {
	float: left;
	border:none;
	margin-right: 0px;	
}

// Script
                  <div id="boxImgs">
                      <a href="#"><img src="images/testimonials/play3.jpg" /></a>
                      <a href="#"><img src="images/testimonials/play4.jpg" /></a>
                      <a href="#" class="noMargin"><img src="images/testimonials/houses.jpg" /></a>
                  </div>

 

 

 

Thanks for your help

 

 

[F1Fan]

Looks like that should work. Have you tested it?

[spires]

Yes, I've tested it.

But it does not work.

 

I think the order might be incorrect:

#boxImgs a img .noMargin {

 

 

as the class is apart of the <a> tag, maybe something like:

#boxImgs a .noMargin img {

 

but that does not work either.

 

Any ideas would be great 

 

 

[F1Fan]

What if you just did this:

// CSS
#boxImgs a img {
      float: left;
      border:none;
      margin-right: 30px;   
}
.noMargin {
      float: left;
      border:none;
      margin-right: 0px;   
}

// Script
                  <div id="boxImgs">
                      <a href="#"><img src="images/testimonials/play3.jpg" /></a>
                      <a href="#"><img src="images/testimonials/play4.jpg" /></a>
                      <a href="#" class="noMargin"><img src="images/testimonials/houses.jpg" /></a>
                  </div>

[spires]

Thanks, but that didn't work either.

I'm sure it must be possible.

[F1Fan]

Oh, I just realized something. You have the class tag on your <a>, not your image. Try one of these:

// CSS
#boxImgs a img {
      float: left;
      border:none;
      margin-right: 30px;   
}
#boxImgs a .noMargin {
      float: left;
      border:none;
      margin-right: 0px;   
}

// Script
                  <div id="boxImgs">
                      <a href="#"><img src="images/testimonials/play3.jpg" /></a>
                      <a href="#"><img src="images/testimonials/play4.jpg" /></a>
                      <a href="#" class="noMargin"><img src="images/testimonials/houses.jpg" /></a>
                  </div>

 

Or:

// CSS
#boxImgs a img {
      float: left;
      border:none;
      margin-right: 30px;   
}
#boxImgs a img .noMargin {
      float: left;
      border:none;
      margin-right: 0px;   
}

// Script
                  <div id="boxImgs">
                      <a href="#"><img src="images/testimonials/play3.jpg" /></a>
                      <a href="#"><img src="images/testimonials/play4.jpg" /></a>
                      <a href="#"><img class="noMargin" src="images/testimonials/houses.jpg" /></a>
                  </div>

 

[spires]

Thanks for sticking with this

But neither of those worked.

 

I can get around it by creating a separate DIV for the last image, but that just means more code,

I like to try and keep my code as small as I can.

[spires]

OK, I've got it.

Not quite CSS, but it works.

 

<a href="#"><img style="margin:0;" src="images/testimonials/houses.jpg" /></a>

 

Set the margin in the actual <img> tag.

 

Thanks for your help with this