layout problem

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

Attachments

vivekchandra

Newbie Poster

16 posts since May 2011

Reputation Points: 10

Solved Threads: 1

1 Year Ago

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

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

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)...

vivekchandra

Newbie Poster

16 posts since May 2011

Reputation Points: 10

Solved Threads: 1

1 Year Ago

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

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

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

Attachments home.txt (1.71KB) cssdesign.txt (3.92KB)

vivekchandra

Newbie Poster

16 posts since May 2011

Reputation Points: 10

Solved Threads: 1

1 Year Ago

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

Kraai

Senior Poster

3,981 posts since Feb 2008

Reputation Points: 76

Solved Threads: 87

1 Year Ago

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

	

</div>

</body>
</html>
Hope this helps

nope...it didn't work..

vivekchandra

Newbie Poster

16 posts since May 2011

Reputation Points: 10

Solved Threads: 1

1 Year Ago

Show Comments

-1

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

vivekchandra

Newbie Poster

16 posts since May 2011

Reputation Points: 10

Solved Threads: 1

1 Year Ago

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〈=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

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

This article has been dead for over three months

You