Hi,
I am learning how to make an online address book. I had a background image but when i view it online, there is some extra space on the right as you can see in the attached screenshot. I am giving my code below.
<!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">
<head>
<title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
h1,h2,h3,ul,p {margin:0 0 .5em 0;padding:5px;}
html,body {
height:100%;
text-align:center;
}
#outer{
min-height:100%;
width:760px;
background:#000 url(header-copy.jpg) repeat-y;
border-left:1px solid #000;
border-right:1px solid #000;
color: #000;
text-align:center;
margin:-22px auto 0;
}
* html #outer{height:100%;} /*for IE as it treats height as min-height anyway*/
#header{
width:760px;
background:#304a00 url(header-copy.jpg) repeat-y;
border-bottom:1px solid #000;
border-top:22px solid #000;
color: #000;
text-align:center;
}
#header ul{ list-style:none;}
#header ul li{display:inline;}
#header a{color:#fff}
#header2{
width:760px;
background:#304a00 url(header-copy.jpg) repeat-y;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
}
#centrecontent { width:760px;}
#right {
float:right;
width:379px;
}
#left {
width:379px;
float:left;
}
#footer {
width:760px;
clear:both;
margin:auto;
height:20px;
border:1px solid #000;
background: #4c7300;
color: #fff;
text-align:center;
}
* html #footer {/*only ie gets this style*/
height:22px;/* for ie5 */
he\\ight:20px;/* for ie6 */
}
.clearer{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
</style>
</head>
<body>
<div id="outer">
<div id="header">
<h1><align="center">Address book online</c>
</h1>
<h2><align="center">Your contacts on line 24 hours a day anywhere in the world</h2>
</div>
<div id="header2">
<h2>Important Tip</h2>
<p>Always have a backup of your online/cellphone addresses in a cd or a flashdrive</p>
</div>
<div id="centrecontent">
<html>
<head>
<title>Address Book</title> </head>
<body>
<?php
//*MY PHP CODE HERE.
?>
</body> </html>
</div>
<div class="clearer"></div>
</div>
<div id="footer">Created by jppp. All rights reserved.</div>
</body>
</html>
</body> </html>
</div>
<div class="clearer"></div>
</div>
<div id="footer">Created by Priya Varier. All rights reserved.</div>
</body>
</html>
The image I have used is header-copy.jpg, which I am attaching. Am I allowed to give the link to my page which is online? I thought it was not allowed in the sitepoint forums.
Your image is only 750px wide, while the wrapper, etc. is 760px wide. Set the #outer {width: 750px;}, and delete the width property from everything else except the footer. Put the footer inside wrapper and you can delete its width, too.
I changed the widths everywhere to 750 px and now I am not getting that extra margin.
But I have a couple of doubts.
On table, set {margin: 0 auto;}.
I am sorry but with my newbie knowledge, I did not really understand where exactly I needed to set that. But even without that, I am getting my page to look right. Is it necessary to do that and if so, where exactly do I do it?
But even without that, I am getting my page to look right. Is it necessary to do that and if so, where exactly do I do it?
margin:0 auto will center a fixed width element in the available space. If your tables are 750px wide then they won’t need to be centred because they will already be centred by the page wrapper.
My bad. I removed the table’s width, along with anything else’s within the wrapper. If the font size is then reduced, e.g. ctl -, the table shrink wraps and the auto margin keeps it centered.
