Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: footer problems

  1. #1
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts

    footer problems

    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.

    Code:
    <!--#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>
    Code:
    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;}

  • #2
    Regular Coder
    Join Date
    Mar 2005
    Posts
    123
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try using float property instead of position and then use clear: both at the footer div

  • #3
    New Coder
    Join Date
    Mar 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This will fix it at the bottom of the page.

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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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;

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    clear:both worked like a charm! thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •