www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

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

  1. #1
    Join Date
    Nov 2007
    Posts
    113

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

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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  3. #3
    Join Date
    Nov 2007
    Posts
    113
    body{ width: 900px;
    margin:0 auto;
    text-align:left;} still not in center

  4. #4
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by HJC View Post
    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.

  5. #5
    Join Date
    Nov 2007
    Posts
    113
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  6. #6
    Join Date
    Jan 2009
    Posts
    24
    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}

  7. #7
    Join Date
    Nov 2007
    Posts
    113

    Unhappy

    I post my code, maybe can not why not at center
    asp
    Code:
    <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 &amp; Placement</a></td>
    					<td rel="Counselling"><a href="http://www.google.com.hk/">Counselling &amp; 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">
    				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
    				<br>
    				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
    			</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>
    				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
    			</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 &amp; 
    					Resources</a> <a href="http://www.javascriptkit.com/jsref/">Site Map</a>
    				<br>
    				&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
    			</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&amp; Job 
    					Board</a> <a href="http://www.hku.hk/">Events Registration &amp; 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> <!--end of top-->
    		<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> <!--end of second menu-->
    
    	</form>
    		
    </div>
    	
    	</body>
    </HTML>	
    css
    
    Code:
    .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;*/	
      }

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Quote Originally Posted by HJC View Post
    !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">

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

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

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

    No problem at all.

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by opensource888 View Post
    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; as well.

  12. #12
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    Quote Originally Posted by Fang View Post
    Dosen't work in older IE browsers, you need to use text-align:center; 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.

  13. #13
    Join Date
    Jan 2009
    Posts
    24
    HJC,

    It's nothing to do with doctype in this case. In contained you used &#37;, 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.)

    Code:
    .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;*/
     }

  14. #14
    Join Date
    Jan 2009
    Posts
    21

    Smile

    Quote Originally Posted by Fang View Post
    Dosen't work in older IE browsers, you need to use text-align:center; 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.

  15. #15
    Join Date
    Jan 2009
    Location
    Germany
    Posts
    32
    Quote Originally Posted by MorganA View Post
    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
    PHP Code:
    <!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 {
        
    padding10px;
        
    margin0;
        }
    #main {
        
    text-alignleft;
        
    border1px dashed #b9821a;
        
    margin0 auto;
        
    width500px;
        
    height100px;
        }
    </
    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.
    Last edited by anna55; 01-26-2009 at 04:47 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles