how to keep you web page on center what ever the brow size [Archive]

PDA

Click to See Complete Forum and Search --> : how to keep you web page on center what ever the brow size

HJC

01-21-2009, 03:16 AM

how to keep you web page on center what ever the brow size

Fang

01-21-2009, 07:14 AM

http://www.webdeveloper.com/forum/showpost.php?p=946357&postcount=2

HJC

01-21-2009, 07:25 PM

body{ width: 900px;
margin:0 auto;
text-align:left;} still not in center

felgall

01-21-2009, 07:38 PM

body{ width: 900px;
margin:0 auto;
text-align:left;} still not in center

Does your page have a valid doctype tag as the very first thing? Some browsers require that in order to follow the standards in interpreting how to centre things on the page.

HJC

01-21-2009, 10:21 PM

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

unigogo

01-21-2009, 10:43 PM

Share you another way when using % unit.

.container {width:w%}. To make it centered, add CSS left and position
.container {width:w%; left: (100 - w)/2 %; position:relative}

HJC

01-22-2009, 07:38 PM

I post my code, maybe can not why not at center
asp

<body>
<div class="contained" >
<div class="TopMenu">
<table cellspacing="0" cellpadding="4" width="100%" border="0" align="center">
<tr style="BACKGROUND-IMAGE: url(images/content_2.jpg)" id="maintab" class="basictab">
<td class="selected" rel="level">
<a href="http://www.yahoo.com">Campus Life</a></td>
<td rel="Careers"><a href="http://www.yahoo.com">Careers & Placement</a></td>
<td rel="Counselling"><a href="http://www.google.com.hk/">Counselling & Person
Enrichment</a></td>
<td rel="Development"><a href="">Student Development</a></td>
<td rel="contact"><a href="CedarsStaff.aspx">Contact Us</a></td>
</tr>
</table>
<div id="contact" class="submenustyle">
                    
<br>
                    
</div>
<div id="Development" class="submenustyle">
<a href="http://www.javascriptkit.com/jsref/">About Us</a> <a href="http://www.javascriptkit.com/domref/">
Director's Blog</a> <a href="http://www.javascriptkit.com/jsref/">Our
Programmes</a>
<br>
                    
</div>
<div id="Counselling" class="submenustyle">
<a href="http://www.javascriptkit.com/jsref/">About Us</a> <a href="http://www.javascriptkit.com/domref/">
Mental Health First Aid</a> <a href="http://www.javascriptkit.com/jsref/">Person
Enrichment</a> <a href="http://www.javascriptkit.com/jsref/">FAQs</a> <a href="http://www.javascriptkit.com/jsref/">
Psychological Assessment</a> <a href="http://www.javascriptkit.com/jsref/">HEA
(Concept Store)</a> <a href="http://www.javascriptkit.com/jsref/">Support &
Resources</a> <a href="http://www.javascriptkit.com/jsref/">Site Map</a>
<br>
                    
</div>
<div id="Careers" class="submenustyle">
<a href="http://www.hku.hk/">About us</a> <a href="http://www.hku.hk/">Campus
Recruitment</a> <a href="http://www.hku.hk/">Career Planning</a> <a href="http://www.hku.hk/">
Career Preparation</a> <a href="http://www.hku.hk/">Checkout Vacancy& Job
Board</a> <a href="http://www.hku.hk/">Events Registration & Shortlist
Acknowledgement</a> <a href="http://www.hku.hk/">Employers' Corner</a> <a href="http://www.hku.hk/">
Graduate Employment Survey</a> <a href="http://www.hku.hk/">Job Application
Forms</a> <a href="http://www.hku.hk/">NETjobs</a> <a href="http://www.hku.hk/">
NETmatch</a> <a href="http://www.hku.hk/">Past Event Gallery</a>
</div>
<div id="level" class="submenustyle">
<a href="http://www.hku.hk/">About us</a> <a href="http://www.google.com/">Accommodation</a>
<a href="http://www.javascriptkit.com/howto/">Catering</a> <a href="http://www.javascriptkit.com/howto/">
Managing Your Finances</a> <a href="http://www.javascriptkit.com/howto/htaccess.shtml">
Overcoming Disabilities</a> <a href="http://www.hku.hk/">Services to Student
Representatives</a> <a href="http://www.hku.hk/">Student Societies and
Activities</a> <a href="http://www.hku.hk/">Student Amenities</a> <a href="http://www.hku.hk/">
Support for International Students and Study Abroad</a> <a href="http://www.hku.hk/">
Visa Matters</a>
</div>
</div> 
<div class="DivHeader" id="indexHeader" align="center"></div>
<div class="SecMenu">
<table cellspacing="0" cellpadding="4" width="100%" border="0" align="center">
<tr style="BACKGROUND-IMAGE: url(images/content_2.jpg)" class="basictab">
<td><a href="http://cedars.hku.hk/cedars/publications.aspx">Publications</a></td>
<td><a href="http://cedars.hku.hk/cedars/linkstostudent.aspx">Resources outside CEDARS</a></td>
<td><a href="http://cedars.hku.hk/cedars/studentresources.aspx">Student Resources at
CEDRAS</a></td>
<td><a href="http://*cedars.hku.hk/cedars/*downloadableforms.aspx?cmd=ccmsformsdownload*">Downloadable
Forms</a></td>
</tr>
</table>
</div> 

