PDA

Click to See Complete Forum and Search --> : Nav.Selected Issue ... Should be quick one!

new_css
02-13-2007, 06:43 AM
Hi There

I have a problem getting my navigation to work as i would like.

I have it working on hover but i would like to set a nav.selected so that i can clearly show the user where they are on the page.

Here is the code...

CSS

a.nav, a.nav:visited {
display:block;
padding:5px;
color:#005F7B;
border:1px solid #D7E8EE;
text-decoration:none;
text-align:left;
line-height:12px;
font-size:11px;
}
a.nav:hover {background:#D7E8EE; color:#7F7F7F;}


HTML


<dl>
<dt><a class="nav" href="careers.htm">Careers</a></dt>
<dt><a class="nav" href="benefits.htm">The Benefits </a></dt>
<dt><a class="nav" href="#">Current Vacancies </a></dt>
</dl>

So for example if you were on the Careers page it should be set to the hover colors!

Thanks in advance!
ToonMariner
02-13-2007, 07:29 AM
take the class attribute off the a tag and give the dl an id like so

<dl id="nav">
<dt><a href="careers.htm">Careers</a></dt>
<dt><a href="benefits.htm">The Benefits </a></dt>
<dt><a href="#">Current Vacancies </a></dt>
</dl>

This allows you to do this in your css....

dl#nav a, dl#nav a:visited {
display:block;
padding:5px;
color:#005F7B;
border:1px solid #D7E8EE;
text-decoration:none;
text-align:left;
line-height:12px;
font-size:11px;
}
dl#nav a:hover, dl#nav a#live {background:#D7E8EE; color:#7F7F7F;}



Now you will have to use some method of identifying which page you are on and use that to add id="live" to the a tag of the page you are on.

So if you were on the vacancies page your html would be

<dl id="nav">
<dt><a href="careers.htm">Careers</a></dt>
<dt><a href="benefits.htm">The Benefits </a></dt>
<dt><a href="#" id="live">Current Vacancies </a></dt>
</dl>
Centauri
02-13-2007, 07:41 AM
First, you can save a bit of typing by assigning the class to the <dl> element instead of each <dt>, and this allows you to manually assign a "current" class to a particular link <dl class="nav">
<dt><a class="current" href="careers.htm">Careers</a></dt>
<dt><a href="benefits.htm">The Benefits </a></dt>
<dt><a href="#">Current Vacancies </a></dt>
</dl>


css
.nav a, .nav a:visited {
display:block;
padding:5px;
color:#005F7B;
border:1px solid #D7E8EE;
text-decoration:none;
text-align:left;
line-height:12px;
font-size:11px;
}
.nav a:hover, .nav .current {background:#D7E8EE; color:#7F7F7F;}


Alternately, you can assign id's to each link and a unique id to each page's body tag, and use css to match them <body id="pg_career">
.
.
.
<dl class="nav">
<dt><a id="nav_career" href="careers.htm">Careers</a></dt>
<dt><a id="nav_benefit" href="benefits.htm">The Benefits </a></dt>
<dt><a id="nav-vacancy" href="#">Current Vacancies </a></dt>
</dl>


css
.nav a, .nav a:visited {
display:block;
padding:5px;
color:#005F7B;
border:1px solid #D7E8EE;
text-decoration:none;
text-align:left;
line-height:12px;
font-size:11px;
}
.nav a:hover {background:#D7E8EE; color:#7F7F7F;}
#pg_career #nav_career, #pg_benefit #nav_benefit, #pg_vacancy #nav_vacancy {background:#D7E8EE; color:#7F7F7F;}


Cheers
Graeme

edit: ToonMariner posted as I was typing, and aluded to the same thing - same ideas from Newcastle in countries oppose the globe..... :D
new_css
02-13-2007, 09:28 AM
Thanks Guys!

Problem Solved!

:-)