...

View Full Version : footer problems



NancyJ
03-16-2005, 10:33 AM
I'm having problems getting my footer to stay at the bottom of the page, I can get it to be at the bottom of the browser window but if the contents are longer than the browser window it floats over the top at the bottom of the window.
I tried putting it in at the bottom of my main container div but it just displayed at the bottom of the right bar.


<!--#include file=connections/connection.asp-->
<%
set Recordset1 = Server.CreateObject("ADODB.Recordset")
Recordset1.ActiveConnection = MM_LYPTS_STRING
Recordset1.Source = "SELECT * FROM News ORDER BY ID DESC"
Recordset1.CursorType = 0
Recordset1.CursorLocation = 2
Recordset1.LockType = 3
Recordset1.Open()
Recordset1_numRows = 0
%>
<%
Dim Repeat1__numRows
Repeat1__numRows = -1
Dim Repeat1__index
Repeat1__index = 0
Recordset1_numRows = Recordset1_numRows + Repeat1__numRows
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Leading Your People to Success</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
</head>

<body>

<div id = "container">

<div id = "main">
<% dim page
page = request.QueryString("page")
if page = "index" or page = "" or page = null then%>
<!--#include file=index.htm--><%end if%>
<%if page = "culturechange" then%>
<!--#include file=culturechange.htm--><%end if%>
<%if page = "news" then%>
<!--#include file=news.htm--><%end if%>

</div>

<div id = "Casemain"><h1>Case Studies</h1>
<img src = "images/case1.gif" alt = "case 1" width="306" height="114" class = "casestudy">
<img src = "images/case2.gif" alt = "case 2" width="306" height="114" class = "casestudy">
<img src = "images/case3.gif" alt = "case 3" width="306" height="114" class = "casestudy"></div>
<div id = "leftnav">
<ul id="nav" class = "mainnav" >
<li><a href="index.asp?page=index" >Home</a></li>
<li><a href="#">What we do</a>
<ul class = "subnav">
<li><a href="#">Team Building</a></li>
<li><a href="#">Balanced Scorecard</a></li>
<li><a href="#">Training Matrix</a></li>
<li><a href="index.asp?page=culturechange">Culture Change</a></li>
<li><a href="#">Employee & Customer Surveys</a></li>
<li><a href="#">Strategic Planning</a></li>
<li><a href="#">Mission Vision Values</a></li>
<li><a href="#">Customer Satisfaction</a></li>
<li><a href="#">Coaching</a></li>
</ul>
</li>
<li><a href="#">Our results</a> </li>
<li><a href="#">Case studies</a>
<ul class = "subnav">
<li class = "nolink">Services</li>
<li><a href="#">TWT</a></li>
<li><a href="#">MP</a></li>
<li><a href="#">Hick</a></li>
<li class = "nolink">Manufacturing</li>
<li><a href="#">Pyronix</a></li>
<li><a href="#">Smurfit</a></li>
<li><a href="#">Vickers</a></li>
</ul>
</li>
<li><a href="#">Book</a>
<ul class = "subnav">
<li><a href="#">Contents</a></li>
<li><a href="#">Endorsements</a></li>
<li><a href="#">Preface</a></li>
<li><a href="#">Introduction</a></li>
<li><a href="#">Purchase</a></li>
</ul>
</li>
<li><a href="#">About us</a>
</li>
<li><a href="index.asp?page=news">News</a>
</li>
<li><a href="#">Links</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
<p class = "navimage"><img src = "images/investers.gif" alt="Investors in People" width="70" height="50" class = "navimage">
<a href="http://www.w3.org/WAI/WCAG1A-Conformance"
title="Explanation of Level A Conformance">
<img class = "navimage" height="32" width="88"
src="http://www.w3.org/WAI/wcag1A"
alt="Level A conformance icon,
W3C-WAI Web Content Accessibility Guidelines 1.0"></a>
<img src = "images/customerfirst.gif" alt="Customer First" width="88" height="32" class = "navimage"></p>
</div>
</div>

<div id = "topbanner"><div class = "bannerlinks">Tel: +44 (0) 1433 631550 | <img src = "images/envelope.gif" alt = "envelope"> Email us</div>
<div class = "bannerlinks2">Terms of access | Privacy policy | Site map</div>

</div>

<div id = "footer"><div class = "copyright">copyright <%response.write year(now())%></div>
<div class = "inphi"><a href = "http://www.inphi.net" target = "_blank">Site by Inphi.net</a></div>
</div>
</body>
</html>



body {
background-image: url(../images/bannerbg.gif);
background-repeat: repeat-x;
}

#topbanner{
background-image: url(../images/banner.gif);
background-repeat: no-repeat;
width:100%;
height:206px;
border: 0px;
position:absolute;
top:0px;
left:0px;
text-align:right;
}
.bannerlinks{
position:relative;
top:106px;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
color: #FFF;
text-decoration:none;
font-size:0.7em;
right:5px;}

.bannerlinks2{
position:relative;
top:125px;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
color: #007FB9;
text-decoration:none;
font-size:0.7em;
right:5px;
}

#leftnav{

width: 160px;
position:absolute;
top:0px;
left:0px;
}

.navimage{
text-align:center;}

img.navimage{
margin-top:4px;
margin-bottom:2px;
margin-left:30px;
border:0px;

}


