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&amp;#039;t be *that* hard...." rel="nofollow" >Topic: Div BGcolor Rollovers can&#039;t be *that* hard....\

 
Author Thread
Petskull
Maniac (V) Mad Scientist

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

IP logged posted posted 10-25-2002 09:03 Edit Quote

....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

IP logged posted posted 10-25-2002 09:13 Edit Quote

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

IP logged posted posted 10-25-2002 13:12 Edit Quote

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

IP logged posted posted 10-25-2002 17:59 Edit Quote

<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

IP logged posted posted 10-25-2002 20:32 Edit Quote

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:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu