SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple: don't specify widths in pixels.

    This is a presentational issue and you should post it in the CSS forum. The short answer is to use % instead of pixels, but there'll be issues with that as well.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, if someone could move this to correct forum then pls.

    Thanks for the answer, would like someone to go into bit more detail tho pls, that would be great.

    Thanks

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Tommy, I think he's asking you to move it for him .

    Ross, while most layouts will work fine without specifiying a width, some simply will not work without one.

    If you can post the code or provide a link to the layout in question, I'll be able to help you pinpiint your problem (I don't use the title "Resident Browser Junkie" for nothing) and show you how to fix it.

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thanks.

    This is the html 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>
    This is the css code

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

  6. #6
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx, I see thats in xhtml strict, if I change it back to chtml transitional at the top it wont mess up will it?

    Cheers

  7. #7
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm i couldnt get that to work, it messed up the design?

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a new page but is done in XHMTL Transitional already as you can see from my code.

    I did what you said but it didnt work unles I did something wrong.

  9. #9
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can see the design @ aaron-lennon.com/test (Dont want it clickable as dont want it indexed)

    As you can see if you view in 800 resolution it has a scrollbar and also if you minimize the window a scroller appears.

    Thanks

  10. #10
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I dont really follow.

    Do I just copy and paste that code?

    Thnx

  11. #11
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but still get a scrollbar?

  12. #12
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I still am not following much as I am not good at this sorta stuff.

    What should I change to 768?

    Thanks

  13. #13
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I set the width to 20% then the pics are too small?

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I sorta see, youve put the css code and the html in the same bit, but this will be the css?

    Code:
    /* CSS Document */
    	*{margin:0;padding:0;}
    	
    	body{
    	background:#FFF;
    	font-family:"Trebuchet MS",sans-serif;
    	border-top:1px solid #ffffff;
    	margin-top:-1px;
    	}
    	
    	#container{
    	margin:0px auto;
    	min-width:768px;
    	max-width:940px;
    	}
    	.banner{
    	height:156px;
    	background: url('images/banner.gif') no-repeat;
    	margin-bottom:10px;
    	}
    	.bannerRight{
    	width:74px;
    	height:150px;
    	float:right;
    	background:#ccffcc url('images/banner_right.gif');
    	}
    	
    	.adsTop{
    	width:466px;
    	height:150px;
    	float:right;
    	}
    	.adsTop img{
    	border:0;
    	margin-top:35px;
    	}
    	.divider{
    	clear:both;
    	height:6px;
    	background:#ff6600 url('images/divider.gif') repeat-x;
    	font-size:0;
    	overflow:hidden;
    	
    	}
    	
    	.sidebar{
    	width:203px;
    	float:right;
    	background:#FFD3E7;
    	}
    	.l{float:left;border-right:7px solid #ffffff;}
    	.r{float:right;border-left:7px solid #ffffff;}
    	
    	.sidebar h1{
    	background:url('images/h1_white.gif');
    }
    .sidebar h2
    {
    	background:url('images/h1.gif');
    }
    .sidebar h1,
    .sidebar h2
    {
    	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{width:100%;float:left;}
    
    
    #middle .roundbox
    {
    	background:#FFDEED;
    
    	text-align:center;
    }
    #middle .roundtop,
    #middle .roundbottom
    {
    	height:5px;
    	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:0 auto;
    
    padding:0px;
    text-align:center;
    }
    #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,sans-serif;
    	font-size:18px;
    	font-weight:bold;
    }
    #middle h1 em
    {
    	color:#FD0171;
    	font-style:normal;
    }
    #middle p
    {
    	font-family:Tahoma,sans-serif;
    	font-size:12px;
    	margin:0px;
    	padding:5px;
    	float:left;
    }
    #middle p a,
    #middle p a:hover
    {
    	color:#FD0171;
    	text-decoration:underline;
    }
    
    * html .x{float:left;}
    head+body .x{margin:0 210px 0 210px;}
    
    img{border:none;}
    	</style>
    And this the html?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Babe Blog</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    		<!--[if IE]>
    	<style type="text/css">
    	body{margin:0 auto;}
    	body{width:expression(documentElement.clientWidth <770 ?(documentElement.clientWidth==0 ?(body.clientWidth<770 ? "770":"auto"):"770px"):"auto");}
    	body{width:expression( documentElement.clientWidth > 940 ? (documentElement.clientWidth == 0 ? (body.clientWidth > 940 ? "940" : "auto") : "940px") : "auto" );}
    	</style>
    	<![endif]-->
    </head>
    
    <body>
    <div id="container">
    
    <div class="banner">
    
    <div class="adsTop"><a href="##"><img src="images/advertisement.gif" alt="" /></a></div>
    <div class="bannerRight">&nbsp;</div>
    
    <div class="divider">&nbsp;</div>
    
    </div>
    
    
    
    	
    <div class="sidebar l">
    		<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 class="sidebar r">
    		<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>
    	
    	<div class="x">
    
    <div id="middle">
    
    		<div class="roundtop">&nbsp;</div>
    		<div class="roundbox">
    			<a href="##"><img src="images/advertisement.gif" width="348" alt="" /></a>
    		</div>
    		<div class="roundbottom">&nbsp;</div>
    	
    		<div class="girl">
    			<a href="##"><img src="images/girl_big.gif" width="165" alt="" /></a>
    			<a href="##"><img src="images/girl_big.gif" width="165" alt="" /></a>
    			<a href="##"><img src="images/girl_big.gif" width="165" 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>
    	
    	<br clear="all" />
    	
    	<div class="footer"><em> : </em>
    	<br clear="all" />
      </div>
    </div>
    </body>
    </html>
    Thnx

  15. #15
    SitePoint Evangelist
    Join Date
    Jul 2003
    Location
    uk
    Posts
    503
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry but I cant get that to work either.


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
  •