PDA

View Full Version : xhtml page in center

prowebdesign4u
11th May 06, 07:43 PM
I slicing a xhtml page with table and want this page center both horizontal and vertical position in high regulation(1280 x 1024). How can I fix it?
carinamalmgren
11th May 06, 08:00 PM
If you use som of this and some of that
Centering with negative margins (http://bluerobot.com/web/css/center2.html) basic centered (http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html)

After spending some time with google I found this
The really centered box (http://lixlpixel.org/centered_box/)
sido
21st May 06, 03:25 PM
I don't know of any clean way to do it, but here is a dirty one which should work :P Only way I chould think of....

<!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>
<style>
HTML,
BODY,
#wrap
{
padding:0;
margin:0;
width:100%;
height:100%;
}
BODY *
{
text-align:left;
}
#center_me
{
margin: 0 auto;
width:150px;
height:150px;
background:#ff9;
}
</style>
</head>
<body>
<table id="wrap" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<div id="center_me">Center me!</div>
</td>
</tr>
</table>
</body>
</html>
carinamalmgren
21st May 06, 10:34 PM
sido, why table and mixed alignments when you could do it much easier with divs and smother css?
sido
23rd May 06, 02:31 PM
I was just brainstorming a bit, since I haven't seen a good way to do it without tables.

Putting al the alignments in CSS also works

TD
{
text-align:center;
}
Jbilsten
23rd May 06, 07:58 PM
Since it might have been over looked you shouldn't be using tables for layout. Tables should only be used for tabular data.

If you need help centering with div's and proper layout HTML markup there quite a few threads on this board with explanations and example code. :)
sido
25th May 06, 08:55 AM
Yes, I known it's dirty to use a table for this, but at the end of the day it about what’s gets the job done. Since I haven’t really seen a way to vertically center something on a page (usually I just avoid it) and drop any content in it, I posted this.

Most of the trick I seen, come with some calculation and can break if the wrong content is drop in to it. But if you any better tricks, please let me know where to find them.
sido
25th May 06, 06:09 PM
Ok, still playing around a bit and though of a nicer way to vertical align content on your page. This one comes close to what I want, but you still have to do some calculations to get it right there in the middle of the screen...

I've tested it in FF1.5, IE6 and Opera 8.5

Try this one:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>center me</title>
<style>
BODY
{
padding:0;
margin:0;
width:100%;
height:100%;
}
#page_center
{
position:absolute;
top: 50%;
left: 50%;
}
#content_wrapper
{
position:relative;
margin: -50% 0 0 -50%;
}
</style>
<!--[if IE]>
<style>
#content_wrapper
{
position:relative;
top:-50%;
left:-50%;
margin:0;
}
</style>
<![endif]--></head>
<body>
<div id="page_center">
<div id="content_wrapper">
<a href="http://blueballfixed.ytmnd.com/">Blue Ball Machine</a><br />
</div>
</div>
</body>
</html>
sido
25th May 06, 06:34 PM
http://www.mezzoblue.com/presentations/2006/sxsw/css/sampler/q2-3.html

http://www.jakpsatweb.cz/css/priklady/vertical-align-valid-solution-en.html