positioning question for CSS

hi

I'm new to CSS (although very happy to have become aquainted....) and i'm a bit stuck.

I have 4 images floating on the RHS of my page roughly following this tutorial . I want to use them as roll-over buttons and have a gif attached above each image naming the link.

I'm not really sure how to do this taking into consideration magins, etc.

I did consider for an east solution combining the original gif image and the JPEG image into one file but then the overall look is sub standard when compressed....

any help would be great,

thanks,

jim

not sure if that 2nd paragraph is clear....

at the moment there are only the JPEG images floating on the RHS of the page. I want to have the appropriate gif attached to the appropriate JPEG as a label but with the margins set to 15px to space out the images I'm not sure how to do this....

Remember this: Margins point inwards (internal) and padding points outwards (external).

padding:15px;

it's ok - i've got it by creating a different class for the gifs with different margin settings....

i like css!

oops..... i spoke too soon!

2 things :-

1) I want to use the images as rollover buttons. However in DW I am only able to select the top image - all the rest in design view are as if they are not there.

2) When I preview in IE (haven't checked any others yet) by pressing F12 all looks as it should until I go to a different and come back. When I come back all images are lined up horizontally along the top.

Any ideas?

Thanks,

Jim

My code:

.floatright {
float: right;
margin: 0px 15px 15px 15px;
clear: right;
}

.floatright-b {
float: right;
margin: 0px 15px 0px 15px;
clear: right;
}

<img class="floatright-b" src="images/mission.gif" width="110" height="25"><img class="floatright" src="images/our_mission_image_off.jpg"><img class="floatright-b" src="images/about.gif"><img class="floatright" src="images/about_us_image_off.jpg"><img class="floatright-b" src="images/help.gif"><img class="floatright" src="images/help_us_image_off.jpg"><img class="floatright-b" src="images/volunteer.gif"><img class="floatright" src="images/volunteer_image_off.jpg">

ok (....if anybody's listening.... sniff...) I've added dimensions to all Gifs and JPEGS and now they seem to be holding their position in the web page.

Also now only the second image down is only invisible to DW.... (although the bottom image only picks up about halfway down)

ok it's all working now

Dreamweaver is really crap. Write virtually any custom code and it will ignore it. Example:

<b><i>Text</b></i>

It will throw a fit because they are not in perfect order.

i'm beginning to see that..... thing is about 10 weeks ago i didn't know my HTML from my a*se and I don't really have the confidence to 'go it alone'

having said that it HAS been a massive help in getting me as far as i am

cheers,

jim

The reason it throws a fit is because in order to be XHTML compliant your tags should be nested correctly.

-b

True, but a verified page will still run with no problems what so ever, whereas dreamweaver will ignore the tags.