41 users online (0 members and 41 guests)  


  Results 1 to 5 of 5

Related

  1. centering DIV in IE    Forum: CSS Forum
    Replies: 4
  2. Centering Vertically    Forum: CSS Forum
    Replies: 6
  3. Centering text    Forum: HTML Forum
    Replies: 2
  4. Centering Content!    Forum: HTML Forum
    Replies: 1
  5. Another Centering Problem    Forum: HTML Forum
    Replies: 1
  1. #1
    veggygurl's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Location
    Michigan
    Posts
    9

    Unhappy I have a centering problem.....

    My issue is this - SOMEONE PLEASE HELP - I have completed my FIRST table in CSS. However, I cannot for the life of me figure out how to align the table on my browser page - both vertically and horizontally! I am working in Publisher if that helps any!? I think it is so simple that I am just missing it completely!?? Thankx - Mel

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there veggygurl,

    This will center a table using 'css'.
    It can be modified to center other elements also.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta content="mshtml 6.00.2800.1264" name="generator" />
    <title>Dead Centre Table</title>
    <style type="text/css" media="screen">
    <!--
    body 
    	{
    	background-color: #ffffff;
    	margin: 0px
    	}
    
    #horizon        
    	{
    	color: white;
    	background-color: transparent;
    	position: absolute;
    	top: 50%;
    	left: 0px;
    	width: 100%;
    	height: 1px;
    	overflow: visible;
    	visibility: visible;
    	display: block
    	}
    
    #content    
    	{
    	background-color: transparent;
    	margin-left: -192px;     /*half the table width */
    	position: absolute;
    	top: -119px;               /*half the table height */
    	left: 50%;
    	width: 384px;       /* table width */
    	height: 238px;     /* table height */
    	visibility: visible
    	}
    #table_main
                     { 
                     font-family:comic sans ms;
                     font-size:24px;color:#ff0000;
                     text-align:center;
                     width: 384px;
                     height: 238px;
                     border-style:double;
                     border-width:10px;
                     border-color:#999999;
                     padding:1px;
                     }
    //-->
    </style>
    </head>
    <body>
    <div id="horizon">
    <div id="content">
    <table id="table_main"><tr><td>This table is now positioned<br />DEAD CENTER</td></tr></table>
    </div>
    </div>
    </body>
    </html>
    I have tested this in I.E. 6.0 and MozillFirebird 0.7.

    cthead

    p.s. Welcome to these forums

  3. #3
    veggygurl's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Location
    Michigan
    Posts
    9

    Talking Thank ya! One more question...

    Why is this blue filled? Whic area do I want to change to make it a specific color inside my table? I keep trying to change it :-(
    Mel










    Quote Originally Posted by coothead
    Hi there veggygurl,

    This will center a table using 'css'.
    It can be modified to center other elements also.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta content="mshtml 6.00.2800.1264" name="generator" />
    <title>Dead Centre Table</title>
    <style type="text/css" media="screen">
    <!--
    body 
    	{
    	background-color: #ffffff;
    	margin: 0px
    	}
    
    #horizon        
    	{
    	color: white;
    	background-color: transparent;
    	position: absolute;
    	top: 50%;
    	left: 0px;
    	width: 100%;
    	height: 1px;
    	overflow: visible;
    	visibility: visible;
    	display: block
    	}
    
    #content    
    	{
    	background-color: transparent;
    	margin-left: -192px;     /*half the table width */
    	position: absolute;
    	top: -119px;               /*half the table height */
    	left: 50%;
    	width: 384px;       /* table width */
    	height: 238px;     /* table height */
    	visibility: visible
    	}
    #table_main
                     { 
                     font-family:comic sans ms;
                     font-size:24px;color:#ff0000;
                     text-align:center;
                     width: 384px;
                     height: 238px;
                     border-style:double;
                     border-width:10px;
                     border-color:#999999;
                     padding:1px;
                     }
    //-->
    </style>
    </head>
    <body>
    <div id="horizon">
    <div id="content">
    <table id="table_main"><tr><td>This table is now positioned<br />DEAD CENTER</td></tr></table>
    </div>
    </div>
    </body>
    </html>
    I have tested this in I.E. 6.0 and MozillFirebird 0.7.

    cthead

    p.s. Welcome to these forums

  4. #4
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    Hi there veggygurl,


    1. Why is this blue filled?
    2. Which area do I want to change to make it a specific color inside my table?
    3. I keep trying to change it
    1. What is blue filled ?... the only color that I see is red text
    2. Add this to the style sheet to color <td>
      td {background-color:#0000ff;}
    3. If at first you don't succeed, try, try, try again


    cthead

  5. #5
    veggygurl's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Location
    Michigan
    Posts
    9
    Thnx :-)



Tags for this Thread