Highlighting he current page

J

jonefer

I've read several examples of how to create CSS to highlight the current
page- particularly the following example:


<ul id="navlist">
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="products.html" id="prodnav">Products</a></li>
<li><a href="faq.html" id="faqnav">FAQ</a></li>
<li><a href="contact.html" id="connav">contact us</a></li>
</ul>


<body id="home">

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
color: #fff;
background: #930;
}


Before reading these examples, I managed to produce the following working
menu and CSS: How do I incorporate the example above into my current menu and
CSS below:


<div style="z-index: 101; left: 0px; width: 960px; position: absolute; top:
24px;
height: 48px; background-color: #000000;">

<div style="border-right: #3399cc thin solid; z-index: 100;
left: 472px; width: 72px;
position: absolute; top: 0px; height: 16px">
<asp:LinkButton ID="lnkService" runat="server"
CssClass="NavLink" width="64px">Service</asp:LinkButton> </div>
<div style="border-right: #3399cc thin solid; z-index: 100;
left: 552px; width: 72px;
position: absolute; top: 0px; height: 16px">
<asp:LinkButton ID="lnkAccess" runat="server"
CssClass="NavLink" Width="64px">Access</asp:LinkButton> </div>
<div style="border-right: #3399cc thin solid; z-index: 100;
left: 632px; width: 72px;
position: absolute; top: 0px; height: 16px">
<asp:LinkButton ID="lnkQuality" runat="server"
CssClass="NavLink" Width="64px">Quality</asp:LinkButton> </div>
<div style="border-right: #3399cc thin solid; z-index: 100;
left: 712px; width: 72px;
position: absolute; top: 0px; height: 16px">
</div>


my css

..NavLink
{
background-color: #000000;
font-family: Century Gothic;
font-size: 11px;
color: #6699cc;
font-weight: bold;
text-decoration: none;
}

..NavLink:hover
{
background-color: white;
font-family: Century Gothic;
font-size: 11px;
color: black;
font-weight: bold;
text-decoration: none;
border-right: #3399cc thin solid;
border-top: #3399cc thin solid;
border-left: #3399cc thin solid;
border-bottom: #3399cc thin solid;
}
 
P

Peter Bucher [MVP]

Hello jonefer
I've read several examples of how to create CSS to highlight the current
page- particularly the following example:


<ul id="navlist">
<li><a href="index.html" id="homenav">Home</a></li>
<li><a href="products.html" id="prodnav">Products</a></li>
<li><a href="faq.html" id="faqnav">FAQ</a></li>
<li><a href="contact.html" id="connav">contact us</a></li>
</ul>
Click to expand...
Basically you only need the Id of the ul-Tag.
And then proceed like:

#navlist { ... }
#navlist li { ... }
#navlist li a { ... }
#navlist li a:hover, #navlist li a:active { ... }
#navlist li a.active { /* here comes the css style for the currently active
menuitem */ }

With this css, you need only implement the serverside logic
to place an class="active" attribute to all active points (in a hierarchical
menu, there can be more than one).

<li><a class="active">....
<li><a .....

--
Gruss, Peter Bucher
Microsoft MVP - Visual Developer ASP / ASP.NET, Switzerland
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community
http://www.aspnetzone.de/blogs/peterbucher/ - Auf den Spuren von .NET
http://www.peterbucher.ch/ - Meine Persönliche Seite
 
J

jonefer

yep. I know it seems really easy - but I just can't wrap my head around the
li, a, ...

because it just doesn't produce anythng reliable (yet)
I ended up creating 1 "Nav: hover" class and 1 'NavSelected' class

then I created a Select Case in VB- to check what page I'm on and set my
'Selected' CssClass to the appropriate link buttons.

Actually works nice because setting the CssClass cancels out the 'hover'
which is desired.

But I really would like to understand that css - so if you have time to
explain it in more detail, it would help. It probably also involves less
code than I've written.
 
P

Peter Bucher [MVP]

Hello Jonefer
But I really would like to understand that css - so if you have time to
explain it in more detail, it would help. It probably also involves less
code than I've written.
Click to expand...
Read, read and read too :)
I cant explain that here, that would break the sense of NGs, Forums, etc....

Keyword: css selectors

--
Gruss, Peter Bucher
Microsoft MVP - Visual Developer ASP / ASP.NET, Switzerland
http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community
http://www.aspnetzone.de/blogs/peterbucher/ - Auf den Spuren von .NET
http://www.peterbucher.ch/ - Meine Persönliche Seite
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
Help with my responsive home page 2
Dropdown menu in a fixed navbar 2
Help with Visual Lightbox: Scripts 2
How to position the *tooltip* comment on these buttons? 9
Not sure why drop-down is not working. 2
Need help with code on website (noob) 2
<Button ...> display is fine, except for two things 1

Members online

Total: 50 (members: 3, guests: 47)
Robots: 231

Forum statistics

Threads
473,997
Messages
2,570,241
Members
46,830
Latest member
HeleneMull

Latest Threads

Top