The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Getting Header Image to sit on top of the navigation image

  • # March 2, 2009 at 9:30 pm

    I am designing a website am having trouble getting one area of the css to work. I am trying to get the the header image to sit on top of the navigation image. The header file is a transparent gif that has a little area that I want to run into the nav. When I open it up with Web expression it looks right but when I actually display it in firefox the nav.jpg image is on top of the fullheader.gif. I have searched all over the web but couldn’t find any answers.

    I have attached a file that contains the layout.



    # March 3, 2009 at 3:00 am

    This reply has been reported for inappropriate content.

    Looks fine to me in FF3 on a Mac. Can you be more specific in your problem?

    Also, upload these files to a server and gives us a link, people are not generally willing to download a .zip.

    # March 3, 2009 at 8:53 am

    Ok I posted them up to

    It still doesn’t look right to me. I changed the color so it would stand out better. Basically I want to orange header to sit on top of the sliver nav. If you look in the bottom left corner of the orange header you will see when I wan’t it to overlap.


    # March 3, 2009 at 10:14 am

    This reply has been reported for inappropriate content.

    Aaahhhhh. The answer is rather simple.

    Your header image is 120px tall, but you’ve set the height div that it is in to 110px. Change that to 120px.

    # March 3, 2009 at 1:20 pm

    That didn’t seem to work. I updated the website with what you suggested. All it did was move the nav bar down. I want the header to sit partially on top of the nav bar.

    # March 3, 2009 at 1:35 pm

    This reply has been reported for inappropriate content.

    Ah, sorry, I’ve been misreading your post the whole time.

    Here you go:

    #masthead {
    height: 120px;

    #top_nav {

    # March 3, 2009 at 2:07 pm

    That worked Doc. Thank You, Thank You, Thank You!


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed