Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Images for nav buttons problem

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #164803
    cyclingg
    Participant

    I created images to use for my nav bar. Each image contains 3 images for 3 different states, all aligned vertically.

    I have it set so that the image changes when I hover my mouse. When I click the button, the third active image displays like I want it to. But, the button does not keep the 3rd image for the current page no matter what I tried. Also, the current page still displays the hover image when I hover and I do not want that.

    I cannot figure out what I am to use in order to have the current active page/button to keep the 3rd image rather than the other images.

    Here is my html:

    <div>
      <ul>
        <li>
          <a href="index.html" title="Visit our Home page"></a>
        </li>
        <li>
          <a href="aboutus.html" title="Find out about us"></a>
        </li>
        <li>
          <a href="products.html" title="Find out about our products"></a>
        </li>
        <li>
          <a href="faq.html" title="View questions and answers about our site"></a>
        </li>
        <li>
          <a href="contactus.html" title="Find out where to find us"></a>
        </li>
      </ul>
    </div>
    

    My css for 2 buttons: /horizontal navigation menu styling/

    nav {
    
        width: 980px;
        height: 100px;
        color: #fff; background: #195774;
        border-top: solid #F57E06 8px;
        border-bottom: solid #F57E06 8px;
    
    
    }
    
    nav ul {
    
        margin: 0 0 0 10px;
        padding: 0;
        height: 100px;
        list-style-type: none; /*removes bullets*/
    
    
    }
    
    nav ul li {
    
        margin-top: 12px;
        display: inline-block;
    
    
    }
    
    nav ul li a {
    
        display: inline-block; 
        width: 75px;
        height: 75px;
    
    
    }
    
    nav #home {
    
        background-image: url(images/nav/home-3-in-1-flat-75X226.png); no-repeat;
        width: 75px;
        height: 75px;
    
    
    }
    
    nav #home:hover {
    
        background-position: 0 -74px;
    
    
    }
    
    nav #home:active {
    
        background-position: 0 -148px;
    
    
    }
    
    nav #current {
    
        background-image: none;
    
    
    }
    
    nav #aboutus {
    
        background-image: url(images/nav/aboutus-3-in-1-flat-75X226.png); no-repeat;
        width: 75px;
        height: 75px;
    
    
    }
    
    nav #aboutus:hover {
    
        background-position: 0 -74px;
    
    
    }
    
    nav #aboutus:active {
    
        background-position: 0 -148px;
    
    
    }
    

    Any help would be appreciated.

    #164815
    Paulie_D
    Member

    A Codepen would be useful.

    #164837
    cyclingg
    Participant

    Re “everything is working. The :active pseudo class is not for the current page, but rather when the link is active (being clicked).”

    I understand that the :active pseudo class is not for the current page effect. I do like the :active effect; but, when I click down and release my mouse, I would like the button to remain the same image as the :active pseudo image and not have the hover image display.

    Re “Another way is to add an active or current class or id to the current section. If it’s a small site, you could do this manually for each page, or anything larger than a handful of pages, use php or your cms to add the class or id.”

    I tried adding a current id to the current page; but, could not get it to work. In my css for the current #, I set the background-image to my 3rd image. I also set the cursor state to default. But, this did not work.

    Should I change my id’s to classes for my nav bar? Should I place the id’s within the list tags instead of within the href tags?

    Edit: I followed what you said Wolf about placing an id in the body of each main section and it worked. I still have the hover image showing when I hover over the current page; but, now my 3rd image is displayed for the active page. Is it possible to prevent the hover image from displaying? In the mean time I will try some things to see if I can make the hover image not display on the current pages.

    Thanks.

    Edit 2: I think I got it working.

    The HTML is:

    The CSS is:

    nav .home {

    background-image: url(images/nav/home-3-in-1-flat-75X226.png); no-repeat;
    width: 75px;
    height: 75px;
    

    }

    nav .home:hover {

    background-position: 0 -74px;
    

    }

    nav .home:active {

    background-position: 0 -148px;
    

    }

    home .home {

    background-position: 0 -148px;
    cursor: default;
    

    }

    home .home:hover {

    background-position: 0 -148px;
    

    }

    My nav bar is behaving as I want it; the question now is “is it correct code”?

    #164840
    cyclingg
    Participant

    Okay. My last post disappeared again. I made some edits to it and it is now not displaying.

    Is there a problem on my end?

    #164842
    cyclingg
    Participant

    wolfcry911:
    Thanks for the help. I followed what you said about adding an id in the body of each current page (I only have 5; it’s for an assignment) and it worked.

    I then got rid of the hover image for the current page also.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.