Highlighting he current page

Discussion in 'ASP .Net' started by jonefer, Feb 25, 2008.

  1. jonefer

    jonefer Guest

    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;
    }
     
    jonefer, Feb 25, 2008
    #1
    1. Advertising

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

    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
     
    Peter Bucher [MVP], Feb 27, 2008
    #2
    1. Advertising

  3. jonefer

    jonefer Guest

    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.

    "Peter Bucher [MVP]" wrote:

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

    > 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
    >
     
    jonefer, Feb 27, 2008
    #3
  4. 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.

    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
     
    Peter Bucher [MVP], Feb 27, 2008
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Manu
    Replies:
    1
    Views:
    6,104
    Natty Gur
    Jul 20, 2003
  2. Replies:
    1
    Views:
    851
  3. Matthew Heidemann
    Replies:
    14
    Views:
    247
    eT Ma
    Mar 22, 2011
  4. Jack
    Replies:
    3
    Views:
    612
    Tad J McClellan
    Dec 22, 2008
  5. Replies:
    3
    Views:
    385
Loading...

Share This Page