SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning Footers

    Hey Guys...

    One of the biggest shortcomings of CSS that I come accross is aligning footers! - It would have to be one of the more infuriating things to actually do.

    (example of what I'm talking about shown below!)

    It's pretty easy to get the footer to align: to the bottom of the browser window, and easy enough to get the footer to go under the content if it is longer than the browser window... but not easy to get it to do both

    It's kind of the eqiv. to using <td height="100%">... if anyone has a solution I'd love to hear it.
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm much more of an HTML'er than a PHP'er. Do you have the code? I'd be happy to check it out.

    audio

  3. #3
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by audiomega
    I'm much more of an HTML'er than a PHP'er. Do you have the code? I'd be happy to check it out.

    audio
    I think I may be lost here

    Well, this is untested but a possibility maybe...?
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type='text/css'>
    #header {
    	display: block;
    	position: absolute;
    	top: 0px;
    	width: 779px;
    	height: 80px;
    	
    	margin: 0 auto;
    }
    
    #body {
    	display: block;
    	width: 779px;
    	height: 100%;
    	max-height: 100%;
    	overflow: auto;
    	
    	margin: 0 auto;
    	padding-top: 80px;
    	padding-bottom: 20px;
    }
    
    #footer {
    	display: block;
    	position: aboslute;
    	bottom: 0px;
    	width: 779px;
    	height: 20px;
    	
    	margin: 0 auto;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    
    <body>
    
    	<div id="header">
    		blah blah
    	</div>
    	
    	<div id="body">
    		<!-- body stuff here -->
    	</div>
    	
    	<div id="footer">
    		<!-- that nasty ol' footer goes right here -->
    	</div>
    
    </body>
    </html>
    Edit:


    It seems that vB likes to remove the exclamation mark from my HTML but you get the idea

  4. #4
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Well I just checked out what that looked like and it's terrible but maybe you'll get what I mean

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...I don't know. I don't think I understand what you want...why not just put an alignment attribute in the footer's div tag:

    Code:
    <div id="footer" align="center">
    blah blah blah
    </div>
    It will only apply to that instance of the CSS (until the close tag)...would that meet the need?
    Last edited by audiomega; Oct 26, 2003 at 05:09.

  6. #6
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok - two examples...

    http://www.platinum-central.com/temp/footer.htm
    http://www.platinum-central.com/temp/footer2.htm

    See how the footer "stops" at the bottom of the browser window when the content exceeds the height of the browser window in the 2nd example?

    I would like the footer to act as it does in the first example... yet also go UNDER the content when it goes beyond the browser window.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you ever seen this in practice? Each seems to contradict the other...ie. if the footer stops at the bottom of the viewable window...and at the same time stays below the content, wouldn't it have to make the window the exact height of the page's content...? This would kick the top of the page off screen. Hmm...you got me...

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This works in IE and Opera:
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
           /*IE-only height rules*/
    	* * html, body {
    		margin: 0;
    		padding: 0;
    		height: 100%;
    		font: 70% verdana, arial, helvetica, sans-serif;
    	}
            /*height rule for CSS2 browsers*/
    	html > body {
    		min-height: 100%;
    	}
    	#container {
    		position: relative;
    		height: 100%;
    		margin: 0 60px;
    		border: 10px solid blue;
    	}
    	#inner {
    		padding-bottom: 80px;
    	}
    	#footer {
    		position: absolute;
    		bottom: 0;
    		left: 0;
    		height: 70px;
    		border: 1px solid red;
    		width: 100%;
    	}
    </style>
    </head>
    
    <body>
    <div id="container">
    <div id="inner">
    	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.</p>
    <div id="footer">
    	<p>Footer links.</p>
    </div>
    </div>
    </div>
    </body>
    </html>
    I suggest using the IE-only code for IE/Windows and using fixed positioning for all of the other browsers. That way, you can keep the footer on the bottom at all times in those browsers, and IE will be the only one that needs the 100% height.

  9. #9
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    This works in IE and Opera:
    But not in mozilla/netscape? Thanks for that, but still - I was hopeing there would be a solution that was cross-browser

    Oh well... as someone was saying the other day, CSS was obviously created by non-designers.

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by platinum
    But not in mozilla/netscape? Thanks for that, but still - I was hopeing there would be a solution that was cross-browser
    Use the code I gave you for IE/Win, and use fixed positioning for all the other browsers (Opera, Mozilla, Safari, IE/Mac) that understand it.


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
  •