CODEWITHSUNDEEP
htmlcssnavigation
irishlady
irishlady

Reputation: 33

Navigation bar using images and CSS with current state

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!

Upvotes: 3

Views: 7437

Answers (2)

boz
boz

Reputation: 4907

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

Upvotes: 1

Панайот Толев
Панайот Толев

Reputation: 6607

Try #navigation li a.accountbutton:active instead of :current

Upvotes: 0

Related Questions