SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pushing down that footer

    There's a few (understatement - I know) CSS experts here, so I wonder if any of them can tell me how I could position the footer at http://www.writers-summit.com/ at the bottom of the window (or below if the content is larger).

    If it involves rewriting my entire layout, then I'll pass
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know of two ways of doing this. The first is discussed in Kevin Yank's article at

    http://www.sitepoint.com/article/exp...its-css-layout

    which uses javascript (don't worry - you just download the script from Cross-Browser.com) to equalise all the column heights so the footer is always below the content of the page.

    The second is to simulate equal column heights using floats. For this method, you float any side columns to left or right and then wrap them and the central column in another div. Then below this you include a 'clear' div which means that any content you include after that will automatically appear below the other columns.

    e.g for a layout similar to yours with a left and centre column, the html and styles would appear as


    #left {
    float: left;
    width: 200px;
    }

    #center {
    margin-left: 200px
    }

    #clear {
    clear: both;
    }



    <div id="wrapper">
    <div id="left">
    <!-- left content -->
    </div>
    <div id="center">
    <!-- center content -->
    </div>
    </div>
    <div id="clear"></div>
    <div id="footer">
    <!-- footer content -->
    </div>


    The only problem with the latter method is that the side columns must come before the central column in the html. This would have a negative impact on your search engine rank and also confuse the hell out of anyone
    using aural browsers.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this out:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>The Writers' Summit</title>
    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
    <style type="text/css">
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    BODY {
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      background: #FFFFFF;
      color: #000000;
      margin: 0;
      padding: 0;
    }
    FORM, FIELDSET {
      display: inline;
    }
    FIELDSET {
      margin: 0;
      padding: 1px 3px 0;
      border: 0;
    }
      FIELDSET LEGEND {
    	font-size: 7pt;
    	font-weight: bold;
      }
    INPUT, SELECT {
      font: 10pt 'Trebuchet MS', Verdana, sans-serif;
    }
    IMG {
      border: 0;
    }
    #header {
      height: 75px;
      margin-bottom: 5px;
      background: #DDDDDD url(http://www.writers-summit.com/images/header2.png) no-repeat;
    }
      #header H1 {
    	margin: 0;
    	padding: 25px 0 0 75px;
    	font-size: 15pt;
      }
      #header #slogan {
    	position: relative;
    	top: -10px;
    	left: 171px;
    	font-size: 10pt;
      }
    #page {
      background: url(http://www.writers-summit.com/images...ader_right.png) no-repeat 305px 0;
    }  
      A:link, A:visited {
    	font-weight: bold;
    	color: #31A229 /*6BA229*/;
    	text-decoration: none;
      }
      A:hover, A:active {
    	text-decoration: underline;
      }
      H2 {
    	font-size: 13pt;
      }
      H2.alt1 {
    	background: #31A229 /*6BA229*/;
    	color: #FFFFFF;
      }
      H2.alt2 {
    	background: #5B4DD6 /*D64D84*/;
    	color: #FFFFFF;
      }
      H2.alt3 {
    	background: #7FD373 /*ADD373*/;
    	color: #FFFFFF;
      }
      H2.alt4 {
    	background: #948EE7 /*E78EB5*/;
    	color: #FFFFFF;
      }
      P, H3 {
    	font-size: 10pt;
      }
      .block {
    	margin-bottom: 5px;
      }
      HR {
    	margin-left: 5px;
    	margin-right: 10px;
    	border: 0;
    	background: #DDDDDD;
    	color: #DDDDDD;
    	height: 1px;
      }
      #navigation {
    	float: left;
    	width: 300px;
    	margin: 0 5px 0 0;
      }
    	#navigation #subheader_left {
    	  background: url(http://www.writers-summit.com/images...ader_left1.png) no-repeat;
    	  height: 100px;
    	  margin: 0 0 5px;
    	}
    	#navigation .block.alt {
    	  background: #FFFFFF url(http://www.writers-summit.com/images/block_alt.png) repeat-y;
    	}
    	#navigation UL {
    	  padding: 0 0 0 20px;
    	  margin: 0 5px 0 0;
    	  color: #31A229;
    	  list-style: square /*url(http://www.writers-summit.com/images/bullet.png)*/;
    	}
    	#navigation LI A {
    	  background: inherit;
    	  color: #5B4DD6 /*D64D84*/;
    	}
    	#navigation IMG.avatar {
    	  float: left;
    	  width: 75px;
    	  height: 100px;
    	  margin: 0 5px;
    	}
    	#navigation DIV.item {
    	  width: 250px;
    	  margin: 0 0 5px 50px;
    	  padding: 0;
    	}
    	#navigation H2 {
    	  width: 244px;
    	  margin: 0 0 5px 50px;
    	  padding: 0 3px;
    	}
    	#navigation P, #navigation H3 {
    	  margin: 0;
    	  padding: 0;
    	}
      #content {
    	float: left;
    	margin-top: 10px;
    	width: 60%;
    	background: #FFFFFF;
    	color: inherit;
      }
    	#searchbox {
    	  height: 45px;
    	  margin: 0 5px 5px 0;
    	  background: #7FD373 /*ADD373*/;
    	  color: #FFFFFF;
    	}
    	#quicklinks {
    	  height: 40px;
    	  margin: 0 5px 5px 0;
    	  background: #DDDDDD;
    	  color: inherit;
    	}
    	  #quicklinks UL, #quicklinks LI {
    		height: 17px;
    		padding: 0;
    	  }
    	  #quicklinks UL {
    		margin: 0;
    		list-style: none;
    	  }
    		#quicklinks LI {
    		  display: inline;
    		  margin: 0 10px 0 5px;
    		  font-size: 10pt;
    		}
    		  #quicklinks #submissions A, #quicklinks #community A {
    			font-size: 8pt;
    		  }
    	#content H2, #content P, #content H3 {
    	  margin: 0 5px 5px 0;
    	  padding: 0 3px;
    	}
    	#content IMG.avatar {
    	  float: left;
    	  width: 75px;
    	  height: 100px;
    	  margin: 0 5px;
    	}
      .fillherup {
    	clear: both;
    	height: 1px;
    	line-height: 1px;
    	font-size: 1px;
      }
    #footer {
      position: relative;
      margin-top: 5px;
      clear:both; 
    }
      #footer .line {
    	background: #999999;
    	color: inherit;
    	height: 5px;
    	font-size: 1px;
    	line-height: 1px;
    	margin-bottom: 5px;
      }
      #footer .misc_links {
    	position: relative;
    	background: #DDDDDD url(http://www.writers-summit.com/images/header2.png) no-repeat;
    	color: inherit;
    	height: 25px;
      }
    	#footer .misc_links DIV {
    	  position: absolute;
    	  top: 1px;
    	  width: 75px;
    	  background: transparent;
    	  color: #FFFFFF;
    	  font-size: 7pt;
    	  line-height: 8pt;
    	}
      #footer A {
    	background: transparent;
    	color: #FFFFFF;
      }
    #wrapper {
     height:100%;
     min-height:100%;
     margin-bottom:-40px
    }
    html>body #wrapper {height:auto}
    #clearfooter {height:40px}
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles */
    #minHeight{float:left;width:0px;height:100%;margin-bottom:-40px;} /*safari wrapper*/
    
    </style>
    </head>
    <body>
    <div id="minHeight"></div> 
    <div id="wrapper">
    <div id="header"> 
      <h1>The Writers' Summit</h1>
      <span id="slogan">a creative outlet</span> </div>
    <div id="page"> 
      <div id="navigation"> 
    	<div id="subheader_left"> </div>
    	<div class="block"> 
    	  <form action="/backend/login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password)">
    		<h2 class="alt4">please login</h2>
    		<div class="item" style="background: #EEEEEE; color: inherit;"> 
    		  <p style="margin: 0 3px;">You have to <a href="/backend/register.php?amp;">register</a> 
    			before you can use all features of this site.</p>
    		  <script type="text/javascript" src="http://www.writers-summit.com/backend/clientscript/vbulletin_md5.js"></script>
    		  <input type="hidden" name="vb_login_md5password" value="" />
    		  <input type="hidden" name="s" value="49940285b868538689d9ea3c68154465" />
    		  <input type="hidden" name="do" value="login" />
    		  <input type="hidden" name="forceredirect" value="1" />
    		  <input type="hidden" name="cookieuser" value="1" />
    		  <fieldset>
    		  <legend>username</legend>
    		  <input type="text" name="vb_login_username" size="12" />
    		  </fieldset>
    		  <fieldset>
    		  <legend>password</legend>
    		  <input type="password" name="vb_login_password" size="12" />
    		  </fieldset>
    		  <input src="http://www.writers-summit.com/images/login.png" type="image" alt="login" />
    		</div>
    	  </form>
    	</div>
    	<div class="block alt"> 
    	  <h2 class="alt1">site news</h2>
    	  <div class="item notaltyoustupidIE"> 
    		<ul>
    		  <li>
    			<h3><a href="#">Proin sit amet quam ac urna molestie lobortis. Cras 
    			  sit.</a></h3>
    		  </li>
    		  <li>
    			<h3><a href="#">Vestibulum in lacus. Maecenas vel augue. Ut vitae 
    			  orci in.</a></h3>
    		  </li>
    		  <li>
    			<h3><a href="#">Maecenas aliquet, enim sed mattis rhoncus, arcu purus 
    			  pellentesque pede.</a></h3>
    		  </li>
    		</ul>
    	  </div>
    	</div>
    	<div class="block"> 
    	  <h2 class="alt3">featured author</h2>
    	  <div class="item"> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
    		<h3><a href="#">Nunc pede</a></h3>
    		<p style="margin: 5px 5px 0 85px;">Nunc pede in hac habitasse latea dictumst. 
    		  Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
    		  per inceptos hymenaeos. Curabitur consequat pretium wisi. Nam lacinia 
    		  pulvinar.</p>
    		<div class="fillherup">&nbsp;</div>
    	  </div>
    	</div>
      </div>
      <div id="content"> 
    	<form method="post" action="#">
    	  <div id="searchbox"> 
    		<fieldset>
    		<legend>enter keywords</legend>
    		<input type="text" />
    		</fieldset>
    		<fieldset>
    		<legend>search by</legend>
    		<select>
    		  <option>author</option>
    		  <option>title</option>
    		  <option>topic</option>
    		</select>
    		</fieldset>
    		<fieldset>
    		<legend>in category</legend>
    		<select>
    		  <option>science fiction</option>
    		  <option>fantasy</option>
    		  <option>etcetera.</option>
    		</select>
    		</fieldset>
    		<input type="image" src="http://www.writers-summit.com/images/search.png" alt="perform search" title="perform search" />
    	  </div>
    	</form>
    	<div id="quicklinks"> 
    	  <script type="text/javascript">
    		<!--
    		function switchSublinks(number) {
    		  sublinks = new Array();
    		  sublinks[1] = 'submissions';
    		  sublinks[2] = 'community';
    		  for (i = 1; i < 3; i++) {
    			document.getElementById(sublinks[i]).style.display = ((number == i) ? '' : 'none');
    		  }
    		}
    		-->
    		</script>
    	  <ul>
    		<li><a href="#" onmouseover="switchSublinks(1);">submissions</a></li>
    		<li><a href="backend/index.php" onmouseover="switchSublinks(2);">community</a></li>
    		<li><a href="index.php" onmouseover="switchSublinks(0);">home</a></li>
    	  </ul>
    	  <ul id="submissions" style="display: none;">
    		<li><a href="submissions.php?amp;do=legal">legal 
    		  agreement &amp; disclaimer</a></li>
    		<li><a href="#">submit your story</a></li>
    		<li><a href="#">browse by category</a></li>
    	  </ul>
    	  <ul id="community" style="display: none;">
    		<li><a href="#">view today's posts</a></li>
    		<li><a href="#">private messages</a></li>
    		<li><a href="#">log out</a></li>
    	  </ul>
    	</div>
    	<div class="block"> 
    	  <h2 class="alt1">featured stories</h2>
    	  <div> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
    		<h3><a href="#">Sed mauris. Ut leo justo, accumsan id turpis duis.</a><br />
    		  By: <a href="#">Aliquam justo</a></h3>
    		<p style="margin-left: 83px; margin-right: 5px;">Aliquam dolor. Pellentesque 
    		  turpis pede, semper quis, laoreet in, pulvinar non, ipsum. Proin convallis. 
    		  Donec arcu wisi, rhoncus sed, aliquet eu, faucibus ac, pede. Cum sociis 
    		  natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
    		  mus. Aliquam et metus luctus dui porttitor euismod. Nam dui. Cras eget 
    		  nibh quis quam.</p>
    		<div class="fillherup">&nbsp;</div>
    	  </div>
    	  <hr />
    	  <div> <img src="http://www.writers-summit.com/images/tmp.png" class="avatar" alt="" title="" /> 
    		<h3><a href="#">In sodales turpis ut tortor. Fusce eget sem metus.</a><br />
    		  By: <a href="#">Mauris vitae</a></h3>
    		<p style="margin-left: 83px; margin-right: 5px;">Morbi rutrum. Integer 
    		  cursus mauris id dolor. Sed a risus nec erat feugiat dapibus. Vivamus 
    		  mollis. Phasellus tempus ligula eleifend nunc. Ut volutpat pharetra 
    		  ante. Etiam ut lectus in arcu dapibus varius. Nulla leo est, hendrerit 
    		  a, ullamcorper vitae, rhoncus eu, justo. Phasellus lorem turpis, gravida 
    		  sit amet, aliquam quis.</p>
    		<div class="fillherup">&nbsp;</div>
    	  </div>
    	</div>
    	<div class="block"> 
    	  <h2 class="alt2">new submissions</h2>
    	  <p>Lorem ipsum<br />
    		Lorem ipsum<br />
    		Lorem ipsum</p>
    	</div>
      </div>
      <div class="fillherup">&nbsp;</div>
    <div id="clearfooter"></div>
    </div>
    </div><!-- end wrapper -->
    <div id="footer"> 
      <div class="line">&nbsp;</div>
      <div class="misc_links"> 
    	<div style="margin-left: 340px;"><a href="http://validator.w3.org/check/referer">XHTML</a> 
    	  &amp; <a
    href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> valid</div>
    	<div style="margin-left: 420px;">Copyright 2004 Danny Bessems</div>
      </div>
    </div>
    </body>
    </html>
    Should work in most major browsers (not ie mac).

    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,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Doctornick,
    The only problem with the latter method is that the side columns must come before the central column in the html.
    There is a way to float the central column first and is used in my layout here:

    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

    Basically any column in a three column layout can come first in the html with this technique.

    The secret is to wrap the centre content column and the left column in a wrapper float which is floated left. The wrapper float leaves enogh room for another column to float to the right outside of the wrapper.

    Therefore you can float the centre column right in the wrapper float first and the left content floated second. The third column can be floated outside the wrapper which is itself floated so all columns line up at the top of the screen.

    It sounds more complicated than it is but if you look at the link above you can see that is works quite well.

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, could you do me a small favor and make the chances you made bold? That way I can more easily see them
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok! There were'nt very may changes I basically used a wrapper to set the 100% and a negative bottom margin to allow the footer to fall into place. The space allowed in the negative bottom margin of the wrapper should be the height of the footer, so try to keep the foooter to the same height.

    If you change the height of the footer the change the negative margin accordingly. There is alo an empty div called clearfooter which gose at the end of the content to stop the content disappearing behind the footer. Again this clearfooter is the same size as the footer and needs to be adjusted if you change the sie of the footer. It's quite a simple technique and works in 90% of browsers (but not ie mac and a couple of other minor browsers) but should not have any adverse effects either way.

    I think the parts in bold are the only changes I made
    Code:
    /* commented backslash hack \*/ html, body{height:100%;} /* end hack */ 
    #footer { position: relative; margin-top: 5px; clear:both; }
     
    #wrapper { height:100%; min-height:100%; margin-bottom:-40px}
    html>body #wrapper {height:auto}#clearfooter {height:40px}
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles 
    */
    #minHeight{float:left;width:0px;height:100%;margin-bottom:-40px;} /*safari wrapper*/
     
    <body>
    <div id="minHeight"></div> 
    <div id="wrapper">
    <div id="header">  
    etc....
    ......
    ......
     
    <div class="fillherup">&nbsp;</div>
    <div id="clearfooter"></div>
    </div>
    </div><!-- end wrapper --><div id="footer"> 
     
    <div class="line">&nbsp;</div> <div class="misc_links"> 	
    <div style="margin-left: 340px;"><a href="http://validator.w3.org/check/referer">XHTML</a> 	 &amp; <ahref="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> valid</div>	
    <div style="margin-left: 420px;">Copyright 2004 Danny Bessems</div> </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SitePoint really needs to upgrade to vB3.0.1

    Also, I really only need to support the latest IE and Mozilla versions, so can I remove some of them CSS hacks (the rest of my CSS is hack-free too ) ?
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,535
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've re-edited the post so I hope it makes more sense.

    There aren't really any hacks just browser differences, it's all valid code

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    the Netherlands
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot, I'll be applying it soon!
    Danny Bessems - Online-Roleplaying.commodities

    So You've Won The Argument; That Doesn't Mean You're Right!

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2004
    Location
    Lancs, England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul

    Makes perfect sense. Like so many other things it sounds so simple after someone explains it.

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    Tulsa, OK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just have to say.

    WOW PAUL. That is a beautiful example. very cool. Thanks


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
  •