hi, i was wondering if someone could tell me how to put the whole webpage right in the center of a monitor of any size
Basically, everyone has a different size monitor. Thus, if one is a 20" monitor, a webpage that doesnt occupy the whole screen will obviously have more blank space in the bottom than top if it in not centered exactly.
So, what i want to know is how to make the webpage always in the center, so that there is equal space above the stuff on the page and below all the stuff on the page. This way, when people with different size monitors view it, the whole page will be in the exact center, without much more blank space in the bottom than top (ofcourse, i have the right and left centering taken care of)
If you are still not sure, please ask me more questions, I would really like to understand how to do this.
Note: I know that if you just simply center something, it will only be centered as in left to right, but how do you center the top and bottom parts too, to actually center the WHOLE PAGE, not just from left to right? I want this to happen automaticaaly on any size monitor.
And ummmm ... is adding CSS to HTML the same as when you add javasript anywhere in HTML code? im sorta new to the this stuff ya'll ....
any workable ideas will be appreciated from anyone
Thanx a lot ...
i think you should put this on your main div:
margin: auto auto;ok, but im using html, what's main div?? ..... where and how can CSS be used in html code??
thanx, i sorta need to know where to put the code you gave ...can u gimme a link to ur site?
i meant the containing boxYour not going to center it vertically that easy in CSS.
If you are using div's you can give the main containing div the good old margin-left: auto; margin-right: auto and the html and body the IE friendly text-align: center
So it would look like:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
text-align: center; /* for IE browsers */
}
#main {
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div id="main">All of your content goes here</div>
</body>
</html>yeah sure, here's my site ... <!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w -->, on different monitors ranging in size, the blank space at the bottom is either nothing or sooo much
like on a 15" monitor, the page (the info on the page) fits perfectly, exactly in the center, but on a 20" monitor theres soooo much blank space at the bottom, HOW CAN THAT BE FIXED FOR EVERY MONITOR ON IE AND FIREFOX???
automatically, i want it so that whether its a 50" monitor or 18" monitor, all info on the page is exactly in the center .... if CSS is not that easy, how about DHTML or sometin ....
thanx for the info so far everybody .... really appreciate it .....o crap, not <!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w -->, its actually <!-- m --><a class="postlink" href="http://lakshp.f2g.net">http://lakshp.f2g.net</a><!-- m -->
<!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w --> doesnt work
Basically, everyone has a different size monitor. Thus, if one is a 20" monitor, a webpage that doesnt occupy the whole screen will obviously have more blank space in the bottom than top if it in not centered exactly.
So, what i want to know is how to make the webpage always in the center, so that there is equal space above the stuff on the page and below all the stuff on the page. This way, when people with different size monitors view it, the whole page will be in the exact center, without much more blank space in the bottom than top (ofcourse, i have the right and left centering taken care of)
If you are still not sure, please ask me more questions, I would really like to understand how to do this.
Note: I know that if you just simply center something, it will only be centered as in left to right, but how do you center the top and bottom parts too, to actually center the WHOLE PAGE, not just from left to right? I want this to happen automaticaaly on any size monitor.
And ummmm ... is adding CSS to HTML the same as when you add javasript anywhere in HTML code? im sorta new to the this stuff ya'll ....
any workable ideas will be appreciated from anyone
Thanx a lot ...
i think you should put this on your main div:margin: auto auto;ok, but im using html, what's main div?? ..... where and how can CSS be used in html code??
thanx, i sorta need to know where to put the code you gave ...can u gimme a link to ur site?
i meant the containing boxYour not going to center it vertically that easy in CSS.
If you are using div's you can give the main containing div the good old margin-left: auto; margin-right: auto and the html and body the IE friendly text-align: center
So it would look like:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
html, body {
text-align: center; /* for IE browsers */
}
#main {
margin-left: auto;
margin-right: auto;
}
-->
</style>
</head>
<body>
<div id="main">All of your content goes here</div>
</body>
</html>yeah sure, here's my site ... <!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w -->, on different monitors ranging in size, the blank space at the bottom is either nothing or sooo much
like on a 15" monitor, the page (the info on the page) fits perfectly, exactly in the center, but on a 20" monitor theres soooo much blank space at the bottom, HOW CAN THAT BE FIXED FOR EVERY MONITOR ON IE AND FIREFOX???
automatically, i want it so that whether its a 50" monitor or 18" monitor, all info on the page is exactly in the center .... if CSS is not that easy, how about DHTML or sometin ....
thanx for the info so far everybody .... really appreciate it .....o crap, not <!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w -->, its actually <!-- m --><a class="postlink" href="http://lakshp.f2g.net">http://lakshp.f2g.net</a><!-- m -->
<!-- w --><a class="postlink" href="http://www.lakshp.f2g.net">www.lakshp.f2g.net</a><!-- w --> doesnt work