Thanks a lot for the help! I really appreciate it! I tried doing this and it worked for a while, but then after tweaking it a little, it stopped working again and the gap came back. I don't know where the problem lies now. I've decided to use just a white bg color for my footer instead of a white rectangle image.
So this is my css right now:
Quote:
html {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
background-color:#3C135E;
background:url(images/vhardamonogram.gif);
}
.maintext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #663300;
}
.heading1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
.heading2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color:#663300;
font-weight: bold;
}
#container {
width: 800px;
background-color: #FFF;
background: url(images/content.jpg) no-repeat top;
margin: 0 auto;
}
#header {
height: 163px;
background: url(images/header.jpg) no-repeat;
}
#navigation {
height: 20px;
background: url(images/navigation.jpg);
}
#content {
width: 600px;
padding-left: 46px;
}
#footer {
background-color:#fff;
width:800px;
}
|
HTML:
Quote:
<html>
<head>
<title>content</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
-->
</style>
<link href="vhardacontent.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div align="center"><a href="gallery.html"><img src="http://www.yourdesignforums.com/images/vardalogo.png" alt="Vharda" width="193" height="145" border="0"></a></div>
</div>
<div id="navigation">
</div>
<div id="content">
<h1 class="heading1">About Us </h1>
<p class="maintext">/*a few paragraphs of lorem ipsums*/
<p class="heading2"> </p>
</div>
<div class="maincontent" id="footer">
<div align="center" class="maintext">Copyright © <a href="mailto:your@address.here">Vharda</a>.</div>
</div>
</div><!--container end-->
</body>
</html>
|
Here's a screenshot once again...
