I have a page as below and i want to align it to the center and have a background color that spreads over the entire screen except the actual body of the webpage. I want to accomplish this with css. Please guide me as to how this can be accomplished
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<Style>
/*
horizontal menu coding
*/
#nav {
float: left;
margin: 0 0 1em 0;
padding: 0;
list-style: none;
}
#nav li {
float: left; }
#nav li a {
display:block;
padding: 9px 9px;
text-decoration: none;
font-family:"Arial";
color: white;
border-right: 1px solid #ccc;
font-size: 14px;
background-color: #3f6fb7; }
}
#nav li a:hover {
color: #3f6fb7;
background-color: #d1cf9f; }
#nav li.current-pageHorizontal a
{
background:#d1cf9f;
color: white;
}
</Style>
<Style>
/*
Print menu coding
*/
*
Vertical menu coding
*/
#menu {
width: 6.6em;
background: #3f6fb7;
}
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2
{
display:block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
font-weight: bold;
color: #3f6fb7;
}
#menu h2 {
color: #fff;
background:#3f6fb7;
}
#menu h2 { padding: 0; background: transparent;}
#menu h2 a { background: #3f6fb7; color: white;}
h2:hover, h2:active {
color: white;
background: black;
text-transform: none;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu li.current-pageHeading h2 a
{ background:#000061;
color: yellow;}
#menu li.current-pages a
{
background:#000061;
color: yellow;
}
#menu a:hover {
color: #a00;
background: #d1cf9f;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;
}
ul.sidenav li a:hover {
background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span {
display: inline;
font-size: 0.8em;
padding: 10px 0;
}
</Style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {float: left; width: 100%;}
#menu ul li a {height: 1%;}
#menu a, #menu h2 {
font: bold 0.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body bgcolor="#FFFFFF" onLoad="preloadImages();">
<table width="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign = "top" width="106" height="1">
<img src="../images/spacer.gif" alt = "" width="106" height="1"></td>
<td valign = "top" width="32" height="1">
<img src="../images/spacer.gif" alt = "" width="32" height="1"></td>
<td valign = "top" width="72" height="1">
<img src="../images/spacer.gif" alt = "" width="72" height="1"></td>
<td valign = "top" width="96" height="1">
<img src="../images/spacer.gif" alt = "" width="96" height="1"></td>
<td valign = "top" width="97" height="1">
<img src="../images/spacer.gif" alt = "" width="97" height="1"></td>
<td valign = "top" width="95" height="1">
<img src="../images/spacer.gif" alt = "" width="95" height="1"></td>
<td valign = "top" width="85" height="1">
<img src="../images/spacer.gif" alt = "" width="85" height="1"></td>
<td valign = "top" width="101" height="1">
<img src="../images/spacer.gif" alt = "" width="101" height="1"></td>
<td valign = "top" width="1" height="1"></td>
</tr>
<tr>
<td valign = "top" width="684" height="70" colspan="8">
<img src="../images/logo_top_aps.gif" alt = "" >
</td>
<td valign = "top" width="1" height="70">
<img src="../images/spacer.gif" alt = "" width="1" height="70">
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#3f6fb7" dir="ltr">
</td>
<td colspan="8" >
<ul id="nav">
<li class = "current-pageHorizontal"> <a href="introduction.html"> Menu 1</a></li>
<li> <a href="Test.html">Menu 2</a></li>
<li> <a href="Test.html">Menu 3</a></li>
<li> <a href="About_Us.html">Menu 5</a></li>
</ul>
</td>
</tr>
<tr>
<td width="106" height="300" rowspan="2" valign = "top" bgcolor="#D1D09F">
<!---<a href="index.html"
onmouseover="changeImages('home_arrow_aps', 'images/home_arrow_aps-over.gif'); return true;"
onmouseout="changeImages('home_arrow_aps', 'images/home_arrow_aps.gif'); return true;">
<img name="home_arrow_aps" src="images/home_arrow_aps.gif" alt = "" width="106" height="237" border="0"></a>
Laurie added --->
<div id="menu">
<ul>
<li class = "current-pages" >
<h2> <a href = "Introduction.html">A </a></h2></li>
</ul>
<ul>
<ul>
<li> <h2> <a href = "Iss.html"> B </a></h2>
<ul>
<li> <a href = "Iss.html#ID1"> C</a></li>
<li> <a href = "Iss.html#ID2"> D </a></li>
<li> <a href = "Iss.html#ID3">E</a></li>
<li> <a href = "Iss.html#ID4"> F</a></li>
<li> <a href = "Iss.html#ID5"> G</a></li>
<li> <a href = "Iss.html#ID6"> H</a></li>
<li> <a href = "Iss.html#ID7"> I</a></li>
<li> <a href = "Iss.html#ID8"> K</a></li>
<li> <a href = "Iss.html#ID9"> Coach/Help </a></li>
<li> <a href = "Iss.html#ID10"> M</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<td valign = "top" width="32" height="313" rowspan="3">
<img src="../images/r_spacer_1.gif" alt = "" width="32" height="200">
<!--- <td valign = "top" width="546" height="44" colspan="6">
<img src="images/aps_title.gif" alt = "" width="546" height="44"></td>
<td valign = "top" width="1" height="44">
<img src="images/spacer.gif" alt = "" width="1" height="44"></td>--->
</tr>
<tr>
<td valign = "top" width="570" height="269" colspan="7" rowspan="1">
<font face="tahoma, sans serif">
<H1> </h1></font>
<p align="center"><font size="1" face="tahoma, sans serif">© 2012 | | <a href="index.html">Home</a> | <a href="Contact_us.cfm">Contact Us</a> | <a href="about_us_old.html">About Us</a> | <a href="m/"> Blog</a> </font>
</td>
</tr>
</table><!--Begin SiteStats Code Oct , 23--><STYLE>.ivanC1254756683401{position:absolute;visibility:hidden;}</STYLE><DIV CLASS=ivanC1254756683401 ID=ivanI1254756683401><A HREF=http://sitetracker.com CLASS=ivanL_SI TARGET=_blank>FREE counter and Web statistics from sitetracker.com</A></DIV><script language='JavaScript' src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/script/1254756683401'></script><noscript><a href='http://Test.sitetracker.com/cgi-bin/sitestats.gif/map'><img src='http://Test.sitetracker.com/cgi-bin/sitestats.gif/img' border=0></a></noscript><!--End SiteStats Code-->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-738462-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</p>
</body>
</html>
