Alinging webpage to the center and have a background

**CSShelpPlease** · Jan 9, 2012 14:30

So i have finally managed to have a background but the background is inherited to all of the page rather than just the body, how can i prevent this from happening here is the actual page.Please let me know what am i doing wrong and how can i make this better Test.gif

The CSS files i am using are

VerticalMEnu

Code:

#menu  {
         width: 6.8em;
         background: #3f6fb7;
      }

#menu ul 
  {
     list-style: none;
     margin: 0; 
     padding: 0;
   }
  
   /*
Creates the definition for headings 
 */
 #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;
   }  
   
      /*
Created the color for heading like etc  */
 
   #menu h2 {
           color: #fff;
           background:#3f6fb7;
        }
		
		
#menu h2 {  padding: 0;  background: transparent;}

 /*
Created the color for heading like etc  */
 
#menu h2 a {  background: #3f6fb7;  color: white;}


h2:hover, h2:active {
 color: white;
background: black;
text-transform: none;
}


 /*
Provides teh color and background to subheadings like -d1 team*/
#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;
background:inherit
position:relative;
z-index:99;

}

 /*
Provides the color and background to subheadings like -d1 team
*/

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;
}

Code:

Horizontal Menu 
 #nav ul, ul#nav {
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	}
#nav li {
	float: left; }
#nav li a {
	display:block;
	padding: 7px 23px  11px;/* Correction: no such thing as fractional px*/
	text-decoration: none;
	font-family:"Arial";
	border-right: 1px solid #ccc;
	border-bottom: 1px  #ccc;
	font-size: 14px;
	}
	
#nav li a, #nav .current-pageHorizontal li a, #nav .current-pageHorizontal:hover li a  {
	background:  #3f6fb7 ; 
	color: white;
	}	

#nav li:hover a, #nav .current-pageHorizontal  a, #nav .current-pageHorizontal:hover  li:hover a { 
	color:  #3f6fb7;
	background:   #d1cf9f;  } 
	

	
#nav  .current-pageHorizontal  li.current-pageHorizontal  a , #nav  .current-pageHorizontal   li.current-pageHorizontal:hover  a {
    color:  #3f6fb7;
	background:   #d1cf9f;
	}

Code:

SolutionCSS
.ts-1-10 {
	border: none;
	height: 74px;
	left: 435px;
	padding: 0px;
	position: absolute;
	top: 20px;
	width: 844px;
}



.ts-1-12 {
	background-color: #3f6fb7;
	border: none;
	height: 68px;
	left: 443px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 398px;
	width: 110px;
}

.ts-1-13 {
	border: none;
	height: 75px;
	left: 435px;
	padding: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 103px;
	width: 723px;
	
}

.ts-1-14 {
	background-color: #d1d09f;
	border: none;
	height: 1350px;
	left: 434px;
	padding: 0px;
	position: absolute;
	top: 176px;
	width: 111px;
}



.ts-1-15 {
	border: none;
	height: 1043px;
	left: 109px;
	padding: 0px;
	position: absolute;
	top: 143px;
	width: 32px;
}

.ts-1-16 {
	border: none;
	height: 1042px;
	left: 552px;
	padding: 0px;
	position: absolute;
	top: 179px;
	width: 500px;

	
}

.ts-1-17 {
	float:right;
	border: none;
	position: absolute;
	height: 1200px;
	left: 641px;
	padding: 0px;
	width: 190px;
	top: 119px;
}

The HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title> Solution</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Test">
<meta name="description" content="Test">


<link rel="stylesheet" type="text/css" href="verticalmenunew.css">
<link rel="stylesheet" type="text/css" href="horizontalmenunew.css">
<link href="Solution.css" rel="stylesheet" type="text/css">

<!--[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]-->

