Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts

    Having problems centering web page within browser(s)

    Okay so I am essentially just trying to get the core content of this webpage to be centered within a browser. So if a user were to keep resizing the browser, the content would get re-positioned accordingly.

    There must be something wrong with my code because although I have tried setting the margins to "auto" it still does not seem to be working correctly. I've spent enough time trying to figure out my mistake but now I feel I need to enlist some help. Here is the code for the HTML and CSS files:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>San Marcos Dental Center Home</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #youtube_video {
    	text-align: center;
    	left: 288px;
    	top: 469px;
    }
    </style>
    </head>
    <body>
    <div class="all_content">
    <div class="bg_foot">
    <div id="main" >
    <!-- header begins -->
    <div id="header">
    	<div id="buttons">
          <div  class="razd_but"><a href="index.html" title="Home" >Home</a></div>
          <div class="razd_but"><a href="dr_hurt.html"  title="" style="width:95px;">Dr. Hurt</a></div>
          <div  class="razd_but"><a href="appointment_scheduler.html" title="" style="width:178px;">Schedule Appointment</a></div>
          <div  class="razd_but" ><a href="our_office.html" title="">Our Office</a></div>
          <div  class="razd_but"><a href="procedures.html" title="">Procedures</a></div>
          <div class="razd_but"><a href="smile_gallery.html" title="" style="width:128px;">Smile Gallery</a></div>
          <div class="razd_but"><a href="contact_us.html" title="">Contact Us</a></div>
          <div class="razd_but"><a href="directions.html" title="">Directions</a></div>
       
        </div>
           
    
    	<div id="logo">
    	  <p><a href="#">San Marcos </a></p>
    	  <p><a href="#">Dental Center</a></p></div>
          
          <object width="550" height="400" style="position:relative; left:560px; top:-191px">
    	<param name="SMDC Header Flash" value="header_flash_final.swf">
    	<embed src="header_flash_final.swf" width="320" height="178">
    	</embed>
    </object>
          
    </div>
    
    
    <!-- header ends -->
            <!-- content begins -->
            <div id="content">
                <div id="left">
               	    <h2>Welcome to San Diego's #1 Dental Provider</h2>
                    <div class="left_b">
                     	<p><img src="images/img1.jpg" width="102" height="77" class="img" alt=""  />Dr. Hurt and the staff of San Marcos Dental Center are proud to offer state-of-the-art, comprehensive dental treatment in a friendly atmosphere to all in the North San Diego County region. Our goal is to help patients achieve and maintain excellent dental health throughout their lifetime. Using the most advanced technology and the latest dental techniques, we provide the best service available in all areas of dentistry.</p>
                   	  <p>The following is a list of some of the services we offer:*</p>
               	    <br />
                   	    <p style="font-size:14px; font-weight:bold;"><iframe src=	"http://www.youtube.com/embed/-2WNev1bpyo" width="320" height="195" frameborder="1" id="youtube_video" title="YouTube_video_player" allowfullscreen style="padding-left: 20px; float:right;"></iframe><em>Affordable Sleep Testing*<br />
                   	      Cleanings and Sealants*<br />
                   	      Root Canal Treatment*<br />
                   	      Periodontal Surgery*<br />
                   	      Sedation Dentistry (See Following Section)*<br />
                   	      Crowns and Bridges*<br />
                   	      Implants*<br />
                   	      Cosmetic Veneers*<br />
                   	      Tooth Whitening*<br />
                   	      Extractions*<br />
                   	      Laser Therapy*<br />
                   	      Dentures*<br />
               	      And plenty other services!</em>               	  </p>
                   	  <p> 
                   	    
                   	  </p>
                   	  <p><a href="#" class="color_r">read more</a></p>
    <br />
                  </div>
                   	<h2>Sedation Dentistry</h2>
                    <div class="left_b">
                      <p><strong>W</strong>e want your dental experience to be a pleasant one. For those people that have anxiety about going to the dentist we offer conscious*<strong>Sedation Dentistry</strong>. We go the extra mile to ensure that our patients are comfortable and relaxed during treatment.</p>
                      <p>We go all-out to deliver the best dental care - here are just a couple of comments from our patients!</p>
    <p>&nbsp;</p>
                      <p>&quot;I am so happy with the wonderful work you do! You are all so friendly, which is so comforting, because it shows you really care.&quot; - E.H.</p>
    <p>&quot;Thank you for showing such honest concern and listening to me. I feel I can trust you to do the right thing and tell me the truth about my dental care.&quot; - L.C.</p>
                      <div class="read"><a href="#" class="color_r">read more</a></div><br />
                  </div>
                       
                </div>
                <div id="right">
                	<h1>Scheduler</h1>
                    <div class="tit_bot"><img src="scheduler_icon.png" width="222" height="93" alt="Schedule an Appointment!" /></div>
               	  <h1>Company News</h1>
                  <div class="tit_bot">
                      <ul>
                        <li><a href="">Lorem ipsum dolor</a></li>
                        <li><a href="">Sed eget tellus</a></li>
                        <li><a href="">Donec fringilla</a></li>
                        <li><a href="">Nullam in consequat augue</a></li>
                    </ul>
                      <br />
                  </div>
            </div>
             <div style="clear: both;"><img src="images/spaser.gif" alt="" width="1" height="1" /></div>
    </div>
    <!-- content ends -->
     <!-- footer begins -->
    <div id="footer">
      <p>
        <codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="100" width="800">
          <param value="" name="San Marcos Dental Center Offers..." />
          <param value="high" name="quality" />
          <embed src="footer_banner_final.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="847" height="106"></embed>
        </object>
      </p>
      <p>Copyright  2010. Designed by <a href="http://www.metamorphozis.com/" title="Flash Templates">Flash Templates. Modified by Kylan Hurt</a>.<br />
        <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
      <p>&nbsp;</p>
    </div>
    <!-- footer ends -->
    </div>
    </div>
    </div>
    </body>
    </html>
    CSS Part:

    Code:
    /*
    Design by Metamorphosis Design
    http://www.metamorphozis.com
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    *
    {
    border: 0;
    margin: 0;
    }
    
    img
    {
    border: 0px;
    }
    
    
     a{	
     	
    	text-decoration: underline;
    	color:#1A5B8F;
    }
    
     a:hover{
    	color:#1A5B8F;
    	text-decoration:none;
    }
    
    all_content{
    	margin-right: auto;
    	margin-left: auto;
    }
    	
    body{
    	font: 12px Arial, Helvetica, sans-serif;
    	color: #000000;
    	line-height:20px;
    	background: url(images/bg.jpg) top left repeat-x #4FBEDD;
    	margin-right: auto;
    	margin-left: auto;
    	}
    	
    .bg_foot {
    background: url(images/footer.jpg) bottom repeat-x; width:900px;}
    
    
    #main {
    	width: 900px;
    	margin: auto auto;
    	padding: 15px 20px 20px 15px;
    	
    }
    
    
    #header { width:900px;
    padding: 0px 0px 0px 0px;
    height: 247px;
    background: url(images/head.jpg) 197px 0px no-repeat ;
    }
    
    #buttons{
    	width: 900px;
    	background: url(images/menu.jpg) left top repeat-x;
    	text-align:center;
    	height:40px;
    	margin-right:0px;
    	border-style:dotted;
    	border-color:#FFF;
    }
    
    
    #buttons a {
    	font-family: Georgia, Arial, Helvetica, sans-serif;
    	font-size: 16px;
    	font-weight: 100;
    	display: block;
    	float: left;
    	width: 93px;
    	height: 29px;
    	text-decoration: none;
    	color: #FFFFFF;
    	padding-top: 4px;
    	text-align: center;
    	border:thin;
    	border-color:#FFF;
    	border-style:double;
    }
    
    
    
    #buttons a:hover {
    	text-decoration: none;
    	background:url(images/but_ov.jpg) center bottom no-repeat;
    	color:#FFFFFF;
    	margin-right: 0px;
    	font-size: 16px;
    }
    
    #logo{
    	background: url(images/logo3.png) left top no-repeat;
    	height:179px;
    	padding: 12px 290px 0px 250px;
    	text-align:center;
    }
    
    #logo a {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	text-decoration: none;
    	font-size: 30px;
    	color: #FFFFFF;
    	font-weight: bold;
    	font-style:italic;
    	text-align:center;
    }
    
    
    #logo H3 a{
    	font-size: 12px;
    	background:none;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-style:italic;
    }
    
    #bg_top {
    	background: url(images/bg_top.jpg) left top no-repeat;	
    	height:304px;
    	width:317px;
    	float:left;}
    
    #content{
    	width: 900px;
    	padding: 7px 0px 0px 0px;
    	background:#FFFFFF;
    }
    
    #left{
    	width: 643px;
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 8px;
    	float:left;
    	background: url(images/tit_l.jpg) top repeat-x;
    }
    
    .left_b {
    padding: 10px 10px 0px 6px;
    background:url(images/tit_lb.jpg) left top no-repeat;
    }
    
    .razd_l {
    height:20px;
    width: 100%;
    background:url(images/razd_l.gif) bottom repeat-x;}
    
    .tit_bot {	background: url(images/tit_rb.jpg) left top no-repeat;
    			padding: 7px 5px 0px 0px;
    }
    
    .text{
    	padding: 0px 20px 0px 15px;
    }
    
    .img {	float:left;
    		margin: 6px 17px 5px 0px;
    }
    
    .img_r {	float: right;
    		margin: 10px 0px 0px 15px;
    }
    .free {
    padding: 0px 0px 0px 10px;}
    
    span {	color:#0F467E;
    		font-weight:bold;
    }
    
    .dat { text-decoration:underline;}
    
    #right H1{
    	font-family: Georgia, Arial, Helvetica, sans-serif;
    	font-size:18px;
    	font-weight:normal;
    	color: #FFFFFF;
    	height: 30px;
    	padding-left: 10px;
    	padding-top: 4px;
    	text-align: center;
    	background: url(images/tit_r.gif) 0px 0px  no-repeat;
    }
    
    #left H2{
    	font-family: Georgia, Arial, Helvetica, sans-serif;
    	font-size:18px;
    	font-weight:normal;
    	color: #FFFFFF;
    	padding-left: 8px;
    	padding-top: 4px;
    	height:30px;
    	text-align:left;
    	background: url(images/tit_l.gif) 0px 0px  no-repeat;
    }
    
    .read{
    	text-align:right;
    	padding-right:5px;
    	padding-top: 5px;
    }
    .color_r { color:#0F467E;
    font-weight:bold;
    text-decoration:underline;}
    
    a:hover { text-decoration:none;}
    
    .read_r{
    	text-align:right;
    	padding-right:5px;
    	padding-top: 8px;
    }
    
    #right{
    	float:right;
    	width: 226px;
    	margin-right: 7px;
    	background: url(images/right.jpg) top repeat-x;
    }
    
    #right ul 
    {
    	list-style: none;
    	padding-left:0px;
    	padding-top:0px;
    	margin: 0px;
    	display:block;
    	padding-bottom: 0px;
    }
    
    #right li{
    	padding-top: 10px;
    	padding-left: 23px;
    	background: url(images/fish.gif) 8px 17px no-repeat;
    }
    
    #right .list 
    {
    	list-style: none;
    	padding-left: 23px;
    	padding-top: 5px;
    	padding-bottom: 10px;
    	margin: 0px;
    	display:block;
    	background: url(images/fish.gif) 0px 12px no-repeat;
    }
    
    #footer{
    	height: 190px;
    	width: 900px;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-align: center;
    	clear:both;
    	padding: 10px 0px 0px 0px;
    }
    
    #footer a{
    	color: #FFFFFF;
    	font-size: 10px;
    	text-decoration: none;
    }
    
    #footer a:hover{
    	color: #FFFFFF;
    	font-size: 10px;
    	text-decoration: underline;
    }
    I'm just having problems finding where I messed up. I have attached a jpeg of what the site looks like right now. Any help would be greatly appreciated.
    Attached Thumbnails Attached Thumbnails Having problems centering web page within browser(s)-smdc-website-not-centered-.jpg  
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #2
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    You will kick yourself for this one...

    You need to add 'text-align:center' to your body CSS.

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Well, this looks like a simple solution. You have gone the route of trying to center your all content div using auto with your left and right margins. Which is one way to do it, but you forgot to add a width to you div, without that its pointless. Btw, if you are going to use this way you need to know that some browsers do not center the containing blocks using this method as they ignore the auto margins. These browsers include:
    • NN4 (Mac and Win)
    • Win/IE4
    • Win/IE5
    • Win/IE5.5
    • Win/IE6 (when in quirks-mode)
    By adding two simple rules, this problem can be overcome in all of the browsers mentioned above, excluding NN4.

    1. Center the body

    While these browsers ignore auto margins, they will follow “text-align: center”. If this is applied to the body, the containing block will center correctly. So, a new rule is added:
    Code:
    body{    text-align: center;}
    .all_content{    margin-left: auto;    margin-right: auto;    width: 50em;}
    2. Resetting text-align


    The only problem with this new rule is that all content on the page is now center-aligned. To overcome the center alignment problem, a new declaration is added within the containing block rule set – “text-align: left”. The final CSS code is:
    Code:
    body{    text-align: center;}
    .all_content{    margin-left: auto;    margin-right: auto;    width: 50em;    text-align: left;}
    Last edited by Chris Hick; 04-25-2011 at 05:53 PM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #4
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Thank you for the responses. Chris, your idea worked although I am a bit confused as to why I have to use the "width: 50em;" part of the code... I'd prefer if the main DIV portions could re-center when I re-size the browser window.

    Other than that it's worked perfectly.
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live

  • #5
    Regular Coder
    Join Date
    Apr 2011
    Posts
    286
    Thanks
    2
    Thanked 39 Times in 39 Posts
    If you don't give the div a width, it will not center, instead it will resize to the maximum space available, like the size of the parent container which is probably the browser window.

    divs by default: take the maximum width, and expands the height to encompass everything inside it.

  • #6
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Wojjie is correct, d'Anconia. In order for a div to be centered upon the page it has to have a specific width. Think about it this way, say you are a browser and someone tells you hey I want to put auto margins on the sides of this div, meaning they equal on both sides, and have 0 margins on the top and bottom. You say ok, I can do that! But then you realize, how can I make the margins equal on either side of the div if I don't know the width of the div? If the browser doesn't have a number to start with and subtract the difference from the total width of the user's browser then there is no way to find out how to make the margins equal on the sides. Does that make sense??

    Also, it doesn't have to be 50em. It can be any width that you want and in any form-percent, em, px. That is entirely up to you.
    Last edited by Chris Hick; 04-28-2011 at 04:36 PM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #7
    Regular Coder d'Anconia's Avatar
    Join Date
    Jan 2010
    Location
    Tempe, AZ
    Posts
    149
    Thanks
    16
    Thanked 6 Times in 6 Posts
    Okay, thank you for the follow-up responses. I will tamper with things a little bit tonight (or tomorrow) and let you guys know how it goes. What you're saying makes sense and I think what I pictured in my mind is the possibility of setting the div width as a percentage of the entire browser window. I will have to see how this affects the text within the divs, etc, especially if DIVs inside of the outer DIV are in fixed px or em width.

    In case you couldn't tell I'm a bit of a beginner at this but having helpful people like you guys on this forum saves me a bunch of time and heartache. Thanks for the responses!
    Datagonia Web (My Portfolio)

    Powerful ideas for all lovers of personal and political freedom:
    Freedomain Radio
    Free Talk Live


  •  

    Tags for this Thread

    Posting Permissions

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