Trouble getting Nav Bar image to show up

  • Hello,
    I’m an idiot and I suppose I’ve made a really stupid mistake with my trial-and-error method, but I’m hoping someone will pity me and help out anyways.

    I added the css nav bar from my web page (such as it is so far): https://www.mbairdgraphics.com/ei_web/index.html
    I can see that the links are working, but no images: https://www.mbairdgraphics.com/ei_web/blog/

    Here’s the css that I’ve changed from the default stylesheet:

    /* Begin Typography & Colors */
    body {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
    background: url(images/content_bkg.jpg) #84ab25 repeat-y top center;
    color: #333;
    text-align: center;
    }

    #page {
    background-color: white;

    text-align: left;
    }
    #banner {
    width: 786px;
    height: 235px;
    margin-bottom: 0;
    }
    #header {
    width: 786px;
    height: 235px;
    margin 0;
    background: url(images/header.jpg) no-repeat top;
    }
    /* Begin Structure */
    body {
    margin: 0 0 20px 0;
    padding: 0;
    }

    #page {
    background-color: white;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    padding: 0;
    width: 786px;

    }

    #header {

    margin: 0;
    padding: 0;
    height: 235px;
    width: 100%;
    }

    #headerimg {
    margin: 0;

    }
    #mainNav {
    width: 631px;
    height: 94px;
    background: url(images/mainnav_img.jpg);
    margin: 10px auto;
    padding: 0;
    position: relative;
    text-indent: -9000px;
    }
    #mainNav li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
    }
    #mainNav li, #mainNav a {
    height: 94px;
    display: block;
    }

    #learnmore {
    left: 0; width: 150px;
    }
    #participate {
    left: 151px; width: 250px;
    }
    #localoffices {
    left: 401px; width: 231px;
    }

    #learnmore a:hover {
    background: transparent url(images/mainnav_img.jpg) 0 -94px no-repeat;
    }
    #participate a:hover {
    background: transparent url(images/mainnav_img.jpg) -151px -94px no-repeat;
    }
    #localoffices a:hover {
    background: transparent url(images/mainnav_img.jpg) -401px -94px no-repeat;
    }

    .narrowcolumn {
    float: left;
    padding: 0 70px 20px 80px;
    margin: 0px 0 0;
    width: 450px;
    }

    .widecolumn {
    padding: 0 70px 20px 80px;
    margin: 0;
    width: 450px;
    }

    The mainnav_img.jpg is in the same folder as the header.jpg and the content_bkg.jpg but I can’t figure out why they show up, but not the other one.

    Thanks for any help.

Viewing 6 replies - 1 through 6 (of 6 total)

  • You can apply them using CSS to your style.css file like so:

    #mainNav #learnmore a {
   background:transparent url(images/learnmore.jpg) no-repeat left;
}

#mainNav #learnmore a:hover {
   background:transparent url(images/learnmore_over.jpg) no-repeat left;
}

    Of course, you’ll want to repeat this pattern with the other two links.

    Hey mbaird,

    I missed these styles on first glance:

    #learnmore a:hover {
background: transparent url(images/mainnav_img.jpg) 0 -94px no-repeat;
}
#participate a:hover {
background: transparent url(images/mainnav_img.jpg) -151px -94px no-repeat;
}
#localoffices a:hover {
background: transparent url(images/mainnav_img.jpg) -401px -94px no-repeat;
}

    These are, of course, shorter than my hover style example listed above, but I think I see one of your issues. You’re positioning the hover state to place the image -94px vertically and, in two cases, negative horizontally as well, so they’re hidden.

    Since your positioning your mainNav list items absolutely, I don’t see the need for this.

    Also, you’re linking to the same image for all three nav items, but I’m sure you know this. ??

    Thread Starter mbaird

    (@mbaird)

    The nav bar uses the sprite method – https://www.alistapart.com/articles/sprites
    so there’s only one image using positioning to reveal the hover state. It is working fine in my web page, but not on the blog and I can’t figure out why.

    Rats! May have to try something else.

    Ah, I see. I’ve used that before myself for buttons.

    When looking at your original non-blog page (https://www.mbairdgraphics.com/ei_web/index.html) through Firebug, though, it looks like you’re really using separate images with a Javascript rollover.

    Thread Starter mbaird

    (@mbaird)

    Oh… guess you’re right. I did start up with the javascript, then tried the sprites method but never uploaded it. Duh! It doesn’t actually work at all. Back to the drawing board to find my css error…

    Thanks for taking the time to look it over. I’m sure I’ll get it sorted out now.

    No problem.

    If it were me, I’d probably forgo the sprites technique in this case as you don’t really have tiny images.

    Since you’ve got them split into separate images, I’d nix the JavaScript and use the CSS rollover technique that I first suggested above and it should work fine.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Trouble getting Nav Bar image to show up’ is closed to new replies.