...

View Full Version : Help! Content overlapping footer



viperxx
01-12-2008, 04:06 AM
For some odd reason my footer doesnt want to move and would rather have become overlapped by my content.

heres a demo: http://aloke.winc.biz/middle.html


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style2 {
color: #333333
}
body {
margin: 0px;
padding: 0px;
}
#header {
width: 100%;
background-image: url(images/headerbg.jpg);
background-repeat: repeat-x;
height: 119px;
}
#menu {
width: 560px;
margin-right: auto;
margin-left: auto;
}
#menu ul {
list-style: none;
line-height: normal;
padding: 0;
margin: 0;
}
#menu li {
display: inline;
}
#menu a {
display: block;
text-decoration: none;
color: #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
float: left;
padding-top: 50px;
width: 110px;
text-align: center;
margin-right: 15px;
margin-left: 15px;
height: 69px;
padding-bottom: 0px;
}

#menu a:hover {
background-image: url(images/linksbg.jpg);
background-repeat: repeat-x;
}
#mid {
background-image: url(images/midbg.jpg);
background-repeat: repeat-x;
}
#middle {
width: 830px;
padding: 0px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
}
#left {
height: 500px;
width: 25px;
background-image: url(images/midleft.jpg);
background-repeat: no-repeat;
float: left;
margin: 0px;
padding: 0px;
}
#right {
background-image: url(images/midright.jpg);
background-repeat: no-repeat;
height: 500px;
width: 25px;
float: right;
margin: 0px;
padding: 0px;
}
#middletop {
background-repeat: repeat-x;
height: 43px;
margin: 0px;
clear: none;
padding: 0px;
background-image: url(images/midtop.jpg);
}
#middlebot {
background-color: #FFFFFF;
height: 500px;
padding-top: 20px;
}
#midheaderbg {
background-color: #f2f0f1;
height: 100px;
width: 735px;
margin-right: auto;
margin-left: auto;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 60px;
font-weight: bolder;
letter-spacing: -4px;
color: #cbcbcb;
}
#midheader {
padding-top: 42px;
}
#midcontent {
padding-top: 25px;
clear: none;
}
#footer {
background-image: url(images/footer.jpg);
background-repeat: repeat-x;
height: 38px;
padding-top: 16px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
clear: both;
float: none;
visibility: inherit;
z-index: auto;
}
#footer a {
text-decoration: none;
color: #FFFFFF;
}
-->
</style>
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<div id="header">
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="about.php">About Me</a></li>
<li><a href="contact.php">Contact Me</a></li>
</ul>
</div>
</div>

<div id="mid">
<div id="middle">
<div id="left"></div>
<div id="right"></div>
<div id="middletop"></div>
<div id="middlebot">
<div id="midheaderbg">
<div id="midheader"><span class="style2">Portfolio</span> of Aloke Pillai</div>
</div>
<div id="midcontent">
<div align="center">
<div id="flashcontent">
SimpleViewer requires Macromedia Flash.
<a href="http://www.macromedia.com/go/getflashplayer/">
Get Macromedia Flash.</a> If you have Flash installed,
<a href="index.html?detectflash=false">click to view gallery</a>
</div>

<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer",
"640", "480", "7", "#FFFFFF");
fo.write("flashcontent");
</script>
</div>
</div>
</div>
</div>
</div>

<div id="footer"><table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Copyright &copy; 2007 Aloke Pillai. All Rights Reserved.</td>
<td><div align="right"><a href="index.php">Home </a>&Iota; <a href="portfolio.php">Portfolio </a>&Iota; <a href="about.php">About Me </a>&Iota; <a href="contact.php">Contact Me </a></div></td>
</tr>
</table></div>

</body>
</html>

PLEASE HELP!

Excavator
01-12-2008, 06:09 AM
Hello viperxx,
Take the height off the div your content is going in so it can expand as needed. Is this the right div?
#middlebot {
background-color: #FFFFFF;
height: 500px; /*remvove this*/
padding-top: 20px;
}

viperxx
01-12-2008, 09:17 AM
wow I can't believe I didn't catch that ;)

thanks alot! REP+



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum