Home/ Questions/Q 9140931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T09:34:51+00:00

I am trying to get my navigation bar to have a current page indicator

  • 0

I am trying to get my navigation bar to have a current page indicator and I have researched every article possible, as well as, followed exact examples, but it still will not work.

I am using a sprite image of only two images. The image is width of 480, height 40 with each image at width 240, height 40. One side is blue and the other side is yellow.

I want to have the off-state to be the blue side, and then have the hover, active and current state be the yellow side. However, I dont care to have an active state at the moment.

So, my question is: my off state(blue side), hover state(yellow side) work perfect. I just need my current state(yellow side) to work. So, when you click on the menu item the image stays yellow.

I apologize for any horrible coding, as this is my first attempt

This is a portion of what I have for my html: (I will use just one of the three menu items, profile.)

<body bgcolor="CEB86C"; class="profile">

    <div id="navigation">
        <ul>
            <li><a class= "news" href="news.html" title"news"></a></li> 
            <li><a class="profile " href="index.html" title"profile"></a><li>
            <li><a class= "about" href="about.html" title"about"></a><li>
        </ul>
    </div>

Here is the CSS:

#navigation ul {
    list-style: none;
    text-align: center;
}
#navigation li {
    display: inline;
}
#navigation li a {
    text-indent: -5000px;
    display: inline-block;
    height: 40px;
}
#navigation li a.profile {
    width: 240px;
    background: url(images/profile.jpg);
    text-decoration: none;
}
#navigation li a.profile:hover {
    background: url(images/profile.jpg);
    background-position: -240px;
    text-decoration: none;
}
#navigation li a.profile:current {
    background: url(images/profile.jpg);
    background-position: -240px;
    background-repeat: no-repeat;
    text-decoration: none;
}

I appreciate any input and thank you in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming that you change the class on the body depending on which page you are on then you can just modify the last css declaration to read:

    .news #navigation li a.news,
.profile #navigation li a.profile,
.about #navigation li a.about {
    background:url(images/profile.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

    Edit – if you have 3 separate images then you could do something like:

    .news #navigation li a.news {
    background:url(images/news.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

.profile #navigation li a.profile {
    background:url(images/profile.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}

.about #navigation li a.about {
    background:url(images/about.jpg);
    background-position: -240px; 
    background-repeat: no-repeat;
    text-decoration:none;
}
    • 0