I have a top menu in css, and I am using an external stylesheet.
It seems that if the class is set first... (topmenu.gallery) and I use that as the menu background it works. But if I change the html to use the other class (shouold give me a different colour background) it uses the default colour background and not the one I selected.
Its obviously something small, but what... help please?
Vince
----- from style sheet external -----
#topmenu {
color: #7A7A7A;
background: #EDE675;
width: 100%;
text-align: center;
padding: 0.2em 0 0.2em 0;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
font-family: arial,sans-serif;
}
#topmenu a { color:#000; text-decoration: none; }
#topmenu a:hover { color: #0EB2B0; background:#000; }
#topmenu.gallery { background: #69F9F7; }
#topmenu.aboutme { background: #fff; }
---------- snip ------
In the html code I have :
--------
<div id='topmenu' class='gallery'>
<a class='portal' href='http://www.webdeveloper.com/forum/archive/index.php/./home.htm'> Home </a> |
Gallery |
<a class='aboutme' href='http://www.webdeveloper.com/forum/archive/index.php/./aboutme.htm'> About Me </a> |
</div>
--------#topmenu.gallery { background: #69F9F7; } is the one you should get.
You are only supposed to have one occurrence of an id thus:
Change:
#topmenu.aboutme { background: #fff;}
To:
.aboutme { background: white;}Cheers
It seems that if the class is set first... (topmenu.gallery) and I use that as the menu background it works. But if I change the html to use the other class (shouold give me a different colour background) it uses the default colour background and not the one I selected.
Its obviously something small, but what... help please?
Vince
----- from style sheet external -----
#topmenu {
color: #7A7A7A;
background: #EDE675;
width: 100%;
text-align: center;
padding: 0.2em 0 0.2em 0;
font-variant: small-caps;
font-weight: bold;
font-size: 80%;
font-family: arial,sans-serif;
}
#topmenu a { color:#000; text-decoration: none; }
#topmenu a:hover { color: #0EB2B0; background:#000; }
#topmenu.gallery { background: #69F9F7; }
#topmenu.aboutme { background: #fff; }
---------- snip ------
In the html code I have :
--------
<div id='topmenu' class='gallery'>
<a class='portal' href='http://www.webdeveloper.com/forum/archive/index.php/./home.htm'> Home </a> |
Gallery |
<a class='aboutme' href='http://www.webdeveloper.com/forum/archive/index.php/./aboutme.htm'> About Me </a> |
</div>
--------#topmenu.gallery { background: #69F9F7; } is the one you should get.
You are only supposed to have one occurrence of an id thus:
Change:
#topmenu.aboutme { background: #fff;}
To:
.aboutme { background: white;}Cheers