5 replies [Last post]
rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 3 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 hours 16 min ago
Joined: 2004-06-30
Posts: 9679
Points: 815

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

Verschwindende wrote:
  • CSS doesn't make pies

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

using body id to highlight a menu

Thanks..
I knew it was something simple that I was overlooking

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

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

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 8 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

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