Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: footer

  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts

    footer

    I was wondering how i would write the css code that that if i have a code:|

    example code:

    <div id="content">
    <p>text text text</p>
    </div>

    <div id="footer">
    <p>footer text</p>
    <img src="image">
    </div>

    how would i make the footer move down the page if i put more content in the id="content?

    with the css can i use position:... or padding:...?

    thanks in advanced

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    CSS Margin will give the <div> more spacing between the footer and content like so

    Code:
    <style type="text/css">
    #footer {
    margin-top: 50px;
    }
    </style>
    You can put any value in there, and it will give the footer <div> that much margin on the top. This goes between the <head></head> tags.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    and that way when i add more content it wont over lap the footer? it will just move the footer down?

  • #4
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well <div> elements are block elements, meaning that by default (without any extra CSS that changes the default settings) they will automatically fill horizontally the whole space they can in the container (the window or another HTML element) and the next element will automatically start on the next line. So even without my CSS, the footer will always be displayed below the content, its just that my code makes the footer move an extra 50px down from the content.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oh really, i didnt know that, thank you

    the reason i was asking was because my footer on my old site wouldnt move the text in my content would just over lap it, could that be because i was using the position: in css, i heard that i shouldnt be using position: i should use padding and margin instead to position my sutff

  • #6
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Well there are multiple methods of displaying with CSS, but if you position absolutely, then things will overlap if you aren't careful.

    Here is a good resource about CSS positioning that can clear it up.

    http://kilianvalkhof.com/2008/css-xh...ioning-part-1/
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #7
    New Coder
    Join Date
    Nov 2008
    Posts
    32
    Thanks
    2
    Thanked 0 Times in 0 Posts
    o ok thank you very much for all your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •