I am making a website....i encounter a very strange problem that when my browser in full screen mode design looks as i want...but when i resize my broser window to some lower size..everything get messy....i am also uploading the pic of both the screenshots....
so is there any help!!

What do you use as width on your main container? pixel, or %?

What do you use as width on your main container? pixel, or %?

no...i dint used main container as all are in body tag and set padding and margin to 0px
for both and didn't used width and height for body tag, and then i have divided it in 4 parts top, left, right, and center...and for all these 4 parts i have used %. and pixel used for inner elements like anchor tag(home, setting)...

it wil help if you paste your code here. You need to define width for the main body

it wil help if you paste your code here. You need to define width for the main body

ok....im uploading it....1st file is home.txt which contains html code and some php code
and other file is cssdesign.txt which contains css code..

OK, For your body, you need to define a width, either in pixels, or in % or em. I think in your case, use 100% You need to create a div for this, say you call it bodyContainer Then you need to place everything inside this container tag.

You have currently:

body{ padding:0px; margin:0px; background:url(../image/tw.gif) no-repeat ;float:left; }

You can ad to above:

body	{
	text-align: center;
	position: relative; 
}

Then create div #bodyContainer and ad width and height to it, like so:

#bodyContainer	{
	width: 100%;
	height: auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

Then, your html should look something like:

<html>
<body>

<div id="bodyContainer">

	<!-- Then place all of your content inside of here and position it absolutely. -->

</div>

</body>
</html>

Hope this helps

OK, For your body, you need to define a width, either in pixels, or in % or em. I think in your case, use 100% You need to create a div for this, say you call it bodyContainer Then you need to place everything inside this container tag.

You have currently:

body{ padding:0px; margin:0px; background:url(../image/tw.gif) no-repeat ;float:left; }

You can ad to above:

body	{
	text-align: center;
	position: relative; 
}

Then create div #bodyContainer and ad width and height to it, like so:

#bodyContainer	{
	width: 100%;
	height: auto;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

Then, your html should look something like:

<html>
<body>

<div id="bodyContainer">

	<!-- Then place all of your content inside of here and position it absolutely. -->

</div>

</body>
</html>

Hope this helps

nope...it didn't work..

well...i solved this problem...actually there are 2 main type of layouts one based on % and another one based on pixels.....% layout vary depending upon the size of your window(like in gooogle.com, orkut.com)....and pixel based layout are fixed and independent of the size of browser window....ad most of the user use both of them, so while resizing their window its get messy.....also dont set width and height to auto untill you are not sure....
so time to close this thread

0px is deprecated, zero is dimensionless, 0px puts compliant browsers into quirks mode and may be causing problems
1px <> 1em <> 1% <> 1pt <> 1in <> 1cm <> 1apple
0px = 0em = 0% = 0pt = 0in = 0cm = 0apple and is written 0

for validation problems these standard test beds may assist you Speed http://analyze.websiteoptimization.com/authenticate.php?url=http://www.yoursite.com&/

html check http://validator.w3.org/check?uri=http%3A%2F%2Fwww.yoursite.com&charset=%28detect+automatically%29&doctype=Inline&group=0

css check http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.yoursite.com&profile=css21&usermedium=all&warning=1&lang=en

handheld http://demo.opera-mini.net/demo.html?www.yoursite.com

other browsers http://www.browsershots.org

many problems (if present) will show serious code errors in the w3c validator sites will produce blankscreens in browsershots

Valid code does not ensure the site will work ... Invalid code ensures the site will [b]not[/b] work ... .. in all browser OS combinations

not all layouts work in handheld devices strictly code based, you understand your content more than I would

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.