Topic: Div BGcolor Rollovers can't be that hard.... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10833" title="Pages that link to Topic: Div BGcolor Rollovers can&#039;t be that hard...." rel="nofollow" >Topic: Div BGcolor Rollovers can't be that hard....\$

Author	Thread
Petskull Maniac (V) Mad Scientist From: 127 Halcyon Road, Marenia, Atlantis Insane since: Aug 2000	posted 10-25-2002 09:03 ....right? Still, I can't find the way to change the div background-color when the link is mouseOver-ed... What am I doing wrong? --------------------------------------------------------------------------------------------- <HTML> <HEAD> <TITLE>CSS Navigation, Scene 1</TITLE> <STYLE type="text/css"> BODY{background-color:#000000;color:#FFFFFF;} #spacer{height:100px;} #key{background-color:#000000;width:200px;height:150px;font-family:verdana;font-size:9px;} #menu1,#menu2,#menu3,#menu4,#menu5,#menu6,#menu7,#menu8{ height:15px; background-color:#333333; color:#CCCCCC; border-style:solid; border-width:1px; border-color:#000000 #333333 #333333 #333333; text-indent:6px; } #menu1 a,#menu2 a,#menu3 a,#menu4 a,#menu5 a,#menu6 a,#menu7 a,#menu8 a{background-color:#333333;color:#CCCCCC;text-decoration:none;} #menu1 a:hover,#menu2 a:hover,#menu3 a:hover,#menu4 a:hover,#menu5 a:hover,#menu6 a:hover,#menu7 a:hover,#menu8 a:hover{background-color:#666666;color:#CCCCCC;text-decoration:none;} </STYLE> </HEAD> <BODY> <DIV ID="spacer"></DIV> <DIV ID="key"> <DIV ID="menu1"><A HREF="blah">Menu Number 1</A></DIV> <DIV ID="menu2"><A HREF="blah">Menu Number 2</A></DIV> <DIV ID="menu3"><A HREF="blah">Menu Number 3</A></DIV> <DIV ID="menu4"><A HREF="blah">Menu Number 4</A></DIV> <DIV ID="menu5"><A HREF="blah">Menu Number 5</A></DIV> <DIV ID="menu6"><A HREF="blah">Menu Number 6</A></DIV> <DIV ID="menu7"><A HREF="blah">Menu Number 7</A></DIV> <DIV ID="menu8"><A HREF="blah">Menu Number 8</A></DIV> </DIV> </BODY> </HTML> Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com ICQ: 67751342 [This message has been edited by Petskull (edited 10-25-2002).]
Perfect Thunder Paranoid (IV) Inmate From: Milwaukee Insane since: Oct 2001	posted 10-25-2002 09:13 Specify a bit more. I tested your code, and the background of the link text is changing, but not the background of the containing DIV. This is as it should be. It would be nice to be able to slap a :hover on any element, but unfortunately only Mozilla lets you go hog-wild with that... so what you're looking for is to make the background-color change stretch across your entire containing DIV? Take a look at the CSS behind this test page I did for a client. I honestly don't remember how I got it working, but it's based strongly on a recent article at A List Apart -- anyway, the CSS file ought to point you in the right direction. (Copy my HTML code with it, and you'll have a way structural setup, too -- your list of links will be an honest-to-Gord HTML list. Stylin'! Edit: fixed link to CSS file [This message has been edited by Perfect Thunder (edited 10-25-2002).]
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-25-2002 13:12 PS: Its certainly doable. See the resources here for all the explanation: http://faq.ozoneasylum.com/799/ ___________________ Emps FAQs: Emperor
u-neek Bipolar (III) Inmate From: Berlin, Germany Insane since: Jan 2001	posted 10-25-2002 17:59 <HTML> <HEAD> <TITLE>CSS Navigation, Scene 1</TITLE> <STYLE type="text/css"> BODY{background-color:#000000;color:#FFFFFF;} #spacer{height:100px;} #key{background-color:#000000;width:200px;height:150px;font-family:verdana;font-size:9px;} .menu a { width:200px; background-color:#333333; color:#CCCCCC; text-decoration:none; height:15px; background-color:#333333; color:#CCCCCC; border-style:solid; border-width:1px; border-color:#000000 #333333 #333333 #333333; text-indent:6px;} .menu a:hover { background-color:#666666; color:#CCCCCC; text-decoration:none;} </STYLE> </HEAD> <BODY> <DIV ID="spacer"></DIV> <DIV ID="key"> <DIV class="menu"><A HREF="blah">Menu Number 1</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 2</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 3</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 4</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 5</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 6</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 7</A></DIV> <DIV class="menu"><A HREF="blah">Menu Number 8</A></DIV> </DIV> </BODY> </HTML> Haven't tested it yet, but i think it should work.
HZR Bipolar (III) Inmate From: Cold Sweden Insane since: Jul 2002	posted 10-25-2002 20:32 Add display: block; to .menu a and it should work better in Mozilla. [This message has been edited by HZR (edited 10-25-2002).]

Topic: Div BGcolor Rollovers can't be that hard....\$

Author

Thread

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

posted 10-25-2002 09:03

....right?

Still, I can't find the way to change the div background-color when the link is mouseOver-ed...

What am I doing wrong?
---------------------------------------------------------------------------------------------

<HTML>
<HEAD>
<TITLE>CSS Navigation, Scene 1</TITLE>
<STYLE type="text/css">
BODY{background-color:#000000;color:#FFFFFF;}
#spacer{height:100px;}
#key{background-color:#000000;width:200px;height:150px;font-family:verdana;font-size:9px;}
#menu1,#menu2,#menu3,#menu4,#menu5,#menu6,#menu7,#menu8{
height:15px;
background-color:#333333;
color:#CCCCCC;
border-style:solid;
border-width:1px;
border-color:#000000 #333333 #333333 #333333;
text-indent:6px;
}
#menu1 a,#menu2 a,#menu3 a,#menu4 a,#menu5 a,#menu6 a,#menu7 a,#menu8 a{background-color:#333333;color:#CCCCCC;text-decoration:none;}
#menu1 a:hover,#menu2 a:hover,#menu3 a:hover,#menu4 a:hover,#menu5 a:hover,#menu6 a:hover,#menu7 a:hover,#menu8 a:hover{background-color:#666666;color:#CCCCCC;text-decoration:none;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="spacer"></DIV>
<DIV ID="key">
<DIV ID="menu1"><A HREF="blah">Menu Number 1</A></DIV>
<DIV ID="menu2"><A HREF="blah">Menu Number 2</A></DIV>
<DIV ID="menu3"><A HREF="blah">Menu Number 3</A></DIV>
<DIV ID="menu4"><A HREF="blah">Menu Number 4</A></DIV>
<DIV ID="menu5"><A HREF="blah">Menu Number 5</A></DIV>
<DIV ID="menu6"><A HREF="blah">Menu Number 6</A></DIV>
<DIV ID="menu7"><A HREF="blah">Menu Number 7</A></DIV>
<DIV ID="menu8"><A HREF="blah">Menu Number 8</A></DIV>
</DIV>
</BODY>
</HTML>

Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

[This message has been edited by Petskull (edited 10-25-2002).]

Perfect Thunder
Paranoid (IV) Inmate

From: Milwaukee
Insane since: Oct 2001

posted 10-25-2002 09:13

Specify a bit more. I tested your code, and the background of the link text is changing, but not the background of the containing DIV. This is as it should be. It would be nice to be able to slap a :hover on any element, but unfortunately only Mozilla lets you go hog-wild with that... so what you're looking for is to make the background-color change stretch across your entire containing DIV?

Take a look at the CSS behind this test page I did for a client. I honestly don't remember how I got it working, but it's based strongly on a recent article at A List Apart -- anyway, the CSS file ought to point you in the right direction. (Copy my HTML code with it, and you'll have a way structural setup, too -- your list of links will be an honest-to-Gord HTML list. Stylin'!

Edit: fixed link to CSS file

[This message has been edited by Perfect Thunder (edited 10-25-2002).]

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-25-2002 13:12

PS: Its certainly doable. See the resources here for all the explanation:
http://faq.ozoneasylum.com/799/

___________________
Emps

FAQs: Emperor

u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

posted 10-25-2002 17:59

<HTML>
<HEAD>
<TITLE>CSS Navigation, Scene 1</TITLE>
<STYLE type="text/css">
BODY{background-color:#000000;color:#FFFFFF;}
#spacer{height:100px;}
#key{background-color:#000000;width:200px;height:150px;font-family:verdana;font-size:9px;}
.menu a {
width:200px;
background-color:#333333;
color:#CCCCCC;
text-decoration:none;
height:15px;
background-color:#333333;
color:#CCCCCC;
border-style:solid;
border-width:1px;
border-color:#000000 #333333 #333333 #333333;
text-indent:6px;}
.menu a:hover {
background-color:#666666;
color:#CCCCCC;
text-decoration:none;}
</STYLE>
</HEAD>
<BODY>
<DIV ID="spacer"></DIV>
<DIV ID="key">
<DIV class="menu"><A HREF="blah">Menu Number 1</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 2</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 3</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 4</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 5</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 6</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 7</A></DIV>
<DIV class="menu"><A HREF="blah">Menu Number 8</A></DIV>
</DIV>
</BODY>
</HTML>

Haven't tested it yet, but i think it *should* work.

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

posted 10-25-2002 20:32

Add display: block; to .menu a and it should work better in Mozilla.

[This message has been edited by HZR (edited 10-25-2002).]

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Div BGcolor Rollovers can't be *that* hard....

Insert Slimies »

Insert UBB Code »

Topic: Div BGcolor Rollovers can't be that hard.... $Pages that link to <a href="https://ozoneasylum.com/backlink?for=10833" title="Pages that link to Topic: Div BGcolor Rollovers can't be that hard...." rel="nofollow" >Topic: Div BGcolor Rollovers can't be that hard....\$