HTML Table question
- Started
- Last post
- 7 Responses
- CygnusZero4
I have a table set to 100% width/height.
I've got a SWF sitting in it that I need horizonatally/vertically centered. Won't seem to sit centered vertically, it just sits at the top of the page. Here's the code. That valign isnt doing anything.
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
- fyoucher10
Use CSS instead
- detritus0
Use a series of spacer gifs to shunt it down.
- mikotondria30
use js to set the margin..
- acescence0
set html and body height to 100% in css, then a table will stretch the full viewport height..
html,body{
margin:0;
padding:0;
height:100%;
}
- lukus_W0
Okay, sorry - I was being an idiot in the notes above.
1. Do not use a table.
2. Place the SWF in a DIV.
3. Center the DIV:The procedure for centering the DIV using CSS goes like this:
1 -> Place the top of the DIV at 50%
2 -> Place the left of the table at 50%
3 -> Give the DIV a negative left margin, equal to half it's width
4 -> Give the DIV a negative top margin, equal to half it's heightThe reason this works, is due to the fact that a CSS margin can hold a negative value. You use the negative margin to pull the table back into position.
- *of the table at 50% = of the DIV at 50%lukus_W
- Overly complicated. I got it working already ^^CygnusZero4
- loldetritus
- Hmm.. but tables are bad, unless your displaying tablular data.lukus_W
- gah, *you'relukus_W
- confusingHAYZ1LLA
- This is something very basic, being played on 1 kind of computer, in 1 browser.CygnusZero4
- ItTango0
FYI: typically, the "doctype"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
will prevent table height from automatically stretching to 100%.When I'm lazy, I just remove it.
acescence's solution is the way to go, though.- True, I forgot about that doctype bullshit.CygnusZero4
- yeah, it's gotta be in "quirks mode"acescence
- lukus_W0
It's not that complicated ... using a table to position elements is a bad idea.
The HTML:
<div id="container">
<!-- replace this comment with yr embed code -->
</div>The CSS:
div#container {
position: relative;
top: 50%;
left: 50%;
width: 300px; /*change this to whatever you require */
height: 200px; /*change this to whatever you require */
margin-left: -150px; /*equal to half the width */
margin-top: -100px; /*equal to half the height */
}- <Continuity
- <ukit
- <<<<<<<<<<<<<<<<<<<<...ukit
- < He's right. Tables for positioning is deprecated. Tables should only be used for tabular data.fyoucher1