Results 1 to 6 of 6

Thread: i need help centering this table.

  1. #1
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default i need help centering this table.

    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.

    Code:
    <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>
    Last edited by Phantom__; 11-05-2006 at 04:07 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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.
    - Mike

  3. #3
    Join Date
    Aug 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Do u know any other ways?

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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.
    - Mike

  5. #5
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Phantom__
    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:

    Code:
    margin: 0 auto;
    to the table element.

    i tried div align="center" ...
    Avoid deprecated markup, and use CSS for presentation.


    Quote Originally Posted by mburt
    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.


    Quote Originally Posted by boxxertrumps
    ... 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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •