...

View Full Version : footer sits a distance after the main content



_chris
06-11-2010, 09:10 AM
The footer div "footercontainer" sits a distance after the maincontainer div (white space) and I don't know why.

Below is the XHTML and CSS:

XHTML:

<!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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<link rel="stylesheet" type="text/css" title="CSS Stylesheet" href="styles/dropdown.css" />
<script type="text/javascript" src="javascript/dropdown.js"></script>
<script type="text/javascript">
var menu;
function configMenu() {
this.closeDelayTime = 300
// this.collapseBorders = false;
}
function initMenu() {

menu = new Menu('menu-root', 'menu', configMenu);
}
onload = initMenu;
</script>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div class="headercontainer">
<a name="top"></a>
<div class="expandableheader">

</div>

<div class="staticheader">
<div class="leftheadercontent">
<img src="images/stilleto.png" alt="corporate logo" class="stilleto"/>
<a href="index.htm" class="indexlink">Creative Web Concepts</a>
</div>
<div class="menucontainer">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="index.html" accesskey="h"><b>Home</b></a>
<ul>
<li><a href="index.html" accesskey="h"><b>Services</b></a>
<ul>
<li><a href="swebsite.html" target="_blank" accesskey="8">Web Site</a></li>

<li><a href="sredesignws.html" target="_blank" accesskey="9">Redesign Web Site</a></li>
<li><a href="scontman.html" target="_blank" accesskey="10">Content Management System</a></li>
<li><a href="slogo.html" target="_blank" accesskey="11">Logo</a></li>
<li><a href="secomm.html" target="_blank" accesskey="12">eCommerce</a></li>
<li><a href="sseo.html" target="_blank" accesskey="13">SEO (Search Engine)</a></li>
<li><a href="sflash.html" target="_blank" accesskey="14">Flash</a></li>

<li><a href="sprint.html" target="_blank" accesskey="15">Print</a></li>
<li><a href="sphotog.html" target="_blank" accesskey="16">Photography</a></li>
<li><a href="sbusinesc.html" target="_blank" accesskey="17">Business Cards</a></li>
<li><a href="sbroch.html" target="_blank" accesskey="18">Domain & Hosting</a></li>
<li><a href="ssecret.html" target="_blank" accesskey="19">Secretarial</a></li>

</ul>
</li>
<li><a href="testimon.html" target="_blank" accesskey="20">Testimonials</a></li>
</ul>
</li>
<li><a href="portfolio1.html" accesskey="1"><b>Portfolio</b></a>
<ul>
<li><a href="portfolio1.html" accesskey="1">Portfolio Examples</a>

<ul>
<li><a href="pwebsite.html" target="_blank" accesskey="21">Web Site</a></li>
<li><a href="predesignws.html" target="_blank" accesskey="22">Redesign Web Site</a></li>
<li><a href="pcontman.html" target="_blank" accesskey="23">Content Management System</a></li>
<li><a href="plogo.html" target="_blank" accesskey="24">Logo</a></li>
<li><a href="pecomm.html" target="_blank" accesskey="25">eCommerce</a></li>

<li><a href="pflash.html" target="_blank" accesskey="27">Flash</a></li>
<li><a href="pprint.html" target="_blank" accesskey="28">Print</a></li>
<li><a href="pphotog.html" target="_blank" accesskey="29">Photography</a></li>
<li><a href="pbusinesc.html" target="_blank" accesskey="30">Business Cards</a></li>
</ul>
</li>
</ul>

</li>
<li><a class="MenuBarItemSubmenu" href="about.html" accesskey="2"><b>About</b></a>
<ul>
<li><a href="about.html" accesskey="2">Background</a></li>
<li><a href="about.html" accesskey="2">Experience</a></li>
<li><a href="about2.html" accesskey="33">Thankyous</a></li>
<li><a href="about2.html" accesskey="33">Acknowledge</a></li>

</ul>
</li>
<li><a href="inspirations1.html" accesskey="3"><b>Inspirations</b></a>
<ul>
<li><a href="inspirations1.html" accesskey="3">References</a></li>
<li><a href="inspirations1.html" accesskey="3">Affiliations</a></li>
<li><a href="inspirations2.html" accesskey="34">Visit Places</a></li>

