0

Hi,

I have this page designed in html and css. but what I can't understand is without mentioning any thing about the alignment of this page as center aligned, this page is center aligned for some reason. Generally as far as I understand this tag "text-align:center" if put in the main body of the page makes the page look center-aligned. But I have not done so. I am learning css on my own and am not an expert so please bear with me. Can any one please let me know as why this page is center aligned? Thanks,

This is the html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Web site design </title>
<link href="good.css" rel="stylesheet" type="text/css">
<meta name="keywords" content="content management, online booking, database, solutions, databases, software, development,">
<meta name="description" content="Web site design, graphic design, website software systems development and web promotion 
projects services. Specialists in e-commerce, hotel and tourism websites.">
</head>
<body>
<div id="maincontainer">
<div id="footercontainer">
<div id="top">
<img src="top.gif" alt="Website Design" width="699" height="80">
</div>
  <div id="google"><!-- Google CSE Search Box Begins -->
  <form id="searchbox_009844139294785558261:viu5inxbnja" action="[URL]http://www.google.com/cse">
    <input type="hidden" name="cx" value="009844139294785558261:viu5inxbnja" />
    <input name="q" type="text" size="20" />
    <input type="submit" name="sa" value="Search" />
    <input type="hidden" name="cof" value="FORID:1" />
  </form>
    </div>
<div id="nav">
  <ul>
    <li><a href="index.asp">home </a></li>
 <li> | <a href="contact/callback.asp">call back </a></li>
 <li> | <a href="clients/casestudies.asp">our clients </a></li>
 <li> | <a href="website-design-services/services.asp">services </a></li>
 <li> | <a href="website-design-company/company.asp">company </a></li>
 <li> | <a href="news/news.asp">news </a></li>
 <li> | <a href="website-design-services/supportform.asp">support </a></li>
 
  </ul>
</div>
<div id="mainimage">
<img src="stones1.jpg" alt="Website design, James Bond">
</div>
<div id="title">
  <h1><  LEADING WEB SITE DESIGN AGENCY></h1>
</div>
  <div id="testimonials"><h1>CLIENT TESTIMONIALS</h1>
    <p>Cheers</p>
    <p>Good Work<br>
 
    </p>
  </div>
  <div id="testimonialcontent">
  <p>"We have provided a friendly, efficient and quality service of design and development solutions, helping us 
communicate more effectively with our stakeholders." <a href="http://www.goodjob.org.uk" target="_blank">www.good.org.uk</a> 
</p>
  <p>&quot;You promised you could deliver on time and you did. You promised to listen to our needs and you did. You all 
managed to do it all with a smile.....my expectations were high and I am suitably impressed&quot;<br>
      <a href="http://www.good.org.uk" target="_blank">www.goodwork.org.uk</a> </p>
  </div>
  <div id="launch"><a href="clients/clients.asp">launch</a></div>
  <div id="download"><a href="PDF/Commendations.pdf" target="_blank">download</a></div>
  <div id="about">
    <h1>WHAT WE DO</h1>
    <ul>
      <li>High quality, long established website design agency</li>
      <li> Content Managed web site packages to suit all budgets</li>
      <li> Expandable website solutions that grow with your business</li>
      <li> Dynamic website modules to deliver real business benefits</li>
      <li> E-commerce development, integration and customisation</li>
      <li> Search Engine Optimisation and PPC campaign management</li>
      <li>Customer support and maintenance packages </li>
    </ul>
    </div>
 
 <div id="footer">
   <p>Web site design © <a href="http://www.good.net" target="_blank">Good Job</a></p>
   <p>0111 7900 924 | 
</p>
 </div>
 <div id="footerlinks">
   <p><a href="contact/contact.asp">Contact Us </a> |<a href="wgood/terms.asp"> Terms</a> | <a 
href="good.asp">Privacy</a> | <a href="good.asp">Sitemap</a></p>
    <p>Photography courtesy of <a href="[URL]http://www.good.co.uk/" target="_blank">James Bond</a> </p>
 </div> 
