Tutorial9 Community Forum
Not signed in (Sign In)
Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Web Development Support: [Closed] CSS Rollover Issue

Bottom of Page

1 to 5 of 5

  1. Smitty Apr 18th 2008 edited
     Report Post
    I'm fairly new to website coding and I'm currently working on a site for school. I'm trying to do my rollovers in CSS and I'm having some problems. Every time I click on one of the links it disappears after and the button doesn't function anymore. Any help anyone can give me would be appreciated, I've looked at a bunch of topics that I found using google but when I tried none of them seemed to work

    The relevant code is as follows:

    CSS
    #nav {
    width: 791px;
    height: 29px;
    top: 200px;
    left: 0px;
    background-image: url(images/nav.jpg);
    background-repeat: no-repeat;
    }

    .navover a:link {
    background-image: url(images/nav_bg.gif);
    width: 113px;
    height: 30px;
    display:block;
    float: left;
    }

    .navover a:hover{
    background-image: url(images/nav_over.gif);
    width: 113px;
    height: 30px;
    display:block;
    float: left;
    }

    .navover a:active{
    background-image: url(images/nav_over.gif);
    width: 113px;
    height: 30px;
    display:block;
    float: left;
    }

    .navover a: visited{
    background-image: url(images/nav_bg.gif);
    width: 113px;
    height: 30px;
    display:block;
    float: left;
    }

    HTML
    <div id="nav">
    <div class="navover">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    </div>
    </div>
  2. amycullen2 Apr 19th 2008
     Report Post
    Do you have a live page I could look at? It's easier to debug when there's a live page.
  3. Storm Apr 19th 2008
     Report Post
    A couple questions:

    1: Is the background image 1 single long image?
    2: Are the background images just tiny images that repeat on the x/y axis?

    This tutorial may help you some, depending on what you're trying to accomplish. As amycullen2 said, a live example would be best though.
  4. Smitty Apr 21st 2008 edited
     Report Post
    EDIT: Thanks for the help guys, I seem to have fixed the problem by myself :)
  5. Storm Apr 21st 2008
     Report Post
    Yeah, it tends to do that sometimes.

1 to 5 of 5