I have a centering problem.....

**veggygurl** · 01-03-2004, 02:07 PM

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

**coothead** · 01-03-2004, 03:26 PM

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

**veggygurl** · 01-03-2004, 04:54 PM

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

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

**coothead** · 01-03-2004, 05:25 PM

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

What is blue filled ?... the only color that I see is red text
Add this to the style sheet to color <td>
td {background-color:#0000ff;}
If at first you don't succeed, try, try, try again

cthead

**veggygurl** · 01-03-2004, 05:43 PM

Thnx :-)

Thread: I have a centering problem.....

Thread Tools

Related

centering DIV in IE Forum: CSS Forum

Centering Vertically Forum: CSS Forum

Centering text Forum: HTML Forum

Centering Content! Forum: HTML Forum

Another Centering Problem Forum: HTML Forum

I have a centering problem.....

Thank ya! One more question...

Tags for this Thread

Cloudjiffy- PaaS for Developers