</div>
</div>
</body>
</html>

Here is the separate css sheet.

body {
  margin: 0px;
  padding: 0px;
  background-image: url('background.jpg');
  }
 
  #maincontainer {
  width: 700px;
  margin: 0px auto;
  position: relative;border: red 4px dashed;
  background-image:url('backgroundnew.jpg');padding-left:25px; padding-right:25px; padding-top:0px; padding-bottom:0px
  }
#top {
  top: 0px;
  margin: 0px;
  padding: 0px;
  position: absolute;
  }
#nav {
  top: 59px;
  margin: 0;
  padding: 0;
  position: absolute;
  height: 20px;
  width: 700px;
  font: 9px Verdana, Arial, Helvetica, sans-serif;
  }
#nav ul {
  margin: 0;
  padding: 0px 0px 0px 265px;
  }
#nav li {
  display:inline;
  margin: 0;
  padding: 0;
  }
#nav li a {
  font: bold 11px Verdana, Arial, Sans-Serif;
  color: #666;
  text-decoration: none;
   }
#nav li a:hover {
  color: #FF8000;
  }
#mainimage {
  top: 85px;
  position: absolute;
  }
#title {
  top: 243px;
  height: 35px;
  width: 700px;
  position: absolute;
  background-image:url('title.gif');
  padding: 0;
  margin: 0
  }
#title h1 {
  font: bold 10px Verdana, Arial, Helvetica, Sans-Serif;
  color: #fff;
  margin: 5px 10px 4px 65px;
  }
#testimonials {
  top: 278px;
  width: 350px;
  height: 120px;
  background-image: url('testimonialsback.gif');
  position:absolute;
  background-repeat: no-repeat
  }
#testimonials h1 {
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
  margin: 20px 0px 0px 0px;
  }
#testimonials p {
  font: 11px Arial, Helvetica, sans-serif;
  color:#FF6600;
  margin: 14px 0px 55px 5px;
  } 
#about {
  top: 278px;
  left: 365px;
  width: 330px;
  height: 150px;
  position:absolute;
  background-image:url('newback.gif');
  }
#about h1 {
  font: 12px Arial, Helvetica, sans-serif;
  color: #666;
  margin: 20px 0px 0px 6px;
  }
#about p {
  font: 11px/16px Arial, Helvetica, sans-serif;
  color: #666666;
  margin: 14px 15px 0px 5px;
  }
#about a {
  font: bold 11px Arial, Helvetica, sans-serif;
  text-decoration:none;
  color: #999;
  margin: 0px 0px 0px 0px;
  padding: 0;
  }
#about a:hover {
  color: #FF8000;
  }
  #about ul {
  padding: 0;
  list-style-image:url('arrow.gif');
  color: #999; margin-left:25px; margin-right:0px; margin-top:10px; margin-bottom:0px
 
  }
#about li {
  font: 11px Arial, Helvetica, sans-serif;
  color: #666;
  margin: 0px 0px 15px 0px;
  padding: 0;
  margin: 2px;
 
  }
#about li a {
  color: #FF6600;
  text-decoration:none;
  }
#about li a:hover {
  color: #333;
  }
#downloadabout {
  top: 299px;
  left: 492px;
  position: absolute;
  width: 150px;
}  
#downloadabout a {
  font: bold 11px Arial, Helvetica, sans-serif;
  text-decoration:none;
  color: #999;
  margin: 0px 0px 0px 0px;
  padding: 0;
  }
#downloadabout a:hover {
  color: #FF8000;
  }       
#launch {
  top: 299px;
  left: 170px;
  position:absolute;
}
#launch a {
  font: bold 11px Arial, Helvetica, sans-serif;
  text-decoration:none;
  color: #999;
  margin: 0px 0px 0px 0px;
  padding: 0;
  }
#launch a:hover {
  color: #FF8000;
  }   
#download {
  top: 299px;
  left: 250px;
  position:absolute;
}  
#download a {
  font: bold 11px Arial, Helvetica, sans-serif;
  text-decoration:none;
  color: #999;
  margin: 0px 0px 0px 0px;
  padding: 0;
  }
#download a:hover {
  color: #FF8000;
  }
#testimonialcontent {
  left: 80px;
  top: 327px;
  width: 255px;
  position: absolute;
  }
#testimonialcontent p {
  font: 11px Arial, Helvetica, sans-serif;
  color: #666666;
  margin: 0px 0px 14px 0px;
  }
#testimonialcontent a {
  color: #FF6600;
  text-decoration:none;
  }
#testimonialcontent a:hover {
  color: #333;
  }
#footer {
  position: absolute;
  width: 690px;
  bottom: 0;
  background-image:url('bottom.gif');
  margin: 0; padding-left:10px; padding-right:0px; padding-top:15px; padding-bottom:0px
  }
#footer p {
  font: 11px Arial, Helvetica, sans-serif;
  color: #666;
  margin: 0px 0px 7px 0px;
  }
#footer a {
  color:#FF9900;
  text-decoration:none;
  }
#footer a:hover {
  color: #666666;
  }      
#footercontainer {
  position: relative;
  height: 780px;
  width: 700px;
  }
#footerlinks {
  position: absolute;
  width: 220px;
  bottom: -3px;
  left: 482px;
  font: 11px Arial, Sans-serif;
  color: #666666;
  margin: 0;
  padding: 2px 0px 0px 0px;
  }
#footerlinks p { 
  margin: 0;
  padding: 0px 0px 8px 0px;
  text-align: right;
  }
#footerlinks a {
  font: 11px Arial, Helvetica, sans-serif;
  color: #FF9900;
  text-decoration: none;
  }
#footerlinks a:hover {
  color: #666666;
  }
#google {
  position: absolute;
  top: 20px;
  left: 485px;
  height: 50px;
  width: 220px;
}
3
Contributors
3
Replies
4
Views
11 Years
Discussion Span
Last Post by Gmarvz
0

this line:

margin: 0px auto;

is setting some of the margins on your '#maincontainer' div to be auto. auto means; take a proportion of the available space. Generally, if you set the left and right margins of something to be "auto" it has the effect of aligning it in the middle of the page. This only happens if you give something a specific size (or if it has a specific size). in this case, you are giving the main container a width of 700px; so left and right auto margins will each take ( 50% of ( the width of the page minus 700 px ) ); and that will center the maincontainer div.

Note, that this isn't the same as using text-align: center. text-align: center aligns 'text' (and certain objects) in a container around the container's horizontal center. But, margin-left:auto;margin-right:auto; aligns an object to the center of its container regardless of text alignment rules in that container.

0

this line:

margin: 0px auto;

Excellent reply my friend. I was trying very hard to get to grips with the whole idea of margin since being a newbie in the field of web design. Your explanation makes good sense. Here is something very similar to your reply that I just came across.

http://www.w3.org/TR/CSS21/visudet.html#blockwidth

Thanks a lot. Appreciated.

0

this line:

margin: 0px auto;

is setting some of the margins on your '#maincontainer' div to be auto. auto means; take a proportion of the available space. Generally, if you set the left and right margins of something to be "auto" it has the effect of aligning it in the middle of the page. This only happens if you give something a specific size (or if it has a specific size). in this case, you are giving the main container a width of 700px; so left and right auto margins will each take ( 50% of ( the width of the page minus 700 px ) ); and that will center the maincontainer div.

Note, that this isn't the same as using text-align: center. text-align: center aligns 'text' (and certain objects) in a container around the container's horizontal center. But, margin-left:auto;margin-right:auto; aligns an object to the center of its container regardless of text alignment rules in that container.

well defined.. easy to understand.. thanks!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.