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!!
vivekchandra
0
Newbie Poster
Recommended Answers
Jump to PostWhat do you use as width on your main container? pixel, or %?
Jump to Postit wil help if you paste your code here. You need to define width for the main body
All 8 Replies
Kraai
56
Senior Poster
Featured Poster
What do you use as width on your main container? pixel, or %?
vivekchandra
0
Newbie Poster
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)...
Kraai
56
Senior Poster
Featured Poster
it wil help if you paste your code here. You need to define width for the main body
vivekchandra
0
Newbie Poster
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..
Kraai
56
Senior Poster
Featured Poster
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
vivekchandra
0
Newbie Poster
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..
vivekchandra
0
Newbie Poster
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
almostbob
866
Retired: passive income ROCKS
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&/
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.