Vertical Center [Archive] - Dynamic Drive Forums

Merciless

02-05-2007, 04:36 AM

here i am been designing websites for a while and i cant get a stupid table to vertically align, its a 800 by 800 table for a splash page, i need it horizontally and vertically centered. why wont any of my valign or TD align things work? :confused: what is wrong??

PS. can anybody repost the tag to make flash animations not go over stuff? was it like wmode="transparent" or something?

codeexploiter

02-05-2007, 05:45 AM

1. using HTML tables

<!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>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>
<table cellspacing="0" cellpadding="0" width="100%" border="1" height="100%">
<tr><td width="100%" align="center" valign="middle">
<table cellspacing="0" cellpadding="0" width="800" border="1" height="800">
<tr><td align="center">Test</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

2. Instead of using a table based solution you can go for a CSS & DIV based solution, which is more efficient compared to the above one.

Have a look at this article (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) where they explained achieving vertical centering using CSS

jscheuer1

02-05-2007, 05:48 AM

Vertical centering on a page is not a simple matter. There are ways, see:

http://www.wpdfd.com/editorial/thebox/deadcentre3.html

As for your other question, just look back over your old threads, particularly:

http://www.dynamicdrive.com/forums/showthread.php?t=16785

Merciless

02-05-2007, 03:26 PM

k code, thx but i needed to figure out how to center the whole table itself not the content inside the table. and thanks for that link js, though i am having a hard time translating the second instruction, i will look into i further and come back if i have any problems.

EDIT: i will use the code to figure it out no need to spend any more time posting about it, and thank you for finding my old post js :) thats just the thing i was looking for.

Merciless

02-05-2007, 10:47 PM

my problem continues, my image might center. maybe, but my first concern is the fact that my table is IGNORING my fixed height that i set, not only will it not do 100%, it will not even go to the pixel amount that i set. what on earth is going on? here is the link to the web page, i would like to center that completely with like 10px of table space on each side of the picture directly in the middle of the page, nothing i do to the code seems to change anything, help pl0x, :( :confused:

here is the link to the page, http://www.imikya.com/betatesting/nmsplash.htm

jscheuer1

02-05-2007, 11:17 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body,td,th {
color: #FFFFFF;
}
body {
background-image: url(http://www.imikya.com/betatesting/bftest.jpg);
}
table {
position:absolute;
top:50%;
left:50%;
margin-left:-425px;
margin-top:-288px;
}

</style></head>

<body>
<table width="850" height="576" border="0" cellpadding="10" cellspacing="0" bgcolor="#000000">
<tr>
<td><div align="center"><img src="http://www.imikya.com/betatesting/splashtest.jpg" width="800" height="556"></div></td>
</tr>
</table>
</body>
</html>

But, the image is a little large and will have portions that are unviewable at 800x600 resolution screens and browser windows that are smaller than 850x650 or there abouts.

It would be a little better if you skipped the table:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">

body,td,th {
color: #FFFFFF;
}
body {
background-image: url(http://www.imikya.com/betatesting/bftest.jpg);
}
img {
position:absolute;
top:50%;
left:50%;
margin-left:-400px;
margin-top:-278px;
}

</style></head>

<body>
<img src="http://www.imikya.com/betatesting/splashtest.jpg" width="800" height="556">
</body>
</html>

Merciless

02-05-2007, 11:18 PM

YES, BRILLIANT, thank you so much john, as usual, your the best :)

PS. its a high graphic gaming clan, i dont have to worry about anyone having under 1024, but i'll do it anyways, thx ;)

Merciless

02-06-2007, 05:40 AM

STUPID QUESTION ::EDIT:: problem solved, sorry, thanks john.