<li><a href="inspirations2.html" accesskey="34">Go To Events</a></li>
<li><a href="inspirations3.html" accesskey="35">Free Tools</a></li>
</ul>
</li>
<li><a href="http://creativewebconcepts.com.au/blog/" target="_blank" accesskey="4"><b>Creative Blog</b></a>
</li><li><a href="contact.html" accesskey="5"><b>Contact</b></a>

</li><li><a href="http://webdchat.wordpress.com/" target="_blank" accesskey="6">Webdchat Blog</a>
</li></ul>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div>

</div>
<div class="maincontainer">
<div class="leftmaincontent">
</div>
<div class="rightmaincontent">
</div>
</div>


<div class="footercontainer">

<div class="expandablefooter">
</div>

<div class="staticfooter">
<div class="footercontent">
<a href="#top" class="backtotoplink"><span class="backtop">Back to the top</span></a>

<a href="index.html" accesskey="h" class="bottomlink">Home |</a>
<a href="portfolio1.html" accesskey="1" class="bottomlink">Portfolio |</a>
<a href="about.html" accesskey="2" class="bottomlink">About |</a>

<a href="inspirations1.html" accesskey="3" class="bottomlink">Inspirations |</a>
<a href="http://creativewebconcepts.com.au/blog/" target="_blank" accesskey="4" class="bottomlink">Creative Websites Blog |</a>
<a href="contact.html" accesskey="5" class="bottomlink">Contact |</a>
<a href="http://webdchat.wordpress.com/" target="_blank" accesskey="6" class="bottomlink">Webdchat Blog |</a>
<a href="sitemap.html" accesskey="7" class="bottomlink">Site Map</a>
<a href="access.html" accesskey="k" class="bottomlink"></a>

<div id="contactfooter"><p>Contact Now on -</p>
<p>Mobile: or</p>
<a href="contact.html" target="_blank" accesskey="5" class="bottomlink">Click here to Email me</a></div>
</div>



</div>

</div>

</body>
</html>



CSS:

* {
margin:0;

}

body {
background:url("../images/background-gradient.png") #ffffff repeat-x;

}


.headercontainer{
height:100%;
width:100%;

}

.maincontainer{
background-color:#ffffff;
width:950px;
height:1700px;
border:outset;
border-top:none;
border-bottom:none;
margin-left:auto;
margin-right:auto;
z-index:0;
position:relative;

}

.menucontainer{
height:100%;
width:100%;
z-index:4;
position:relative;
top:90px;

}


.expandableheader{
background:url(../images/repeat_headerGrey3.png);
height:168px;
width:100%;
z-index:1;

}


.leftheadercontent{
float:left;
position:relative;
right:100px;

}

.staticheader {
background: url(../images/headerGrey3.png);
width:942px;
height:168px;
float:right;
z-index:2;
position:relative;
bottom:168px;

}

.leftmaincontent{
width:33%;
height:80%;
border:outset;
float:left;

}

.rightmaincontent{
width:65%;
height:80%;
border:outset;
float:right;

}




.footercontainer{
height:105px;
width:100%;
position:relative;

}


.expandablefooter{
z-index:1;
background:url(../images/repeat_footerGrey.png);
height:105px;
width:100%;
position:relative;
top:105px;

}

.staticfooter{
z-index:2;
background:url(../images/footerGrey.png);
width:941px;
height:105px;
float:right;
position:relative;

}

.footercontent{
position:relative;
left:70px;
}

.backtotoplink{
color:#FF3;

}

a.backtotoplink{
color:#ffffff;

}

a:visited.backtotoplink{
color:#ffffff;

}


a.bottomlink{
color:#FF3;

}

a:visited.bottomlink{
color:#FF3;

}

.indexlink{
color:#ff3;
font-weight:bold;
text-decoration:underline;
position:relative;
bottom:50px;
right:40px;

}

a.indexlink{
color:#ff3;

}

a:visited.indexlink{
color:#ff3;

}

img.stilleto{
padding:20px;
}

#contactfooter p{
color:#ffffff;
font-weight:bold;
position:relative;
top:10px;
}

#contactfooter a{
position:relative;
top:10px;
}

abduraooft
06-11-2010, 09:30 AM
Clear the floats (http://www.quirksmode.org/css/clearing.html) instead of setting heights on the divs. I'd recommend you to check http://bonrouge.com/2c-hf-fullyfluid.php or http://bonrouge.com/2c-hf-fluid.php to see how to make good 2 column layouts.

_chris
06-12-2010, 05:15 AM
Thank you very much, I have been stuck on this.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum