Best Way For Role-over Images?

[paulmason411 0]

Hi Guys,

I'm trying to work out the best way to make this site.

This is what I have made so far using CSS, divs, and spans:
Site: http://forums.xisto.com/no_longer_exists/
CSS: http://forums.xisto.com/no_longer_exists/

I found a problem with this attempt when you resize the browser window all the images move with it.
Any suggestions on how to fix this?

So basically what i want to be able to do with this is have those buttons light up some how when i roll over them. My idea was to have each button on a fairly small image, that way you don't have to reload a huge image each time you roll over a button. This is the reason i split it up like this.

I was wondering, would it be easier to use CSS layers and put the roll-over image over the top of the original one each time someone rolls over it. I would use image maps for this.

If anyone has ideas on how to do this in a simpler way I would really appreciate it. Cheers

Edited December 4, 2006 by paulmason411 (see edit history)

[jlhaslip 4]

Site is pretty full already. About the last thing it needs is another set of images.

http://www.websiteoptimization.com/services/analyze/

[Saint_Michael 3]

Yes that would be the way to go since it will reduce the amount of images you would need to just the hovers.

This is were you would go to set it up.
http://www3.yourtotalsite.com/


Now their is one reason why the images breaks up like that. First you do have your body set up properly you do this by setting this up in your css file.

html, body{  margin:0;  padding:0;  text-align:left;}  #wrapper {  width:980px;  text-align:left; margin: 0 auto; border:solid 0px;}

then you would insert that wapper as such

<div class="wrapper">

by the looks of it you want your wrapper set at 1024px and leave your height blank. The reason I use 1024 is due to the fact that that browser setting is where your image format is doing what it is supposed to.

Hopefully that helps out.