homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS highlight current page and dropdown menu help
jennyX




msg:4358751
 11:01 am on Sep 5, 2011 (gmt 0)

When I set the css to highlight the current menu, it works just fine. But when I have a drop-down menu, the css hightlights the entire drop down menu (meaning every item so the entire menu is that highlighted color.

I only want the menu to be highlighted and not the entire block. Can I ask for your help? Thanks in advance!

//<css>//
bodyhome #home a,
body#bio #bio a,
body#gallery #gallery a,
body#gallery #design a,
body#gallery #music a,
body#contact #contact a,
body#resume #resume a{

background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}

#gallery #menucont ul li a:hover{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0 0 0 0;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top: 50%;*/
/*left:0;*/
}


//<body>//
<body id="home">

//<div>//

<div id="menucont">
<ul>

<li id="home"><a class="active" href="index.php">home</a></li>
<li id="bio"><a href="bio.php">bio</a></li>
<li id="gallery"><a href="gallery.php">gallery</a>
<ul>
<li id="design"><a href="design.php">design</a></li>
<li id="music"><a href="music.php">music</a></li>
</ul>
</li>
<li id="contact"><a href="contact.php">contact</a></li>
<li id="resume"><a href="resume.php">resume</a></li>
</div>

<div id="footercont">
<ul>
<li>Copyright &copy 2011 All Rights Reserved.</li>
</ul>
</div>

 

Marshall




msg:4358836
 5:50 pm on Sep 5, 2011 (gmt 0)

Would it not be simpler to do:

#menucaount ul li a:hover {your color choice}

Or are you not talking about a hover effect but a highlight of the page the visitor is on? I have to admit, I don't understand all the classes you assigned when they all are defined the same.

Marshall

jennyX




msg:4360358
 5:01 am on Sep 9, 2011 (gmt 0)

sorry, i am still beginner at css.

i was wondering if you understand my problem. i hope i made it clear! sorry if i was confusing you.

Marshall




msg:4360363
 5:20 am on Sep 9, 2011 (gmt 0)

Are there two separate menus and when the main menu is highlighted showing the current page, the drop down menu also highlights and, I'm assuming then, you don't want it to?

Marshall

jennyX




msg:4360370
 6:09 am on Sep 9, 2011 (gmt 0)

yes that is correct!
for example:

|Gallery|
-art-
-music-

when the gallery is the "current" active page. the whole drop down menu is highlighted.

i only want the "gallery" part highlighted and not "art" or "music" highlighted

Marshall




msg:4360525
 2:18 pm on Sep 9, 2011 (gmt 0)

Sorry if I'm being a little slow on this, but as I stare at it, I am getting lost in your CSS.

First, I don't understand all of this

bodyhome #home a,
body#bio #bio a,
body#gallery #gallery a,
body#gallery #design a,
body#gallery #music a,
body#contact #contact a,
body#resume #resume a{

background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}


Seems to be bloated and not make sense. The impression I am getting is that the "gallery" is child to "menucont" so all the above CSS doesn't seem to follow/make sense.

Based on the code you provided, I see it as

#gallery #menucont ul li a {
background: #A6DD00;
color:#FFFFFF;
text-decoration:none;
}

and

#gallery #menucont ul li a:hover {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0 0 0 0;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top: 50%;*/
/*left:0;*/
}

And what is the definition of
a class="active"


I you have anything similar to a:active rather than a.active, all the anchors are going to highlight. That being said, then this would be appropriate:

#gallery #menucont ul li a.active {
whatever effects
}

Again, this is all based on the code you provided. Double check all your CSS for bloating and conflict. If you have too many style, it can cause you problems. All try the CSS validator on W3C.

Marshall

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved