Results 1 to 3 of 3
  1. #1
    Join Date
    Aug 2002
    Posts
    328

    Screen fit for resolutions

    Hi,

    I do my sites in 1024x768 resolution and my current site is fine when looked at in 800x600, however with a new design I have got for the site when viewed in 800x600 a scrollbar appears at the bottom, yet on some sites I view when looked at in 800x600 the page shrinks to fit the size of the window and hence no scrollbar.

    How can I do this pls?

    Thnx

    This is my code

    Code:
    <!DOCTYPE html 
         PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Babe Blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	<div class="banner">&nbsp;</div>
    	<div class="bannerRight">&nbsp;</div>
    	<div class="adsTop"><a href="#"><img src="images/advertisement.gif" alt="" /></a></div>
    	
    	<br clear="all" />
    	<div class="divider">&nbsp;</div>
    	
    	<div class="sidebar">
    		<h1>MAIN MENU</h1>
    			<ul>
    				<li><a href="#">&gt; Home</a></li>
    				<li><a href="#">&gt; Galleries </a></li>
    				<li></li>
    			</ul>
    		
    		<h2>LATEST GALLERIES</h2>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    		
    		<h2>LATEST VIDEOS</h2>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_small.gif" alt="" /></a>
    	</div>
    
    	<div id="middle">
    		<div class="roundtop">&nbsp;</div>
    		<div class="roundbox">
    			<a href="#"><img src="images/advertisement.gif" alt="" border="0"/></a>
    		</div>
    		<div class="roundbottom">&nbsp;</div>
    	
    		<div class="girl">
    			<a href="#"><img src="images/girl_big.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_big.gif" alt="" /></a>
    			<a href="#"><img src="images/girl_big.gif" alt="" /></a>
    		</div>
    		
    		<h1>WELCOME <em>TITLE</em></h1>
    		<p>Contrary to popular belief,<a href="#"> Lorem Ipsum</a> is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, <a href="#">consectetur</a>, from a Lorem Ipsum passage, and going through the <a href="#">cites</a> of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
    		
    	</div>
    	
    	<div class="sidebar">
    		<h1>TOP SITES</h1>
    			<a href="#">&gt; AntiRippers.com</a><br />
    			<a href="#">&gt; iPodSHOCK.com</a><br />
    			<a href="#">&gt; Agressions.com</a><br />
    			<a href="#">&gt; JosVredeveld.nl</a><br />
    			<a href="#">&gt; SitePoint.com</a><br />
    			<a href="#">&gt; ClanTemplates.com</a><br />
    			<a href="#">&gt; TalkFreelance.com</a>
    		
    		<h2>ADVERTISEMENT</h2>
    			<p align="center">
    				<a href="#"><img src="images/antirip.gif" alt="" /></a><br />
    				<a href="#"><img src="images/antirip.gif" alt="" /></a><br />
    				<a href="http://validator.w3.org/check?uri=referer"><img
    					src="http://www.w3.org/Icons/valid-xhtml10"
    					alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br />
    				<a href="http://jigsaw.w3.org/css-validator/"><img 
    					style="border:0;width:88px;height:31px"
    					src="http://jigsaw.w3.org/css-validator/images/vcss" 
    					alt="Valid CSS!" /></a>
    			</p>
    	</div>
    	
    	<br clear="all" />
    	
    	<div class="footer"><em> : </em>
    	<br clear="all" />
      </div>
    </div>
    </body>
    </html>
    And this is my css

    Code:
    * CSS Document */
    *
    {
    	margin:0;
    	padding:0;
    }
    body
    {
    	background:#FFF;
    	font-family:Trebuchet MS;
    }
    #container
    {
    	margin:5px;
    	width:auto;
    	width:1000px;
    	margin:0px auto;
    }
    .banner
    {
    	width:441px;
    	height:150px;
    	background-image:url('images/banner.gif');
    	float:left;
    }
    .bannerRight
    {
    	width:74px;
    	height:150px;
    	float:left;
    	background-image:url('images/banner_right.gif');
    }
    .adsTop
    {
    	width:466px;
    	height:150px;
    	float:left;
    }
    .adsTop img
    {
    	border:0;
    	margin-top:35px;
    }
    .divider
    {
    	height:6px;
    	background:url('images/divider.gif');
    	background-repeat:repeat-x;
    	margin-bottom:10px;
    	font-size:0;
    }
    .sidebar
    {
    	width:203px;
    	float:left;
    	background:#FFD3E7;
    }
    .sidebar h1
    {
    	background:url('images/h1_white.gif');
    }
    .sidebar h2
    {
    	background:url('images/h1.gif');
    }
    .sidebar h1,
    .sidebar h2
    {
    	width:198px;
    	background-repeat:no-repeat;
    	background-color:#FFD3E7;
    	color:#FD1D81;
    	padding-left:5px;
    	padding-top:5px;
    	font-style:italic;
    	font-size:12px;
    	clear:both;
    }
    .sidebar ul
    {
    	padding:3px;
    }
    .sidebar li
    {
    	font-size:12px;
    	background:url('images/fade_dots.gif') no-repeat left bottom;
    	color:#FD0171;
    	list-style:none;
    }
    .sidebar a
    {
    	text-decoration:none;
    	color:#FD0171;
    	font-size:12px;
    }
    .sidebar img
    {
    	border:2px solid #FFA1CC;
    	margin:3px;
    }
    
    #middle
    {
    	float:left;
    	margin:7px;
    }
    #middle .roundbox
    {
    	background:#FFDEED;
    	width:570px;
    	text-align:center;
    }
    #middle .roundtop,
    #middle .roundbottom
    {
    	height:5px;
    	width:570px;
    	font-size:0px;
    }
    #middle .roundtop
    {
    	background:url('images/roundTop.gif') no-repeat;
    }
    #middle .roundbottom
    {
    	background:url('images/roundBottom.gif') no-repeat;
    	margin-bottom:10px;
    }
    #middle .girl
    {
    	margin:0px;
    	padding:0px;
    }
    #middle .girl img
    {
    	border:2px solid #DCDCDC;
    }
    .footer
    {
    	border-top:2px solid #FF6CAD;
    	background:#FFD3E7;
    	margin-top:10px;
    	color:#FD0171;
    	font-size:12px;
    }
    .footer a
    {
    	text-decoration:none;
    	padding:2px;
    	color:#FD0171;
    }
    .footer i
    {
    	font-style:normal;
    	float:left;
    }
    .footer em
    {
    	float:right;
    	font-style:normal;
    	margin-right:10px;
    }
    #middle h1
    {
    	color:#9F9F9F;
    	font-family:Tahoma;
    	font-size:18pt;
    	font-weight:bold;
    }
    #middle h1 em
    {
    	color:#FD0171;
    	font-style:normal;
    }
    #middle p
    {
    	font-family:Tahoma;
    	font-size:12px;
    	margin:0px;
    	padding:0px;
    	float:left;
    	width:570px;
    }
    #middle p a,
    #middle p a:hover
    {
    	color:#FD0171;
    	text-decoration:underline;
    }

  2. #2
    Join Date
    Jul 2001
    Location
    Canada
    Posts
    1,284
    Take out the fixed width:1000px in the css for the #container and substitue max-width: 1000px. Note that IE(6/7) doesn't handle min/max-width.
    "Obsolesence is just a lack of imagination."

  3. #3
    Join Date
    Aug 2002
    Posts
    328
    Hi
    I did that and that fixes the scrollbar thing but then when the page is minimized the design looks all messed up.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •