CSS Links

Discussion in 'CSS' started by heyman12, Sep 28, 2008.

0
  1. #1
    I have 3 buttons, one is idle, one is hover, and one is active. By active, I mean, the link is the "active" shows that its active when viewing the page.

    
<a href="/" class="rollover1"></a>
    Code (markup):
    
a.rollover1 {
display: block;
height: 40px;
width: 100px;
text-decoration: none;
background: url("img/homeoff.gif") no-repeat;
}

a.rollover1:hover {
background: url("img/homeovr.gif") no-repeat;
    Code (CSS):
    I have homeon.gif to be "on" when the index is being viewed, but I don't know the CSS to make it work.
     
    heyman12, Sep 28, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well...

    First, assuming this is a MENU, you probably shouldn't be wasting a class on the anchor, since you can inherit off the parent LIST (you do have your menu in a list, right?)

    Second, you'll have a delay on mouse-over because you are using two separate images. Combine those down and just slide the background-position around to show the different states.

    Third, without any text fallback your links are meaningless, you may want to investigate

    Finally, there are two approaches to what you want to do - one involves adding a class 'current' to the anchor to trip that it's the current page. The other way involves an assload of code putting classes and/or id's on each menu item and lining them up with an ID on the body tag. (I prefer the former technique)
     
    deathshadow, Sep 28, 2008 IP