#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep Power
    0

    Cant find problem, images stopped changing on rollover, and 6 of the 7 wont show...


    Creating a website for my girlfriends dog breeding business

    silverpinelabradors *dot com*

    Im having real trouble creating a CSS nav bar.... At one point while creating it, the home button would change on rollover, as soon as I added the rest of the buttons, the home button stopped changing, and the other 6 buttons are blank (but space and links are obviously there). I have been trying to figure out what the issue is for 3 hours

    here is the style sheet:

    <style>

    /* layout */

    html, body {
    margin: 0;
    padding: 0;
    }

    #page-container {
    width: 1250px;
    margin: auto;
    }

    #header {
    background: white;
    Height: 275px;
    }

    #content {
    background: white;
    margin-left= 220px;
    }

    #navbar {
    background: #003300;
    float: left;
    }

    #footer {
    background: #003300;
    Height: 66px;
    clear: both;
    }

    /* Navbar */

    .menu {
    margin: 0;
    padding: 0;
    width: 200px;
    list-style: none;
    background: #003300;
    }
    .menu li {
    padding: 0;
    margin: 0;
    height: 50px;
    list-style: none;
    background-repeat: no-repeat;
    }
    .menu li a, .menu li a:visited {
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    height: 350px;
    background-repeat: no-repeat;
    }

    .home {background-image: url(images/home2.jpg);}
    .home a {background-image: url(images/home1.jpg);}
    .ourlabs {background-image: url(images/ourlabs2.jpg;}
    .ourlabs a {background-image: url(images/ourlabs1.jpg;}
    .upcominglitters {background-image: url(images/upcominglitters2.jpg;}
    .upcominglitters a {background-image: url(images/upcominglitters1.jpg;}
    .becomeaparent {background-image: url(images/becomeaparent2.jpg;}
    .becomeaparent a {background-image: url(images/becomeaparent1.jpg;}
    .studservice {background-image: url(images/studservice2.jpg;}
    .studservice a {background-image: url(images/studservice1.jpg;}
    .training {background-image: url{images/training2.jpg;}
    .training a {background-image: url{images/training1.jpg;}
    .pedigreesandhealth {background-image: url(images/pedigreesandhealth2.jpg;}
    .pedigreesandhealth a {background-image: url(images/pedigreesandhealth1.jpg;}

    ul.menu li a:hover {background: none;}

    </style>


    Check the HTML source code at silverpinelabradors *dotcom*

    Im grating my eyes out to figure out what is going on
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    829
    Rep Power
    275
    1. you forgot to close out the url bracket starting with .ourlabs
    2. I think what you are really after is this
    Code:
    .home a{background-image: url("images/home2.jpg");}
    .home a:hover {background-image: url("images/home1.jpg");}
    .ourlabs a{background-image: url("images/ourlabs2.jpg");}
    .ourlabs a:hover{background-image: url("images/ourlabs1.jpg");}
    .upcominglitters a{background-image: url("images/upcominglitters2.jpg");}
    .upcominglitters a:hover{background-image: url("images/upcominglitters1.jpg");}
    .becomeaparent a{background-image: url("images/becomeaparent2.jpg");}
    .becomeaparent a:hover {background-image: url("images/becomeaparent1.jpg");}
    .studservice a{background-image: url("images/studservice2.jpg");}
    .studservice a:hover {background-image: url("images/studservice1.jpg");}
    .training a{background-image: url("images/training2.jpg");}
    .training a:hover {background-image: url("images/training1.jpg");}
    .pedigreesandhealth a{background-image: url("images/pedigreesandhealth2.jpg");}
    .pedigreesandhealth a:hover {background-image: url("images/pedigreesandhealth1.jpg");}
    (notice the use of the :hover to give you the rollover effect)
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    2
    Rep Power
    0
    Thanks a ton! I use CONtext as my editor and I was sure that It would point out an error like that (a missing ")" )

    I took your advice and avast! I have my whole nav bar showing, but now, on rollover, the image just goies transparent and all I see is the background behind it instead of the rollover image...


    Im guessing its a problem with the floats? Is the floated "cell" covering the rollover images?

    silverpinelabradors dot com
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    829
    Rep Power
    275
    this rule
    Code:
    ul.menu li a:hover {
         background: none repeat scroll 0% 0% transparent;
    }
    is causing the "no image on hover" issue, so, remove it and your hover images will come back. (tested in firefox)

IMN logo majestic logo threadwatch logo seochat tools logo