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 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2011
    Location
    Perth, Western Australia
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I place text at the bottom of a page???

    Hi,
    Can someone please tell me how to align text to the bottom of a page. For example in some sites, at the bottom it will say that this site was created by "the Author's name". I triend using the absbottom value of the align property but when I looked up on w3schools.com they said that the align property is deprecated. So what can I do now??? because I want to put my name at the bottom of my webpage I have designed....

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by trev777 View Post
    Hi,
    Can someone please tell me how to align text to the bottom of a page. For example in some sites, at the bottom it will say that this site was created by "the Author's name". I triend using the absbottom value of the align property but when I looked up on w3schools.com they said that the align property is deprecated. So what can I do now??? because I want to put my name at the bottom of my webpage I have designed....
    align and w3schools are both deprecated,
    can you post a link to that site or to a test page?

    best regards

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    w3schools isn't deprecated.

    Anyway, something like this maybe?

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                html,body{
                    height: 100%;
                    margin: 0px 0px 0px 0px;
                    padding: 0px 0px 0px 0px;
                }
                #wrapper {
                    height: 100%;
                    width: 80%;
                    border: 1px solid red;
                    margin: 0px auto 0px auto;
                    position: relative;
                }
                #footer {
                    width: 100%;
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
                    border: 1px solid green;
                }
            </style>
        </head>
        <body>
            <div id="wrapper">
                <div id="header">
                    <h1>Hello world</h1>
                </div>
                <div id="content">
                    <p>Some content</p>
                </div>
                <div id="footer">
                    <div>This website built by me.</div>
                </div>
            </div>
        </body>
    </html>
    Last edited by bullant; 04-09-2011 at 11:46 AM.

  • #4
    New Coder
    Join Date
    Apr 2011
    Location
    Perth, Western Australia
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    @oesxyl: here is the link.

    Here is the link to the page I saw it on. http://www.w3schools.com/TAGS/att_p_align.asp

  • #5
    New Coder
    Join Date
    Apr 2011
    Location
    Perth, Western Australia
    Posts
    21
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks Mr. Bullant.

    Thank you!

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nice! thanks

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    This'll work if your content and header take up less than 100% of the viewport height. If that isn't the case then the footer will be on top of the content.

    Have a look here for a "sticky footer" approach that avoids this.


  •  

    Posting Permissions

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