<script language="JavaScript" type = "text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}
function popUp1(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=1,width=750,height=440');");
}
function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		products2_over = newImage("images/products2-over.gif");
		case_studies2_over = newImage("images/case_studies2-over.gif");
		lean2_over = newImage("images/lean2-over.gif");
		contact2_over = newImage("images/contact2-over.gif");
		about_us2_over = newImage("images/about_us2-over.gif");
		home_arrow_aps_over = newImage("images/home_arrow_aps-over.gif");
		preloadFlag = true;
	}
}

<!-- Begin

function subMenu(show) {
if (show){
document.getElementById('sub_menu').style.display = 'block';
} else {
document.getElementById('sub_menu').style.display = 'none';
}
}
// -->
</script>

</head>

<body onLoad="preloadImages();" bgcolor="#CCCCCC">


<div class="ts-1-10"><img src="Images/logo_top_aps.gif" width="706" height="81" colspan="8"></div>
			<div class="ts-1-13">
  <ul id="nav">
					<li class="current-pageHorizontal">
						<a href="Test.html">Test</a>
						
						<!--for the new menu -->
						<ul>
							<li><a href="Test.html">Test</a></li>
						</ul>
						<ul>
							<li class="current-pageHorizontal"><a href="Test.html">Test</a></li>
						</ul>
						<ul>
							<li><a href="Test.html">Test</a></li>
						</ul>
						<ul>
							<li><a href="Test.html"> Test</a></li>
						</ul>
						<!--for the new menu ul under a list -->
					</li>
					<li>
						<a href="test.html">Test</a>
						
					</li>
                    <li>
						<a href="contact_us.cfm">Try It Out</a>
						
					</li>
					<li>
						<a href="About_Us.html">About Us</a>
						
					</li>
			  </ul>
		  </div>
       
<div class="ts-1-14">
<div id="menu">
					<ul>
						<li>
							<h2>
								<a href="Test.html">Test </a>
							</h2>
						</li>
	  </ul>
					<ul>
						<ul>
							<li >
								<h2>
									<a href="Test.html">Test</a>
								</h2>
								<ul>
									<li >
										<a href="Test.html#ID1">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID2">Test</a>
									</li>
									<li>
										<a href="Test.html#ID3">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID4">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID5">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID6">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID7">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID8">Test</a>
										
									</li>
									<li>
										<a href="Test.html#ID9">Test </a>
									</li>
									<li>
										<a href="Test.html#ID10">Test</a>
										
									</li>
								</ul>
							</li>
						</ul>
					</ul>
					
  </div>
</div>
<div class="ts-1-16" >
<a href="Test.html"> Next </a> |  

<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>

<a href="Test.html"> Previous </a>

<H1 align="center"><font size="+1" face="tahoma, sans serif"><b>Test</b></h1>
</font>





This is a Test Site
<BR>
<BR>
<BR>
<BR>
<BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<a href="D4.html"> Next </a> |  <a href="D21.html"> Previous </a>
 <p><font size="1" face="tahoma, sans serif">&copy; 2012 Test Solutions  |  <a href="index.html">Home</a> | <a href="Contact_us.cfm">Contact Us</a> | <a href="about_us.html">About Us</a>  | <a href="http://Testsolutions.blogspot.com/">Test's Blog</a></font></p>

<!--Begin SiteStats Code Oct , 23-->

<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>
</div>
</body>
</html>
</div>
<!--Begin SiteStats Code Oct , 23-->
<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>
</div>
</body>
</html>

**ralph.m** · Jan 9, 2012 16:24

Looks like you are using a grid of some kind, but it's using absolute positioning, which isn't a great way to lay out pages. The first thing to do here is to wrap your page content in a container div that has a width and is centered. An example would be

Code:

body {background: #ccc;}

.wrapper {
  width: 960px;
  margin: 0 auto;
  background: white;
}

That's the basic kind of starting point you need. It's hard to address everything at once, as there's a lof code there. Better to build the page from the ground up, addressing the major issues and then focusing on the smaller issues.

User Tag List

Thread: Alinging webpage to the center and have a background

Thread Tools

Display

Alinging webpage to the center and have a background

Bookmarks

Bookmarks

Posting Permissions