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>"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"<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;
}
