DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)
-   HTML and CSS (http://www.daniweb.com/forums/forum143.html)
-   -   Why is this page center aligned? (http://www.daniweb.com/forums/thread72338.html)

tech291083 Mar 14th, 2007 12:10 pm
Why is this page center aligned?
 
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" "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="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="http://www.good.co.uk/" target="_blank">James Bond</a> </p>

 </div> 

</div>

</div>

</body>

</html>

Here is the separate css sheet.


[php]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;
} [/php]

MattEvans Mar 14th, 2007 10:12 pm
Re: Why is this page center aligned?
 
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.

tech291083 Mar 15th, 2007 7:40 am
Re: Why is this page center aligned?
 
Quote:
Originally Posted by MattEvans (Post 329661)
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.

Gmarvz Mar 25th, 2007 2:27 pm
Re: Why is this page center aligned?
 
Quote:
Originally Posted by MattEvans (Post 329661)
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!


All times are GMT -4. The time now is 1:26 am.

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC