4WebHelp
 FAQ  •  Search  •  User Groups  •  Forum Admins  •  Smilies List  •  Statistics  •  Rules   •  Login   •  Register
Toggle Navigation Menu

 Align text at bottom
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic
Author Message
Kdawg
Senior WebHelper
Senior WebHelper


Joined: 21 Apr 2003
Posts: 153

PostPosted: Wed May 07, 2003 10:23 pm (14 years, 5 months ago) Reply with QuoteBack to Top

It there a way to put text at the bottom of a page, like you can center text horizontaly but can you put it at the bottom vertically.
OfflineView User's ProfileFind all posts by KdawgSend Personal Message
SfCommand
Senior WebHelper
Senior WebHelper


Joined: 10 Nov 2002
Posts: 143
Location: UK

PostPosted: Wed May 07, 2003 10:38 pm (14 years, 5 months ago) Reply with QuoteBack to Top

Yes. (If you're using CSS then it's easy) Put the following code in your page:
Code:
<div class="bottom">Some stuff to go at the bottom of my page</div>


Then in your stylesheet (or inline style declaration), put:
Code:
div.bottom {position: absolute; bottom: 0px;}

________________________________
Miguel

http://community.34sp.com
http://www.miguel.me.uk | http://www.sfcommand.co.uk | http://www.ssdg.org.uk
OfflineView User's ProfileFind all posts by SfCommandSend Personal MessageVisit Poster's Website
Kdawg
Senior WebHelper
Senior WebHelper


Joined: 21 Apr 2003
Posts: 153

PostPosted: Wed May 07, 2003 11:09 pm (14 years, 5 months ago) Reply with QuoteBack to Top

First I have this code and it doesnt center it horizontaly, it is off to the right.
Code:
<center>
<div class="bottom">HTTP 404 - File not found
</div>
</center>

Second is there any way to center somthing vertically?
OfflineView User's ProfileFind all posts by KdawgSend Personal Message
Daniel
Team Member



Joined: 06 Jan 2002
Posts: 2564

PostPosted: Thu May 08, 2003 7:15 am (14 years, 5 months ago) Reply with QuoteBack to Top

Code:
div.bottom { position: absolute; bottom: 0px; text-align: center }


should do it. I don't know a way of centering vertically without a script (and no, I don't know of a script either Razz). Something to remember is that the code above, AFAIK, always puts the text at the bottom of the window, so if your page is quite long, the text won't appear at the end, but in the middle.

________________________________
Image
OfflineView User's ProfileFind all posts by DanielSend Personal Message
Robert Wellock
WebHelper
WebHelper


Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK

PostPosted: Thu May 08, 2003 12:59 pm (14 years, 5 months ago) Reply with QuoteBack to Top

This a complete CSS method of centring a box both horizontally and vertically:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   
    <title>CSS Centre by Robert</title>
<style type="text/css">
body
    {
    color: white;
    background-color: black;
    margin: 0px;
    padding:0px;
    height: 100%;
    }
#line
    {
    border-bottom : 1px dotted #FFF;
    border-top : 1px dotted #FFF;
    color: white;
    background-color: white; 
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }
   
#content   
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: white;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible;
    border : 3px dotted #FFF; color: green;
    }
</style>
  </head>

  <body>
    <div id="line">
      <div id="content">
          <br />
           Centred Box
          <br />
        </div>
    </div>
  </body>
</html>

________________________________
};-) http://www.xhtmlcoder.com/

Last edited by Robert Wellock on Mon May 19, 2003 4:20 pm, edited 3 times in total
OfflineView User's ProfileFind all posts by Robert WellockSend Personal MessageVisit Poster's Website
Kdawg
Senior WebHelper
Senior WebHelper


Joined: 21 Apr 2003
Posts: 153

PostPosted: Sun May 18, 2003 5:48 am (14 years, 5 months ago) Reply with QuoteBack to Top

Look in the left frame of www.stingbaseball.org where it says "Page design and coding by Kirk Robinson", how can I get that centered it the frame?
OfflineView User's ProfileFind all posts by KdawgSend Personal Message
Robert Wellock
WebHelper
WebHelper


Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK

PostPosted: Tue May 20, 2003 11:43 am (14 years, 5 months ago) Reply with QuoteBack to Top

The simple solution using absolute positioning would be to supply the <div> box with a width and position it at 50% horizontal then use a negative value for margin-left exactly halve the value of the full division box width thus the text is pushed back left by 100px thus giving the illusion of a centred text, for example:

Code:
.bottom {
  position: absolute;
  left: 50%;
  width: 200px;
  bottom: 0;
  margin-left: -100px;
}


You may also want to add text-align: center; since the above moves the box.

________________________________
};-) http://www.xhtmlcoder.com/
OfflineView User's ProfileFind all posts by Robert WellockSend Personal MessageVisit Poster's Website
Display posts from previous:      
Post New TopicReply to Topic
View Previous Topic Print this topic View Next Topic


 Jump to:   




You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot edit your posts in this forum.
You cannot delete your posts in this forum.
You cannot vote in polls in this forum.


Page generation time: 0.093057 seconds :: 18 queries executed :: All Times are GMT
Powered by phpBB 2.0 © 2001, 2002 phpBB Group :: Based on an FI Theme