Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2008
    Location
    India, Banglore
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts

    why does a page contents get misplaced when window resized?

    My site is really worse in case I resize the window, (in IE6, IE7, FF3, FF2) or drag my window size horizontally or vertically. All the menus, text, images are misplaced one after the other
    any idea how to fix this issue?
    ----------------------------------------------------------------------------------------
    body { color: #333333; background: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 1px auto auto 0px;font-size: 11px; line-height: normal;width:99%;border:0px solid blue; }
    ----------------------------------------------------------------------------------------
    I have used % over all my site and its in completion stage. I really cant rewrite whole css, but can alter any useful one.

    One more question, how do I make contents and images in a webpage wrap naturally when they are resized using browser window??
    Last edited by ksanjanadevi; 11-14-2008 at 11:56 AM. Reason: add more information

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Have a look at this.

    This is also useful.

    And again here.

    Using em as a size unit is a good start.

    for example. width:30em;

    Frank
    Last edited by effpeetee; 11-14-2008 at 11:59 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    23
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Have a look at this.

    This is also useful.

    And again here.

    Using em as a size unit is a good start.

    for example. width:30em;

    Frank
    should you use em for all measurements?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I don't think there is a hard and fast rule. I usually use em's for text and %ages (percentages) for all else. Both of these resize according to the window size.

    Sometimes experimenting is necessary.

    More general information is to be found here

    Frank
    Last edited by effpeetee; 11-14-2008 at 12:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New Coder
    Join Date
    Oct 2008
    Location
    India, Banglore
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I usually use em's for text and %ages (percentages) for all else. Both of these resize according to the window size.
    I have used % for my site like body, container, left sidebar, right sidebar, footer etc..
    but why the site's contents, images, menu are all scrambled????

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Without your complete code or a link to your site it is not possible to say. Dont use position:absolute; unless really necessary. Also don't code your divs too near to each other. Give them room to expand.

    This link also might help you,


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    	<title>liquid test</title>
    	<style type="text/css" media="screen">
    		body
    		{
    			margin: 0;
    			padding: 0;
    		}
    		
    		#banner
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			float: left;
    			width: 94%;
    			background-color: #ddd;
    		}
    		
    		.clearboth { clear: both; }
    		
    		.spacer
    		{
    			float: left;
    			width: 3%;
    		}
    		
    		#row1col1
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			width: 46%;
    			background-color: #bbb;
    		}
    		
    		#row1col2
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			margin-left: 3%;
    			width: 45%;
    			background-color: #bbb;
    		}
    		
    		#row2col1
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			margin-left: 3%;
    			width: 48%;
    			background-color: #ddd;
    		}
    		
    		#row2col2
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			width: 20%;
    			background-color: #ddd;
    		}
    		
    		#row2col3
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			margin-left: 3%;
    			width: 20%;
    			background-color: #ddd;
    		}
    		
    		#row3col1
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			width: 71%;
    			background-color: #bbb;
    		}
    		
    		#row3col2
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			margin-left: 3%;
    			width: 20%;
    			background-color: #bbb;
    		}
    		
    		#row4col1
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			width: 20%;
    			background-color: #ddd;
    		}
    		
    		#row4col2
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			margin-left: 3%;
    			width: 71%;
    			background-color: #ddd;
    		}
    		
    		#footer
    		{
    			border-top: 1px solid #ddd;
    			border-bottom: 1px solid #ddd;
    			margin-top: 10px;
    			float: left;
    			width: 94%;
    			background-color: #bbb;
    			text-align: right;
    		}
    		
    		h1, h2, h3, h4, h5, h6, p, ul, ol, dl
    		{
    			margin-left: 7px;
    			margin-right: 7px;
    		}
    		
    		h1, h2, h3, h4, h5, h6
    		{
    			margin-top: 5px;
    			margin-bottom: 0;
    		}
    		
    		h1+p, h2+p, h3+p, h4+p { margin-top: .2em; }
    </style>
    </head>
    <body>
    <div class="spacer">&nbsp;</div>
    <div id="banner">
    	<h1>Liquid insanity</h1>
    </div>
    
    <br class="clearboth">
    <div class="spacer">&nbsp;</div>
    <div id="row1col1">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
    	<p><a href="index.htm">&lt; Back to article</a></p>
    </div>
    <div id="row1col2">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
    </div>
    
    <br class="clearboth">
    <div class="spacer">&nbsp;</div>
    <div id="row2col2">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div>
    <div id="row2col1">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <div id="row2col3">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
    </div>
    
    <br class="clearboth">
    <div class="spacer">&nbsp;</div>
    <div id="row3col1">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <div id="row3col2">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
    </div>
    
    <br class="clearboth">
    <div class="spacer">&nbsp;</div>
    <div id="row4col1">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p>
    </div>
    <div id="row4col2">
    	<h3>Heading</h3>
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    
    <br class="clearboth">
    <div class="spacer">&nbsp;</div>
    <div id="footer">Footer info here</div>
    <br class="clearboth">
    </body>
    </html>
    Frank
    Last edited by effpeetee; 11-14-2008 at 01:06 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    New Coder
    Join Date
    Oct 2008
    Location
    India, Banglore
    Posts
    50
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried ur code, contents shrink according to the resize of the window. it should not happen like that, I want the alignment(contents) to be same but get only horizontal scroll. The contents should not be misplaced.

    body { color: #333333; background: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 1px; font-size: 11px; line-height: normal;}

    .container { clear: both;padding:0px 3px 0px 3px;width:99%;width:auto;}

    .sidebar-left { float: left; width: 20%; background:#cae9ee;min-height:50px;}
    .sidebar-right { float: left; width: 20%; }

    .body-left .page { width: 77%; padding-left: 2%; }
    .body-right .page { width: 77%; padding-right: 2%; }
    .body-both .page { width: 55%; padding-left: 2%; padding-right: 2%;}
    .body-none .page { width: 100%; padding-left: 0%; padding-right: 0%; float: none; }

    this is the code I have used.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    See if this helps.

    CSS....

    In between the <HEAD></HEAD> of your HTML page add in
    Line number On/OffCode: Select all
    <STYLE TYPE="text/css">

    body {overflow:auto}

    </STYLE>
    This will automatically hide or show the scrollbars when needed.



    Frank
    Last edited by effpeetee; 11-14-2008 at 02:46 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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