nav rollovers

Discussion in 'CSS' started by fotoviva, Jul 3, 2008.

0
  1. #1
    Hi

    I am using the following css code for my navs:

    .white
    { font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px; text-decoration:none;
    color: #ccc; padding-left:20px; padding-right:15px;
    background-image:url('images/nav.gif'); background-position:0px 0px; background-repeat:no-repeat; }

    :hover.white
    { background-image:url('images/nav2.gif'); background-position:0px 0px; background-repeat:no-repeat; color: #fff; }

    Basically this changes the text slightly and the colour of the small graphic. If it is not the best code practice please let me know! It seems to work fine.

    > The problem I have is I want the nav graphic to stay on the rollover version when a user is on that page, so they know where they are on the site. Is this possible with css?

    Thanks :)
     
    fotoviva, Jul 3, 2008 IP
  2. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Anyone...?
     
    fotoviva, Jul 4, 2008 IP
  3. greboguru

    greboguru Member

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #3
    Hi,

    You could just define another style e.g.

    
[B].currentpage
{ 
    background-image:url('images/nav2.gif'); 
}[/B]
    Code (markup):
    and have

    <a href="blah" class="white [B]currentpage[/B]">something</a>
    Code (markup):
    to identify the current page.

    Is that what your after? There are other ways to achieve this ....

    gG
     
    greboguru, Jul 4, 2008 IP
  4. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yes, it's possible and fairly easy to implement. You need to apply a class or an ID to the body or other container elements, and then style your buttons accordingly. Here's a quick example using the body.

    
<body id="aboutPage">
<div class="aboutButton">Content</div>
</body>
    Code (markup):
    
div.aboutButton { background-color: red; }
body#aboutPage div.aboutButton { background-color: blue; }
    Code (markup):
    Unless the body's ID is set to "aboutpage", the background will remain red. If the body is set to "aboutpage", then the button's background will turn blue.

    That's just one way of doing it. There are more complex ways to do with PHP/ASP which would automate the tasks, but I'm not going to dive into that one right now. ;) Hope this helps!
     
    steelfrog, Jul 4, 2008 IP
  5. fotoviva

    fotoviva Active Member

    Messages:
    265
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    60
    #5
    Thanks for the replies!

    I created a new style for .currentpage as suggested and this works fine. So simple I don't know why I didn't think about it in the first place!

    Cheers :)
     
    fotoviva, Jul 7, 2008 IP