www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to put text at the top and bottom of a page?

  1. #1
    Join Date
    Dec 2007
    Posts
    3

    How to put text at the top and bottom of a page?

    I'm having trouble putting some text at the top and bottom of a page, i am very new to this and i am only working on a welcome page at the moment but i need to have things laid out like below if possible.

    Welcome to www.example.co.uk


    <IMAGE>


    Please wait a moment and you will be redirected to the forums.

    I found a previous post here>http://www.webdeveloper.com/forum/sh...ad.php?t=92996 which is helpful but when i use that code i cannot get the bottom text to stay in the center of the page i hope that is clear enough

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Do you want the bottom text right at the bottom of the page, or just below the image?

    Absolutely positoning something at the bottom will cause it to overlap the image if the user's browser window is too small.

    If you just want the text above and below the mage, then simply wrapping each text section in paragraph tags ( <p> </p> ) wll do that.

  3. #3
    Join Date
    Dec 2007
    Posts
    3
    Sorry for the late reply, i need the text to be absolutely central and at the very bottom.

    I am trying to make a very simple welcome/home page that redirects people to the forums, but i've not tried anything like this before so it's a little crazy jumping in and running before i can walk

    I did try text above and below the image but it doesnt look right so i was hoping for a neater absolute top and bottom bit of text like in the first post if possible.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Code:
    <p style=" position: absolute; bottom: 0; left: 0; width: 100%; text-align: center;">Please wait a moment and you will be redirected to the forums.</p>
    should position the lower text at the bottom.

  5. #5
    Join Date
    Dec 2007
    Posts
    3

    Thumbs up

    Amazing how something that looks so simple can be so hard to do thank you that works perfectly and i do see what you mean about the text overlapping if the screen is too small but thats a small price for a neat looking page.

  6. #6
    Join Date
    Jan 2013
    Posts
    2
    Hi, I have followed the advice given in this forum to put the code: <div style="position: relative;background-color: blue; width: 600px; height: 800px;">

    <div style="position: absolute; bottom: 5px; background-color: green">
    TEST 2010
    </div>
    </div>
    However my page has now disappeared and all I am left with is a blue box.

    Please can someone help me to get my page back? Thanks

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

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



Recent Articles