Header/Footer Issue (5 posts)

  1. MaddTechWF
    Posted 5 years 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

  2. Joms
    Posted 5 years 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>

    .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/

  3. MaddTechWF
    Posted 5 years ago #

    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.

  4. Joms
    Posted 5 years 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.

  5. MaddTechWF
    Posted 5 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.