...

View Full Version : why does a page contents get misplaced when window resized?



ksanjanadevi
11-14-2008, 11:50 AM
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??

effpeetee
11-14-2008, 11:55 AM
Have a look at this. (http://nopeople.com/CSS/background_image_resize/)

This is also useful. (http://www.maxdesign.com.au/presentation/liquid/)

And again here. (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)

Using em as a size unit is a good start.

for example. width:30em;

Frank

jvignacio
11-14-2008, 12:04 PM
Have a look at this. (http://nopeople.com/CSS/background_image_resize/)

This is also useful. (http://www.maxdesign.com.au/presentation/liquid/)

And again here. (http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css)

Using em as a size unit is a good start.

for example. width:30em;

Frank

should you use em for all measurements?

effpeetee
11-14-2008, 12:12 PM
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 (http://exitfegs.co.uk/Sources.html)

Frank

ksanjanadevi
11-14-2008, 12:51 PM
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????

effpeetee
11-14-2008, 01:00 PM
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, (http://www.maxdesign.com.au/presentation/liquid/example13.htm)


<!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

ksanjanadevi
11-14-2008, 01:20 PM
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.

effpeetee
11-14-2008, 02:30 PM
See if this helps. (http://www.ozzu.com/website-design-forum/turning-off-scroll-bars-t19004.html)

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum