SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alinging webpage to the center and have a background

    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>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,171
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


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
  •