Fri, 2004-09-24 23:54
I'm using <body id="something">to highlight a menu item..
It works fine but won't validate because ID is unique and is already used... is there a way around this in my code?
page in question is here
http://www.tcsnd.org/tcs1/default.asp
Code is like this for menu
/* menu requirements for functionality */
.topmenuul {list-style-type:none; margin:0; padding:0;}
.topmenuli {list-style-type:none; float:left; position:relative;z-index:4;}
.topmenutitle {display:block; width:75px;}
.submenuul {list-style-type:none; position:absolute; display:none;}
.submenuli a {display:block; width:100px;}
li:hover ul, li.over ul { /* lists nested under hovered list items */ display: block;}
#dmenu li>ul { top: auto; left: auto;}
/* menu design */
#dmenu {font-family: Arial, Helvetica, Sans-Serif; font-size:12px;}
.topmenuli a:hover{color:#fff;background:#808;}
.topmenutitle {color:#fff; background:#6c9c9c; text-align:center; text-decoration: none;
border-right:1px solid #8db3b4; padding:3px; line-height:14px;}
.submenuul {margin-top:-1px; width:105px;
background:#6c9c9c; color:#fff;
background-position: top left;
background-repeat: repeat-x;border-top:2px solid #808;
border-bottom:2px solid #808;border-right:2px solid #808; border-left:2px solid #808;}
.submenuli a{padding:3px; text-decoration: none; background:#808;color:#fff;border-bottom:1px solid #8db3b4;}
.submenuli a:hover{text-decoration: none; background:#6c9c9c; color: #fff;}
/* highlights toplevel menu based on body id of the page */
#home li#home a,#about li#about a,#academics li#academics a,#activities li#activities a,
#athletics li#athletics a,#contact li#contact a,#calendar li#calendar a,#service li#service a
{color:#fff;background:#808;}
the menu code:
<ul class="topmenu" id="dmenu">
<li class="topmenuli" id="home"><a href="http://www.tcsnd.org/tcs1/default.asp" class="topmenutitle">Home</a>
</li>
TIA
Sat, 2004-09-25 01:04
#1
using body id to highlight a menu
Hi rmfred.
Can you use a class in the body instead of an id.
<body class="home">
/* highlights toplevel menu based on body class of the page */
.home li#home a,.about li#about a,.academics li#academics a,.activities li#activities a,
.athletics li#athletics a,.contact li#contact a,.calendar li#calendar a,.service li#service a
{color:#fff;background:#808;} Otherwise you could specify two classes for the menu<ul class="topmenu" id="dmenu">
<li class="topmenuli home" ><a href="http://www.tcsnd.org/tcs1/default.asp" class="topmenutitle">Home</a>
</li>
/* highlights toplevel menu based on body id of the page */
#home li.home a,#about li.about a,#academics li.academics a,#activities li.activities a,
#athletics li.athletics a,#contact li.contact a,#calendar li.calendar a,#service li.service a
{color:#fff;background:#808;} Hope that helps
Sat, 2004-09-25 15:23
#2
using body id to highlight a menu
Or change the id of the button to something else, like li id="home_button"
and the code
#home li#home_button
Sat, 2004-09-25 16:40
#3
using body id to highlight a menu
Thanks..
I knew it was something simple that I was overlooking
Sat, 2004-09-25 17:00
#4
oops maybe not
Making the changes you both suggested now "screws" up the look of the menu... at least in IE
Must have something to do with the way IE handles li
Back to the drawing board
Sat, 2004-09-25 17:33
#5
Pretty weird this CSS stuff
Nope... it wasn't IE default or anything else... it was CSS doing it's job I guess..
The css had this for the menu items
#contact li.contact a,
but on the contact page itself I had a td style
<td class="contact">
so the page was picking up the attributes of both contact classes
and thus altering the look of the menu
changing the name of one or the other of these solved the problem
Another lesson learned...