SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: footer problem

  1. #1
    web designer
    Join Date
    Jun 2004
    Location
    Liverpool, uk
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footer problem

    url: http://www.36-degrees.co.uk/me/34th/
    css: http://www.36-degrees.co.uk/me/34th/style.css

    Im trying to get the footer to sit at the foot of the document, ive tried absolute positioning, but when the page is forced to scroll, the footer dosent adjust to the new bottom of the page.

    Ive read the article on ALA concerning footers, and tried to implement the javascript they have there to calculate the height of the browser window, but that failed too.

    Any clue on the easiest and mostconsistent way of doing this?

  2. #2
    SitePoint Enthusiast m0n5t3r's Avatar
    Join Date
    Jul 2003
    Location
    Romania
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You lack a
    Code:
    html,body{
     	height: 100%;
     }
    m0n5t3r's nest
    --
    earth is 98% full ... please delete anyone you can.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Any clue on the easiest and mostconsistent way of doing this?
    You've come to the right place

    There is a FAQ sticky thread that deals exactly with this problem. It explains how to achieve 100% height and keep a footer at the bortoom and works very well (even if is say so myself).

    The ALA article misses the point a bit as I have been using this for over a year now with no problems. If you have a look at the 3 column demo (sticky thread)you will see sxamples of loads of them with footers all in place.

    If you still can't work it out then post again and I'll do it for you

    Paul

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Did it anyway
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
    color: #777;
    background: #fff url(bg.gif) repeat-y center top;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
    font-family: verdana;
    font-size: smaller;
    }
    #outer{
     background: transparent;
     color: #000;
     margin-left: auto;
     margin-right: auto;
     width: 768px;
     padding: 0;
     border: 0;
     min-height:100%;/*for gecko etc */
     position:relative;/*stacking context*/
    }
    * html #outer {height:100%}/* for ie*/
    }
    a { 
    text-decoration: none; 
    color: #444; 
    }
    a:hover { 
    text-decoration: none;
    color: #5496D0; 
    }
    #nav {
     float: right; 
     width: 760px;
     margin: 0;
     padding: 4px;
     background-color: #315B9B;
     line-height: 2px;
     border-bottom: 4px solid #ccc;
     }
    #nav li {
     float: right;
     margin-left: 10px;
     padding: 0;
     list-style: none;
     border: 1px solid #949494;
     }
    #nav .link {
     margin-left: 0px;
     list-style: none;
     text-decoration: none;
     }
    #nav a {
     float: left;
     padding: 10px 10px 10px 10px;
     text-decoration: none;
     border: 0px;
     font-family: helvectica;
     font-size: 10px;
     font-weight: bold;
     color: #FFF;
     }
    #nav a:hover {
     color: #315B9B;
     background-color: #fff;
     text-decoration: none;
     border-bottom: 0px;
     }
    #nav a.active  {
     color: #95ed89;
     text-decoration: none;
     background-color: #fff;
     }
    #left {
    float: left;
    width: 250px;
    background-color: #fff;
    padding: 2px;
    }
    #right {
    float:right;
    width: 496px;
    background: #FFF;
    margin: 5px 5px 5px 5px;
    padding:2px;
    text-align: left;
    }
    .title {
    font-family: Arial;
    font-weight:bold;
    font-size: larger;
    text-transform:uppercase;
    color: #000066;
    }
    P {
    background-color: #FFF;
    border: 1px solid #ccc;
    padding: 5px;
    }
    P:hover {
    background-color: #fff;
    border: 1px solid #315B9B;
    padding: 5px;
    color: #315B9B;
    }
    #footer {
    clear: both;
    width: 760px;
    margin: 0;
    padding: 4px 4px 0px 4px;
    background: #315B9B url(bgfoot.gif) ;
    border-top: 4px solid #ccc;
    text-align: right;
    color: #fff;
    font-size: x-small;
    line-height: 44px;
    height: 54px;
    position:absolute;
    bottom:0;left:0;	
    }
    #clearfooter {height:62px;clear:both}/* to stop content overwriting footer*/
    #footer a {
    color: #fff;
    }
    #footer a:hover {
    color: #5496D0;
    }
    .foot1 {
    padding-lefT: 10px;
    float: left;
    }
    .foot2 {
    float: right;
    padding-right: 10px;
    }
    </style>
    <title>34th Security</title>
    </head>
    <body>
    <div id="outer"> 
      <ul id="nav">
    	<li><a href="#">FAQ</a></li>
    	<li><a href="#">CONTACT</a></li>
    	<li><a href="#">ABOUT US</a></li>
    	<li><a href="#">SERVICES</a></li>
    	<li><a href="#">HOME</a></li>
      </ul>
      <div id="left"><img alt="34th security - logo" src="logo.png" /> <img alt="presentational element" src="man.gif" /> 
      </div>
      <div id="right"> <br />
    	<span class="title">Welcome</span> 
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis magna, 
    	  eleifend at, mattis eget, aliquam in, metus. Nam felis nisl, placerat eu, 
    	  iaculis a, faucibus eget, magna. Vivamus vel dui aliquet turpis viverra 
    	  convallis. Integer scelerisque, lectus ut dignissim posuere, eros mauris 
    	  hendrerit magna, nec accumsan diam eros ut ipsum. Nam auctor tortor sit 
    	  amet lectus. Praesent condimentum purus vel lorem. Vestibulum eget justo 
    	  quis tellus fermentum ullamcorper. Curabitur scelerisque. Ut quis lacus. 
    	  Ut ligula. Etiam suscipit pretium nisl. Curabitur ac purus ut elit fringilla 
    	  feugiat. Nulla facilisi. Ut quis nunc id dui fringilla consequat. Ut placerat 
    	  nulla quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    	  Aliquam sed ligula. Fusce in neque ac dolor malesuada tincidunt. Cras orci 
    	  sapien, blandit et, tincidunt fermentum, placerat consequat, tortor.</p>
    	<span class="title">Clients</span> 
    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec felis magna, 
    	  eleifend at, mattis eget, aliquam in, metus. Nam felis nisl, placerat eu, 
    	  iaculis a, faucibus eget, magna. Vivamus vel dui aliquet turpis viverra 
    	  convallis. Integer scelerisque, lectus ut dignissim posuere, eros mauris 
    	  hendrerit magna, nec accumsan diam eros ut ipsum. Nam auctor tortor sit 
    	  amet lectus. Praesent condimentum purus vel lorem. Vestibulum eget justo 
    	  quis tellus fermentum ullamcorper. Curabitur scelerisque. Ut quis lacus. 
    	  Ut ligula. Etiam suscipit pretium nisl. Curabitur ac purus ut elit fringilla 
    	  feugiat. Nulla facilisi. Ut quis nunc id dui fringilla consequat. Ut placerat 
    	  nulla quis elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    	  Aliquam sed ligula. Fusce in neque ac dolor malesuada tincidunt. Cras orci 
    	  sapien, blandit et, tincidunt fermentum, placerat consequat, tortor. <br />
    	</p>
      </div>
      <div id="clearfooter"></div>
      <!-- this must stay above footer -->
      <div id="footer"> <span class="foot1"><a href="http://www.36-degrees.co.uk">36 
    	degrees design</a></span> <span class="foot2"><a href="http://validator.w3.org/check?uri=referer">XHTML</a> 
    	<a href="#">CSS</a> <a href="#">508</a></span> </div>
    </div>
    </body>
    </html>
    Paul

  5. #5
    web designer
    Join Date
    Jun 2004
    Location
    Liverpool, uk
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers paul - youre a legend.


Bookmarks

Posting Permissions

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