Log in

View Full Version : i need help centering this table.



Phantom__
11-05-2006, 03:51 PM
For some reason i cant center this table, it wont center for some reason, i tried div align="center" and everything. Any help would be appreciated. and i mean the actual table, not to center the text.

Heres the css.


<style type="text/css">
<!--

#Table_01 {
position:absolute;
width:890px;
height:159px;

}

#td-01 {
position:absolute;
left:0px;
top:0px;
width:890px;
height:114px;
}

#td-02 {
position:absolute;
left:0px;
top:114px;
width:19px;
height:25px;
}

#td-03 {
position:absolute;
left:19px;
top:114px;
width:65px;
height:25px;
}

#td-04 {
position:absolute;
left:84px;
top:114px;
width:68px;
height:25px;
}

#td-05 {
position:absolute;
left:152px;
top:114px;
width:80px;
height:25px;
}

#td-06 {
position:absolute;
left:232px;
top:114px;
width:71px;
height:25px;
}

#td-07 {
position:absolute;
left:303px;
top:114px;
width:72px;
height:25px;
}

#td-08 {
position:absolute;
left:375px;
top:114px;
width:85px;
height:25px;
}

#td-09 {
position:absolute;
left:460px;
top:114px;
width:74px;
height:25px;
}

#td-10 {
position:absolute;
left:534px;
top:114px;
width:338px;
height:25px;
background-image: url(images/test_10.gif)
}

#td-11 {
position:absolute;
left:872px;
top:114px;
width:18px;
height:25px;
}

#td-12 {
position:absolute;
left:0px;
top:139px;
width:890px;
height:20px;
}
a {
font-family: Verdana;
font-size: 9px;
color: white;
}
a:link {
text-decoration: none;
font-size: 9px;
color:#FFFFFF;
}
a:visited {
text-decoration: none;
font-size: 9px;
color: white;
}
a:hover {
text-decoration: none;
font-size: 9px;
color: black;
}
a:active {
text-decoration: none;
font-size: 9px;
color: white;
}
img {
border:0px;
}
</style>

mburt
11-05-2006, 04:28 PM
position:absolute will let you put any element anywhere on the page; regardless of any other element's position. It keeps you from centering basically.
Personally, I wouldn't you position:absolute to place elements on a page. It differs between browsers: the margins are different, padding, alignment blah blah blah. Try using a different approach.

Phantom__
11-05-2006, 04:35 PM
Do u know any other ways?

mburt
11-05-2006, 04:40 PM
Your layout will have to be completely redone if you want it to be positioned correctly, but you can position it manually, using the left: and top: properties.

boxxertrumps
11-05-2006, 04:48 PM
as long as you are using tables you might as well use the <center></center> tags. it'll make it centered on the page but wont validate as anything higher than html 4.01.

mwinter
11-05-2006, 05:03 PM
For some reason i cant center this table

It would have been useful for you to have posted a link to a simplified example. Please consider that in future.



it wont center for some reason

Apply the declaration:



margin: 0 auto;

to the table element.



i tried div align="center" ...

Avoid deprecated markup, and use CSS for presentation.




position:absolute will let you put any element anywhere on the page ... It keeps you from centering basically.

Not at all. It just becomes a little more awkward.



Personally, I wouldn't you position:absolute to place elements on a page.

Yes, absolute positioning should be used sparingly. It has a tendency to create fragile layouts unless one is careful.



It differs between browsers:

There are some bugs, but that's not a reason to avoid absolute positioning, just a reason to check one's work.



the margins are different, padding,

Which is why they should be overridden for all elements if one is going to start playing about with them.



alignment

Text alignment? It defaults to left alignment in all browsers for almost every element. Only a few obvious cases use another value.




... higher than html 4.01

What exactly is higher than HTML 4.01? It's the most recent version of HTML. If you're referring to XHTML, both versions 1.0 and 1.1 feature the center element, though it is deprecated in both - not that anyone should be serving documents written in these language on the Web.

Mike