Author |
Message |
Kdawg
Senior WebHelper
![Senior WebHelper Senior WebHelper](images/rank_3.gif)
![](images/avatars/gallery/computers/php.gif)
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Wed May 07, 2003 10:23 pm (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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. |
|
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Kdawg Find all posts by Kdawg](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) |
![](images/spacer.gif) |
SfCommand
Senior WebHelper
![Senior WebHelper Senior WebHelper](images/rank_3.gif)
![](http://home.miguel.me.uk/pics/devil.png)
Joined: 10 Nov 2002
Posts: 143
Location: UK
|
Posted:
Wed May 07, 2003 10:38 pm (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by SfCommand Find all posts by SfCommand](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) ![Visit Poster's Website Visit Poster's Website](templates/4WebHelp2/images/lang_english/icon_www.gif) |
![](images/spacer.gif) |
Kdawg
Senior WebHelper
![Senior WebHelper Senior WebHelper](images/rank_3.gif)
![](images/avatars/gallery/computers/php.gif)
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Wed May 07, 2003 11:09 pm (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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? |
|
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Kdawg Find all posts by Kdawg](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) |
![](images/spacer.gif) |
Daniel
Team Member
![](images/rank_6.gif)
![](http://www.4webhelp.net/forums/images/daniel_avatar.php)
Joined: 06 Jan 2002
Posts: 2564
|
Posted:
Thu May 08, 2003 7:15 am (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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. |
________________________________
![Image Image](http://www.4webhelp.net/images/daniel_sig.gif) |
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Daniel Find all posts by Daniel](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) |
![](images/spacer.gif) |
Robert Wellock
WebHelper
![WebHelper WebHelper](images/rank_2.gif)
![](http://www.xhtmlcoder.f2s.com/avatar64.png)
Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK
|
Posted:
Thu May 08, 2003 12:59 pm (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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 |
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Robert Wellock Find all posts by Robert Wellock](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) ![Visit Poster's Website Visit Poster's Website](templates/4WebHelp2/images/lang_english/icon_www.gif) |
![](images/spacer.gif) |
Kdawg
Senior WebHelper
![Senior WebHelper Senior WebHelper](images/rank_3.gif)
![](images/avatars/gallery/computers/php.gif)
Joined: 21 Apr 2003
Posts: 153
|
Posted:
Sun May 18, 2003 5:48 am (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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? |
|
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Kdawg Find all posts by Kdawg](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) |
![](images/spacer.gif) |
Robert Wellock
WebHelper
![WebHelper WebHelper](images/rank_2.gif)
![](http://www.xhtmlcoder.f2s.com/avatar64.png)
Joined: 18 Jan 2002
Posts: 61
Location: Yorkshire - UK
|
Posted:
Tue May 20, 2003 11:43 am (20 years, 11 months ago) |
![Reply with Quote Reply with Quote](templates/4WebHelp2/images/lang_english/icon_quote.gif) ![Back to Top Back to Top](templates/4WebHelp2/images/icon_up.gif) |
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/ |
|
![Offline](templates/4WebHelp2/images/offline.gif) ![View User's Profile View User's Profile](templates/4WebHelp2/images/lang_english/icon_profile.gif) ![Find all posts by Robert Wellock Find all posts by Robert Wellock](templates/4WebHelp2/images/lang_english/icon_search.gif) ![Send Personal Message Send Personal Message](templates/4WebHelp2/images/lang_english/icon_pm.gif) ![Visit Poster's Website Visit Poster's Website](templates/4WebHelp2/images/lang_english/icon_www.gif) |
![](images/spacer.gif) |
|
Page generation time: 0.129908 seconds :: 18 queries executed :: All Times are GMT
Powered by
phpBB 2.0
© 2001, 2002 phpBB Group :: Based on an FI Theme