</form>

</div>

</body>
</HTML>
css

.contained
{
width:w%;
left: (100 - w)/2 %;
position:relative

}
.TopMenu
{
position: absolute;
height:40px;
width:900px;
margin-top: 17px;
/*margin-left: 163px;*/
}
.DivHeader
{
position: absolute;
height:121px;
width:900px;
margin-top: 77px;
/* margin-left: 163px;*/
}

felgall

01-22-2009, 07:51 PM

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

That's an incomplete doctype that puts some browsers into quirks mode and stops centring working properly.

To fix it change your doctype to

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Coyotelab

01-22-2009, 10:59 PM

in case of having no control over the doctype
wrap the container between table tags:

<body>
<table align="center" cellpadding="0" cellspacing="0" border="0">
<div class="contained">
....
.....
......
</div>
</table>
</body>

opensource888

01-23-2009, 01:15 AM

as a beginner I just use "auto" in my container div.
auto for left and right margin.

No problem at all. :)

Fang

01-23-2009, 02:00 AM

as a beginner I just use "auto" in my container div.
Dosen't work in older IE browsers, you need to use text-align:center; (http://www.webdeveloper.com/forum/showpost.php?p=946357&postcount=2) as well.

anna55

01-23-2009, 04:36 AM

Dosen't work in older IE browsers, you need to use text-align:center; (http://www.webdeveloper.com/forum/showpost.php?p=946357&postcount=2) as well.

If you use a correct doctype you don't need to write 'text-align:center;'. Even IE6 will understand and act correctly. In my view there is no reason to support IE5.5 any longer, too less user.

unigogo

01-23-2009, 08:05 PM

HJC,

It's nothing to do with doctype in this case. In contained you used %, that's relative to your browser. If w = 80, the width of brower is 1024px, 80% = 820px, left = 10% = 11px.

But in TopMenu and DivHeader, the width is 900 px, so the content will go right. To make it centered, change the width of TopMenu and DivHeader to 800px, w = 80. (I change all position to relative, one </form> should be removed.)

.contained
{

width:80%;
left: 10%;
background-color:red;
position:relative

}
.TopMenu
{
position: relative;
height:40px;
width:800px;
margin-top: 17px;
/*margin-left: 163px;*/
}
.DivHeader
{
position: relative;
height:121px;
width:800px;
margin-top: 77px;
/* margin-left: 163px;*/
}

MorganA

01-26-2009, 02:41 PM

Dosen't work in older IE browsers, you need to use text-align:center; (http://www.webdeveloper.com/forum/showpost.php?p=946357&postcount=2) as well.

Tis true, when you would like to center your Web page, you must do this to keep IE6 happy.

body{
text-align: center;
}

Obviously this will also center your text so you will need to adjust your paragraph styles to override it.

anna55

01-26-2009, 03:39 PM

Tis true, when you would like to center your Web page, you must do this to keep IE6 happy.

NOPE Give you an example, check IE6 with and without a correct doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="content-style-type" content="text/css" />
<title>Example</title>
<style type="text/css">
body {
padding: 10px;
margin: 0;
}
#main {
text-align: left;
border: 1px dashed #b9821a;
margin: 0 auto;
width: 500px;
height: 100px;
}
</style>
</head>
<body >
<div id="main">This is centered. And as well IE6 is happy. :)</div>
</body>
</html>

Edit: You can even left out '#text-align: left;' in the main div and the text in there will still be on the left side.

MorganA

01-26-2009, 04:05 PM

That's awesome!! How does this look in IE 5.5 (even though I realize it is obsolete)?

anna55

01-26-2009, 04:10 PM

IE 5.5 does not center the div. But I don't care for that 'browser' any more, too less user.