Tue, 2009-03-31 18:26
I'm trying to get a horizontal website working. Sometimes when my divs for rollover images are listed in a certain order (in HTML), some of the rollovers work and some don't. I found a bunch of threads here on div ordering and another bunch of threads on image rollovers, but i haven't found a good solution (or reason) yet.
Maybe someone can help me out? I've built an example scenario.
Here's two HTML files; the first HTML-all 4 rollovers work. First HTML:
<!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> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="example.css" /> </head> <body> <div id="content"> <div class="box4"><a class="boxrollover" href="#"> </a></div> <div class="box3"><a class="boxrollover" href="#"> </a></div> <div class="box2"><a class="boxrollover" href="#"> </a></div> <div class="box1"><a class="boxrollover" href="#"> </a></div> </div> </body> </html>
and the second, only the bottom-right box rollover works:
<!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> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="example.css" /> </head> <body> <div id="content"> <div class="box1"><a class="boxrollover" href="#"> </a></div> <div class="box2"><a class="boxrollover" href="#"> </a></div> <div class="box3"><a class="boxrollover" href="#"> </a></div> <div class="box4"><a class="boxrollover" href="#"> </a></div> </div> </body> </html>
Here's the CSS with the four rollover boxes (background image sliders):
body { margin:0px; padding:0px; width: 3250px; height: 700px; color:#ff0000; background: #000000; } #content { margin:78px 0px 0px 0px; float: left; } .box1 { position:absolute; padding-top:50px; padding-left:50px; } .box2 { position:absolute; padding-top:50px; padding-left:250px; } .box3 { position:absolute; padding-top:200px; padding-left:50px; } .box4 { position:absolute; padding-top:200px; padding-left:250px; } a.boxrollover { display: block; width: 149px; height: 118px; background: url("blankcell.jpg") 0 0 no-repeat; text-decoration: none; } a:hover.boxrollover { background-position: -152px 0; }
I threw the two examples on my site.
Here's the working example:
http://www.johnmorga.com/divplay/example-ok.html
and here's the one that doesn't completely work:
http://www.johnmorga.com/divplay/example-not-ok.html
Again, the only difference is the listed DIV order.
TIA,
John
Tue, 2009-03-31 20:34
#1
John, All the thing is just
John,
All the thing is just because you use padding instead of margin. When it worked well, it worked, because first you put the box 4, after the box 3 and 2 and 1 
In this case the rollover is not affected.
When you put the box 4 for last, then this "layer" will be over the box 1, 2 and 3.
padding-left:250px;
padding-top:200px;
All the other divs are under that. Thats why they did not worked. Try to use margin instead of padding.
Cheers
Attilla
Tue, 2009-03-31 21:17
#2
WORD brother! that was it.
WORD brother!
that was it. thanks so much, man. fixed - dropped the pads for margins.
body { margin:0px; padding:0px; width: 3250px; height: 700px; color:#ff0000; background: #000000; } #content { margin:78px 0px 0px 0px; float: left; } .box1 { position:absolute; margin:50px 0 0 50px; } .box2 { position:absolute; margin:50px 0 0 250px; } .box3 { position:absolute; margin:200px 0 0 50px; } .box4 { position:absolute; margin:200px 0 0 250px; } a.boxrollover { display: block; width: 149px; height: 118px; background: url("blankcell.jpg") 0 0 no-repeat; text-decoration: none; } a:hover.boxrollover { background-position: -152px 0; }