PDA

View Full Version : navBar using CSS (current page)


liquidmonkey
03-26-2008, 11:22 PM
i've made a mainNavBar using some CSS and a few links at the top of my page. all is well except i can't figure out how to get the -current- page highlighted using CSS :(
am able to get the 'hover' part of it no worries. 'active' does not seem to do the trick.

any suggestions or do i need to be more clear?


ps, for some reason the text in the same mainNavBar is in italics within the dreamweaver design window but when previewed in ANY browser it is as it should be, regular font.
what gives with that?

Cary
03-27-2008, 12:23 AM
i've made a mainNavBar using some CSS and a few links at the top of my page. all is well except i can't figure out how to get the -current- page highlighted using CSS :(
am able to get the 'hover' part of it no worries. 'active' does not seem to do the trick.

a:active styles the link as it is being clicked. What you need to do is use a class for the link pointing to the current page. So index.html may have a link called "Home". It might be coded like this:

<a class="current" href="index.html">Home</a>

No other links in the menu will have that class.

Again, you may have a contact.html page with the following code pointing to itself:

<a class="current" href="contact.html">Contact Us</a>

Again, no other links in the menu will use class="current".

This way you can use "a.current" for the style selector for highlighting the current page's menu item.


ps, for some reason the text in the same mainNavBar is in italics within the dreamweaver design window but when previewed in ANY browser it is as it should be, regular font.
what gives with that?

Do you have a url we can look at?

liquidmonkey
03-27-2008, 09:46 AM
excellent solution and thank you!!!
page is not published yet, and will tackle that last issue a little later but thanks!!!!

liquidmonkey
04-13-2008, 06:42 PM
one final thing to sort out on my mainNavBar.
is it possible to stop the 'current' page tab from highlighting when the mouse goes over it?
do i need to add another class or css to it, ie, --- current a:hover --- or something like that? not sure how to do that actually :(


i got the italics issue sorted out too!! my parent links tag was affecting it :(

Cary
04-13-2008, 07:19 PM
You can try a.current:hover {..}

liquidmonkey
04-13-2008, 08:28 PM
have just tried that but not sure if i've implemented it right...
here is my CSS and the menu HTML is at the bottom...

/* --- This will position the main areas of the page - the header (banner), navigation bar and footer--- */
#header {
position: relative;
height: 180px;
width: 900px;
background: url(../assets/dock-jumping-banner.jpg) no-repeat top left;
}
#header ul {
position: absolute;
left: 0;
bottom: 0;
list-style: none;
/* --- the following three lines are used to achieve opacity or transparency in the main nav bar --- */
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
/* -------------------------- */
background-color: #999999;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #CCCCCC;
border-bottom-color: #CCCCCC;
}
#header ul li {
float: left;
}
#header ul a {
padding: 0 1.2em;
font-size: 14px;
line-height: 21px;
text-decoration: none;
color: #FFFFFF;
float: left;
display: block;
font-weight: bold;
font-style: normal;
}
#header ul a:hover {
color: #000000;
background-color: #CCCCCC;
}
#header ul .current {
color: #000000;
background-color: #666666;
}
a.current:hover {
color: #FF0000;
background-color: #0000FF;
}



HTML...

<div id="wrapper">
<div id="header">
<div id="navigation">
<ul id="mainNav" name="mainNav">
<li id="homeLink"><a class="current" href="index.html" title="Take me Home">Home</a></li>
<li id="advLink"><a href="adventures.html" title="Adventures Page">Adventures</a></li>
<li id="panoLink"><a href="panoramics.html" title="Panoramic Pictures">Panoramics</a></li>
</ul>
</div>
</div>

Cary
04-14-2008, 06:31 AM
Try this styling. I used "#mainNav" instead of "#header ul" to simplify the selectors.

/* --- This will position the main areas of the page - the header (banner), navigation bar and footer--- */
#header {
position: relative;
height: 180px;
width: 900px;
background: url(../assets/dock-jumping-banner.jpg) no-repeat top left;
}

#mainNav {
position: absolute;
left: 0;
bottom: 0;
margin:0; /* Removed default margin and padding from ul element. */
padding:0;
list-style: none;
/* --- the following three lines are used to achieve opacity or transparency in the main nav bar --- */
filter: alpha(opacity=85);
-moz-opacity: .85;
opacity: .85;
/* -------------------------- */
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
background: #999999;
}

#mainNav li {
float: left;
}

#mainNav a {
padding: 0 1.2em;
font-size: 14px;
line-height: 21px;
text-decoration: none;
color: #FFFFFF;
float: left;
display: block;
font-weight: bold;
font-style: normal;
}

#mainNav a:hover {
color: #000000;
background: #CCCCCC;
}

#mainNav a.current { /* added the "a" in front of ".current" */
color: #000000;
background: #666666;
}

#mainNav a.current:hover {
color: #FF0000;
background: #0000FF;
}

The lack of "#header ul" in front of "a.current:hover" leaves that selector with a lower specificity (http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html) than the "#header ul a:hover" styling, so the "#header ul a:hover" styling was given priority. By adding "#mainNav" to "a.current:hover", its specificity was raised high enough to give it priority.

Cary
04-14-2008, 06:52 AM
Or if you don't want the current link to change when hovered you could use this:

#mainNav a.current, #mainNav a.current:hover {
color: #000000;
background: #666666;

liquidmonkey
04-14-2008, 06:09 PM
FANTASTIC!!! works great!!

and that about leaving the selector with a lower specificity is exactly what i thought was happening but did not know how to fix it.

thanks a million!!!!