Header/Footer Issue

  • MaddTechWF

    (@maddtechwf)


    12 years, 10 months ago

    I’m having an issue getting my footer and header to work correctly together. I will provide my current code below.

    I want to have a background image span the top of my page for my header and also another separate image to span the bottom of the page. I will provide the image to what I want to create. I’m using a 960px width wrapper that is centered in the page. I want a specific image to span the top of the page where the header and menu will appear in and then another image at located at the bottom that will have my footer in. I want the footer to be “sticky” at the bottom of the page.

    What I Want

Viewing 4 replies - 1 through 4 (of 4 total)
  • Joms

    (@jomsky)

    12 years, 10 months ago

    There are different ways on how to achieve this. This is what I would suggest:

    Remove/change the width of your wrapper so it expands to 100% width of the screen.

    Your HTML should look something like this:
    <div id=”header”><div class=”wrap”>HEADER</div></div>
    <div id=”content”><div class=”wrap”>CONTENT</div></div>
    <div id=”footer”><div class=”wrap”>FOOTER</div></div>

    CSS:
    .wrap {width:960px;margin:0 auto;}
    #header {background:url(images/header.jpg) repeat-x;}
    #footer {background:url(images/footer.jpg) repeat-x;}

    As for the sticky footer you could try this: http://css-tricks.com/snippets/css/sticky-footer/

    Thread Starter MaddTechWF

    (@maddtechwf)

    12 years, 10 months ago

    Jomsky,
    When I use the above code, it leaves a white border around the top, left, and right sides of the images used for the background.

    Joms

    (@jomsky)

    12 years, 10 months ago

    It would help if you could provide a link on where I can see the problem. It could be that the image itself has a thin white border or the style for the div has a border applied to it, among other reasons.

    Thread Starter MaddTechWF

    (@maddtechwf)

    12 years, 10 months ago

    I don’t have it live. It’s on my test server. I will google it.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header/Footer Issue’ is closed to new replies.