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.

    Thanks,

    Tmac

    # 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 http://www.scom2k7.com/website/.

    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.

    Thanks,

    # 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:

    Code:
    #masthead {
    position:relative;
    height: 120px;
    z-index:9999;
    }

    #top_nav {
    margin-top:-10px;
    }

    # March 3, 2009 at 2:07 pm

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

    Tmac

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".