Author |
Message |
Kdawg
Senior WebHelper
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Wed May 07, 2003 10:23 pm (20 years, 11 months ago) |
|
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. |
|
|
|
|
SfCommand
Senior WebHelper
Joined: 10 Nov 2002
Posts: 143
Location: UK
|
Posted:
Wed May 07, 2003 10:38 pm (20 years, 11 months ago) |
|
|
|
|
Kdawg
Senior WebHelper
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Wed May 07, 2003 11:09 pm (20 years, 11 months ago) |
|
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? |
|
|
|
|
Daniel
Team Member
Joined: 06 Jan 2002
Posts: 2564
|
Posted:
Thu May 08, 2003 7:15 am (20 years, 11 months ago) |
|
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 ). 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. |
________________________________
|
|
|
|
Robert Wellock
WebHelper
Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK
|
Posted:
Thu May 08, 2003 12:59 pm (20 years, 11 months ago) |
|
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 |
|
|
|
Kdawg
Senior WebHelper
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Sun May 18, 2003 5:48 am (20 years, 11 months ago) |
|
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? |
|
|
|
|
Robert Wellock
WebHelper
Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK
|
Posted:
Tue May 20, 2003 11:43 am (20 years, 11 months ago) |
|
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/ |
|
|
|
|
Page generation time: 0.237926 seconds :: 18 queries executed :: All Times are GMT
Powered by
phpBB 2.0
© 2001, 2002 phpBB Group :: Based on an FI Theme