Get a free trial // Grow your CSS skills // Land your dream job

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

    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

    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

    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