.plain ul .plain li{

list-style:disc;
float:none;
}

ul.mainnav{
margin-top:40px;
font-size:9pt;
list-style-type:none;
}
ul.subnav {
list-style: none;
width: 110px; /* Width of Menu Items */
position:absolute;
top:208px;
font-size: 9pt;
font-weight:bold;


}

ul.subnav li, ul.mainnav li {
position: relative;

}

ul.subnav {
position: absolute;
left: 70px; /* Set 1px less than menu width */
top: 0;
display: none;

}

ul.subnav li{
position:relative;
z-index: 99;
background-image: none;
background-color:#6FB9E6;
color:#FFF;
width:150px;
height:23px;
font-family:arial, verdana, helvetica, sans-serif;
border-style:solid;
border-width:1px;
border-color: #FFF;


}

/* Styles for Menu Items */
ul.mainnav li a {
background-image: url(../images/navbg_up.gif);
width:110px;
height:23px;
display:block;
text-decoration:none;
color:#FFF;
font-family:arial, verdana, helvetica, sans-serif;
font-weight:bold;
text-align:left;
vertical-align:middle;
line-height:23px;
border-style:solid;
border-width:0px;
border-bottom-width:1px;
border-color:#DEF1F9;
padding:0px;
padding-left:8px;

}

ul.subnav li a {

background-image: none;
background-color: #E3F1FA;
width:150px;
height:23px;
display:block;
text-decoration:none;
color:#6ABDE7;
font-family:arial, verdana, helvetica, sans-serif;
font-weight:bold;
text-align:left;
vertical-align:middle;
line-height:23px;



}
.nolink {
z-index: 10;
height:23px;
border-style:solid;
border-width:0px;
border-bottom-width:1px;
border-color:#FFF;
padding: 2px;
padding-left:8px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul.subnav li a:hover, ul.mainnav li a:hover {
background-image: url(../images/navbg_over.gif);
color:#40A4CE; } /* Hover Styles */

ul.subnav li a:hover {
background-image: none;
background-color:#6EB9E5;
color:#FFF;
}

li:hover ul.subnav, li.over ul.subnav { display: block;

padding-bottom:0px;
} /* The magic */

#container {
background-image: url(../images/leftnavbg.gif);
background-repeat: repeat-y;
position:absolute;
top: 170px;
left: 0px;
}

#main {
position:relative;
z-index:0;
width:500px;
font-family:arial, verdana, helvetica, sans-serif;
font-size: 0.7em;
color: #4c96c2;
float:left;
padding:0px;
padding-left: 20px;
padding-right:30px;
margin-left:150px !important;
margin-left: 80px;

}
#caseMain {
position:relative;
z-index:1;
font-family:arial, verdana, helvetica, sans-serif;
font-size: 0.7em;
color: #4c96c2;
width:300px;
float:right;
right:16px;
height:110%;
}

h1{
font-size: 1.2em;
font-weight:bold;
border-style:solid;
border-width:0px;
border-bottom-width:1px;
border-color:#67B7Db;
padding-left:5px;
padding-bottom:2px;

}

h2{
font-size: 1em;
font-weight:bold;
border-style:solid;
border-width:0px;
border-top-width:1px;
border-color:#67B7Db;
padding-left:5px;
padding-bottom:2px;
padding-right: 8px;
background-color: #E8F4F9;
background-image: url(../images/uparrow.gif);
background-position: 100% 50%;
background-repeat:no-repeat;
width: 100%;
}

img.casestudy{
margin-right:10px;
margin-top:5px;
margin-bottom:5px;}

#footer{
position:absolute;
left:170px;
top:100%;
margin:auto;
text-align:left;
font-family: Arial, Verdana, Helvetica, Sans-Serif;
color: #399CC9;
font-size: 0.6em;
z-index:1;}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

.nosub a{
background-image:none;
background-color: #74bde8;
}
.nosub a:hover{
background-image:none;
background-color: #DEF1F9;
border-bottom-width: 1px solid;
border-color: #74bde8;
}

.copyright {
position:relative;
z-index: 1;
float:left;
text-align:left;
}
.inphi {
position:relative;
z-index: 1;
float:right;
text-align:right;
margin-right:5px;
}

.inphi a{
font-family: Arial, Verdana, Helvetica, Sans-Serif;
color: #399CC9;
text-decoration:none;
}
.inphi a:hover{
color: #066996;
}

.quarter{
z-index:auto;
width:225px;
position:relative;
display:block;
float:left;
padding: 10px;


}

p{padding:5px;
padding-top:0px;
padding-bottom:0px;}

em{font-weight:bold;
font-style:normal;}

trancedm
03-16-2005, 11:47 AM
try using float property instead of position and then use clear: both at the footer div

martijntje
03-16-2005, 11:51 AM
This will fix it at the bottom of the page.

[code]#footer
{
position: fixed;
bottom: 0px;
}

_Aerospace_Eng_
03-16-2005, 11:57 AM
no it doesn't, it does nothing actually, the footer will remain at the bottom of the content not the page, u use position:absolute;bottom:0px; but then you get the overlapping as already stated, the best way would be to make the site 100%; in height and use clear:both;

NancyJ
03-16-2005, 12:46 PM
clear:both worked like a charm! thanks :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum