• Locked
No replies
Tue, 2012-02-14 07:11
amyliu
amyliu's picture
Offline
Last seen: 1 year 14 weeks ago
newbie
Timezone: GMT+8
Joined: 2012-02-14
Posts: 1
Points: 2

hi all,
I know it's a very elemaentary question,
but I've been struggling with it for a long time...
could some one take a look and let me know how to fix the code so to make the page fit the window?

Code...

BODY, html 
	{
	height: 100%;/*important!*/
    width: 100%;
	margin: 0; /*important!*/
	padding: 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	color:#898989;
	background-color:#FFFFFF;
	background-image:url(../images/bg.gif);
	background-position:center;
	background-repeat:no-repeat;
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-base-color: #4c4c4c;
	scrollbar-darkshadow-color: #4c4c4c;
	scrollbar-track-color: #2a2a2a;
	scrollbar-face-color: #4c4c4c;
	scrollbar-shadow-color: #4c4c4c;
	scrollbar-highlight-color: #4c4c4c;
	scrollbar-3d-light-color : #4c4c4c;
 
	}
 
/*--------------Text Classes-----------------*/
 
.footer
	{	
	font-size:11px;
	color: #5b5b5b;
	text-decoration: none;
	font-style: normal;
	font-weight:bold;
	}
 
.footer a:link 
	{	
	color: #5b5b5b;
	text-decoration: none;
	font-style: normal;
	}
 
.footer a:visited 
	{	
	color: #5b5b5b;
	text-decoration: none;
	font-style: normal;
	}
 
.footer a:hover 
	{	
	color: #939393;
	text-decoration: none;
	font-style: normal;
	}
 
.borders
{ border: 1px solid #CCCCCC;}
 
.heading 
	{
	font-size: 12px;
	font-weight: bold;
	color:#FFFFFF; 
	}
 
a:link 
	{
	font-weight: bold;
	color: #b8b8b8;
	text-decoration:none;
	}
 
a:visited {
	font-weight: bold;
	color: #CCCCCC;
	text-decoration:none;
}
a:hover {
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
}
 
.title
	{
	font-weight: bold;
	color:#FFFFFF; 
	}
 
/*-------------Main Page Containers------------*/	
 
#horizon        
	{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	overflow: visible;
	visibility: visible;
	display: block;
	z-index:5;
	}
#wrapper 
	{
	position: relative;
	width:780px;
/*   	height:637px;*/
	margin:auto;
	top:-282px;
	}
 
#header
	{
	position:absolute;
	left:0px;
	top:0px;	
	width:780px;
	height:89px;
	background-image:url(../images/main_03.gif);
	}
 
#menu
	{
	position:absolute;
	left:0px;
	top:89px;	
	width:780px;
	height:36px;
	background:#000000;
	}
 
#brands
	{
	position:absolute;
	left:0px;
	top:125px;	
	width:237px;
	height:400px;
	background-image:url(../images/main_12.gif);
	}
 
#brands_content
	{
	position:absolute;
	left:73px;
	top:54px;	
	width:127px;
	height:337px;
	}
 
#content
	{
	position:absolute;
	left:237px;
	top:125px;	
	width:543px;
	height:400px;
	background-image:url(../images/main_13.gif);
	}
 
#content_content
	{
	position:absolute;
	left:30px;
	top:71px;	
	width:439px;
	height:308px;
	overflow:auto;
	}
 
#cat_content
	{
	position:absolute;
	left:30px;
	top:71px;	
	width:490px;
	height:305px;
	overflow:hidden;
	}
 
#footer
	{
	position:absolute;
	left:0px;
	top:525px;	
	width:780px;
	height:55px;
	background-image:url(../images/main_14.gif);
	}
 
#filler
	{
	position:absolute;
	left:-10px;
	top:304px;	
	width:452px;
	height:28px;
	background-color:#2a2a2a;
	z-index:30;
	}

and the html...

</head>
 
<body>
<div id="horizon">
  <div id="wrapper"> 
    <div id="header"></div>
    <div id="menu">
      <?php include ("includes/menu.htm"); ?>
    </div>
    <div id="brands"> 
      <div id="brands_content"> 
        <div align="left"> 
          <?php include ("includes/brands.htm"); ?>
        </div>
      </div>
    </div>
    <div id="content"> 
      <div align="left"><img src="images/welcome.gif" alt="Welcome" width="188" height="63" /> 
      </div>
      <div id="content_content"> 
        <div align="left">
          <?php include ("content-welcome.htm"); ?>
        </div>
      </div>
    </div>
    <div id="footer">
      <?php include ("includes/footer.htm"); ?>
    </div>
  </div>
</div>

thanks everyone!!!

Top
Tags: