Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Position of footer

Discussion in 'Website Design Forum:' started by Farmer Ann, Jan 18, 2010.

  1. Farmer Ann

    Farmer Ann Member

    I want my footer to automatically position itself at the bottom of the text on my page so I can edit the text in the future without altering the footer.
    I have used New CSS Sticky Footer - 2009 - HTML for Bottom of Page Footer which works fine until I add a top and bottom margin to my paragraphs, and then the footer obscures the bottom of the text.:(
    Has anyone got a solution.
     
  2. Alex L

    Alex L Senior Member

    Not sure about your coding but do you have text in the footer in <p> tags?
     
  3. Ant

    Ant Member

    Okay i'm slightly confused on this. Top and bottom paragraph in the footer, Or in the text above it etc?
     
  4. tbwcf

    tbwcf Active Member

    if you post a link we might be able to help...
     
  5. Farmer Ann

    Farmer Ann Member

    Sorry it is not online. The contents of the footer is fine it appears as it should inside the footer. The problem is the position of the footer is obscurring the bottom of the content within my wrapper.
    The CSS link above instructs you to remove all margins and padding to ensure the footer is positioned correctly
    *{padding:0;
    margin:0;
    },
    and this works - but I want a space between my paragraphs so I have added a top and bottom margin
    p{margin:5px 0 5px 0}
    but the minute this is added the bottom of the text in my main content is obscured by the footer. I could drop this by playing with the margin-top command in the footer or the padding-bottom command in the content, but I want to ensure any bodge is is going to work in all browsers and does not need adjusting everytime I change the text!
     
  6. tbwcf

    tbwcf Active Member

    I don't think I can help without a link sorry.
     
  7. Aarlev

    Aarlev Member

    Hi Ann,

    If it's not online yet, just post your HTML and CSS here instead. Otherwise it's near impossible to determine where the issue lies.
     
  8. Farmer Ann

    Farmer Ann Member

    Thanks for the offer to look through the code, I am really still playing around with the templates for my pages and so it wont be available online for a while. I am going to use a temporary fix for now, and revisit it once it is more together.
    If it helps my footer CSS is this:
    #footer {
    border: 1px solid #000000;
    background-color: #ffffff;
    width: 800px;
    margin: 0 auto;
    padding: 2px 0 2px 0;
    position:relative;
    margin-top: -40px;
    height: 40px;
    z-index:6;
    clear:both;
    }
    and in the footer in HTML is placed subsequent to my wrapper and contents, and my content CSS is
    #content {
    position: relative;
    top:8px;
    padding-bottom: 40px;
    background-color: #FFFFFF;
    }
    As I already said I have followed the footer instructions from the above link designed to ensure shorter pages footers stay at the bottom of the page but will move lower on longer pages. It requires the removal margings and padding - and it works beautifully! My problem is I have readded margins for my paragraph which it does not seem to cope with.
     
  9. Farmer Ann

    Farmer Ann Member

    I found one of my errors in the footer definition. I have declared margins twice, once to centre the footer (width 800px) the other to move the margin up by -40px to position it correctly vertically.
    I have replaced both oth these with:
    margin: -40px auto;
    but this no longer centralises the footer horizontally.
    Please can someone let me know where I am going wrong?
     
  10. Farmer Ann

    Farmer Ann Member

    OK done it!
     

Share This Page