make webpage fit screen

amyliu · 14th February 12, 06:50 AM

hi all, could someone help me with the code below?
I'm trying to make the page fit all screen...

Code is as below

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 html...

HTML Code:

</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 a lot!!

chrishirst · 14th February 12, 08:22 AM

As soon as you use position: absolute; you lose control over the document flow.

sheferd · 14th February 12, 09:53 PM

Not what you're looking for but a little related... if you're comfortable with giving modern browsers a little better experience you could use:

Code:

background-size:cover;

This will ensure the main background image always fills to the viewport (browser window)

amyliu · 15th February 12, 02:16 AM

Thanks to both of your reply.
I made a very stupid change to the code: change all the absolute to relative.
And the page was totally messed..(no surprise lol)

Anyway that I can fix the code and made the page fit screen?
Please let me know and much appreciated!

chrishirst · 15th February 12, 10:51 AM

Declare all widths and heights in percentages.

AND do NOT use positioning at all, not even relative if you don't actually need to, positioning doesn't work like you think it does.

Learn how to use floats and margins to move elements out of their natural flow.

sheferd · 16th February 12, 01:39 PM

Just to note, 'position:relative' is actually more like an offset. the object will be positioned relative to it's self e.g.

Code:

position:relative; top:40px;

would move ONLY that object 40px down the page from it's original point, kind of like margin-top:40px would but relative will not move any other objects in the document above or below the relatively positioned one.

if you want to position an object inside another 'absolutely' the parent object must also have a 'position' applied.

position:relative without any top, right, bottom or left values defined is fine.

...just a little head's up hope it's helpful

sheferd · 16th February 12, 01:40 PM

same thing posted twice, Ignore this post

chrishirst · 16th February 12, 03:23 PM

Quote:

Originally Posted by sheferd

Just to note, 'position:relative' is actually more like an offset. the object will be positioned relative to it's self e.g.

Code:

position:relative; top:40px;

would move ONLY that object 40px down the page from it's original point, kind of like margin-top:40px would but relative will not move any other objects in the document above or below the relatively positioned one.

if you want to position an object inside another 'absolutely' the parent object must also have a 'position' applied.

position:relative without any top, right, bottom or left values defined is fine.

...just a little head's up hope it's helpful

Not forgetting that it will occupy its static postion as well.

14th February 12, 09:53 PM	#3
sheferd WLC Member Join Date: Aug 2010 Location: Liverpool (but I'm from the south) Posts: 40	Re: make webpage fit screen Not what you're looking for but a little related... if you're comfortable with giving modern browsers a little better experience you could use: Code: background-size:cover; This will ensure the main background image always fills to the viewport (browser window)

16th February 12, 01:39 PM	#6
sheferd WLC Member Join Date: Aug 2010 Location: Liverpool (but I'm from the south) Posts: 40	Re: make webpage fit screen Just to note, 'position:relative' is actually more like an offset. the object will be positioned relative to it's self e.g. Code: position:relative; top:40px; would move ONLY that object 40px down the page from it's original point, kind of like margin-top:40px would but relative will not move any other objects in the document above or below the relatively positioned one. if you want to position an object inside another 'absolutely' the parent object must also have a 'position' applied. position:relative without any top, right, bottom or left values defined is fine. ...just a little head's up hope it's helpful

16th February 12, 01:40 PM	#7
sheferd WLC Member Join Date: Aug 2010 Location: Liverpool (but I'm from the south) Posts: 40	Re: make webpage fit screen same thing posted twice, Ignore this post

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

14th February 12, 08:22 AM	#2
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: make webpage fit screen As soon as you use position: absolute; you lose control over the document flow.

15th February 12, 02:16 AM	#4
amyliu WLC Member Join Date: Feb 2012 Posts: 2	Re: make webpage fit screen Thanks to both of your reply. I made a very stupid change to the code: change all the absolute to relative. And the page was totally messed..(no surprise lol) Anyway that I can fix the code and made the page fit screen? Please let me know and much appreciated!

15th February 12, 10:51 AM	#5
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: make webpage fit screen Declare all widths and heights in percentages. AND do NOT use positioning at all, not even relative if you don't actually need to, positioning doesn't work like you think it does. Learn how to use floats and margins to move elements out of their natural flow.