SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member Linus van Pelt's Avatar
    Join Date
    Sep 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile FooterStickAlt related issue

    Hello all,
    I'm playing around with Cameron Adam's FooterStickAlt technique and came across an issue I can't seem to get around.

    First, it's important to mention that I have no problems getting a footer to "stick" in my trials. That's not my problem at all. My problem is the way Cameron has presented his body background image slice in his example is different than the intentions I'll be having when I begin my site layout.

    Here's his: http://www.themaninblue.com/experime...mple_short.htm

    I've put together a quick test page to illustrate the difficulty I'm having and my intentions. I'll post the code below.

    It appears that the image background in his content area is actually coming from a repeat-y slice in his document body. In my application that wouldn't be the case. I need to have my "main" div container (which holds a floated content container and a floated column) stretch down to the top of the sticky footer regardless if content (or child containers) are forcing it to do so.... if that makes sense?

    In any event, if you have the inclination to do so, please check out the test example illustrating the problem I'm having.

    Cheers!
    Linus

  2. #2
    SitePoint Member Linus van Pelt's Avatar
    Join Date
    Sep 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here's the example markup...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    
    <style type="text/css" media="screen, projection">
    * {
        margin: 0;
        padding: 0;
    }
    html, body {	
    	background-color: #ffffff;
    	margin: 0;
    	padding: 0;
    	font-family: Georgia, "Lucida Sans Unicode", Verdana, sans-serif;	
    	font-size: 14px;
    	color: #333333;
    }
    div#wrap {
    	width: 776px;
    	margin: 0 auto;
    	padding: 0;
    	min-height: 100%;
    }
    * html #wrap {
    	height: 100%;
    }
    
    div#header {
    	height: 75px;
    	background-color: #555555;
    }
    
    div#main {
    	background-color: #cccccc;
    	padding: 20px;
    }
    div#contentLeft {
    	float: left;
    	width: 500px;
    	padding: 20px;
    	background-color: white;
    }
    div#sidebarRight {
    	float: right;
    	width: 140px;
    	padding: 20px;
    	background-color: white;
    }
    p {margin-bottom: 15px;}
    
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    }
    * html .clearfix {height: 1%;}      
    
    * html div#nonFooter {height: 100%;}
    * html div#footer {margin-top: -40px;}	/* IE hack  */
    html {height: 100%;}
    body {height: 100%;}
    div#nonFooter {position: relative; min-height: 100%;}
     
    div#footer {
    	position: relative;
    	clear: both;
    	width: 776px;
    	height: 40px;
    	margin: -40px auto 0 auto;
    	background-color: #555555;
    }
    </style>
    </head>
    <body>
    
    <div id="wrap">
    <div id="nonFooter">
    
    	<div id="header"></div> 
    	
    	<div id="main" class="clearfix">
    	
    		<div id="contentLeft">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
    			ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
    			massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
    			Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
    			ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
    			Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
    			sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
    			magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
    			nunc nec augue.</p>
    
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
    			ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
    			massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
    			Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
    			ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
    			Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
    			sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
    			magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
    			nunc nec augue.</p>
    		</div>
    		<div id="sidebarRight">
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    			erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
    		</div>
    		
    	</div>	
    		
    </div>
    </div> 
    
    <div id="footer"></div>
    
    </body> 
    </html>

  3. #3
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really see where the 'problem' is... I had no problem getting footerStickAlt to work on the last website I designed, it's just a case of making all of your html, body, and non-footer styles have height: 100&#37; (and a star hack for IE).

    If their heights are 100%, they'll hold all your floating elements no probs, and still stretch down to the bottom of the browser.

  4. #4
    SitePoint Member Linus van Pelt's Avatar
    Join Date
    Sep 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. As I stated, I have no problem with getting the footer to stick at all. I suppose it's better stated that my issue is getting <div id="main"> to stick to the top of the footer (that's using footerStickAlt).

    I've added height: 100&#37; to div#main in my css as well as the star hack, but it doesn't seem to make a difference. And again, Cameron is achieving this by setting his body with a repeat-y background image which fills that space in the content area. I need to do it with div#main.

    Here's a link to the test page with the addition of height: 100%; on #main as you suggested. http://www.freewebs.com/linusvp/ Notice that the grey main content container that's holding the 2 floated content containers is not stretching down to the footer.

    Perhaps I'm missing something obvious here?

    Thanks in advance for any further insight.

    Cheers
    Linus

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Yes only one 1 container can be 100&#37; high , the outer wrapper
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    
    	<style type="text/css" media="screen, projection">
    	* {margin: 0;padding: 0;}
    
    	html,body{height:100%;}
    
    	body{
    	background-color: #f9f9f9;
    	font-family: Georgia, "Lucida Sans Unicode", Verdana, sans-serif;	
    	font-size: 14px;
    	color: #333333;
    	}
    	#wrap,#footer{width:776px;margin: 0 auto;}
    	
    	#wrap{
    	margin-top:-40px;
    	background:#cccccc;
    	min-height: 100%;
    	}
    	* html #wrap {height: 100%;}
    
    	#header{height:85px;background:#555555;border-top:40px solid #000000;}
    
    	#contentLeft,#sidebarRight{padding:20px;background: white;float:left;margin:20px 0 20px 20px;display:inline;}
    	
    	#contentLeft{width:496px;}
    	#sidebarRight{width:140px;}
    	
    	p{margin-bottom: 15px;}
    
    	.clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	* html .clearfix{height: 1%;}
     
    	#footer{
    	background:#555555;
    	height:40px;
    	}
    </style>
    </head>
    <body>
    
    <div id="wrap" class="clearfix">
    
    <div id="header"></div> 
    
    <div id="contentLeft">
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
    massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
    Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
    ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
    Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
    sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
    magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
    nunc nec augue.</p>
    
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc. Vestibulum 
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ut velit vitae 
    massa accumsan placerat. Donec molestie quam sed nisl. Curabitur malesuada nisl vel eros. 
    Phasellus mattis pede a neque. Sed at nisl eu nulla fringilla pellentesque. Proin vel ligula at 
    ligula porttitor egestas. Quisque dapibus libero vitae diam. Etiam suscipit ante id sem. 
    Suspendisse a nisi. Sed viverra magna ac ligula nonummy vestibulum. Nullam eget mi in nisl 
    sodales vestibulum. Nullam venenatis nisi sed est. Donec dapibus lectus bibendum est. Integer 
    magna diam, pellentesque sit amet, vestibulum ultrices, aliquam eu, neque. Cras ullamcorper 
    nunc nec augue.</p>
    </div>
    
    <div id="sidebarRight">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi magna. Nulla sollicitudin, 
    erat id hendrerit pretium, lectus nulla varius tortor, quis lobortis orci quam ut nunc.</p>
    </div>
    
    </div> 
    
    <div id="footer"></div>
    
    </body> 
    </html>

  6. #6
    SitePoint Member Linus van Pelt's Avatar
    Join Date
    Sep 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh... ok, that makes sense. Thank you kindly for your reply. I did indeed have it working in the test example by setting the bg color on the wrapper, but it wasn't suitable. Let me be a bit more specific as to my need of having that main container stretch to the footer. I apologize that my test example didn't illustrate this. I was just trying to get info on getting more than one element to work at 100&#37; height (ie: #wrap/#nonFooter & #main).

    In the actual graphical design mockup, there is the header followed by a transparent space that contains a horizontal nav & search (where you just see the grey body in the background).

    Then begins a parent container (#main) that that is white (holding the two floated content containers). This main parent container has rounded corners at the top and stretches straight down hitting a footer.

    So my intention was to leave the #wrap transparent and set bg images for the #main container to achieve this. Apparently, this isn't possible.

    Any ideas as to a workaround? Again, I thank you for insight.
    Linus

  7. #7
    SitePoint Member Linus van Pelt's Avatar
    Join Date
    Sep 2007
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just doing some toying around here. All4nerds, it's interesting how you modified Cameron's technique - there's no nonfooter? What's the deal with the header's border top?

    Anyhow, I've come up with a workaround, but I'm not sure how sound it is. Semantically it's illogical and from an accessibility standpoint, probably no good.

    Anyhow, it would be to nest an absolutely positioned div (or multiple divs to achieve the rounded corner effect) inside the wrapper which would act as the background of the content area below the nav. Obviously, I've set the 'top' position to show up just below the nav. And set left, right, and bottom to 0. I've done this in another test example and it seems to work; however, IE 6 doesn't seem to like the idea too much.

    http://www.freewebs.com/linusvp/stickyfootertest3.htm

    Anyway to get IE to work with this method? Or perhaps a workaround I'm missing?

    Cheers!
    Linus

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Footers can be don 5 or more ways, i did not modify , just used my own way , that gets the junk on top out of the view/screen with a margin top on the wrapper, the header is moved to it's correct place with a border

    Maybe a simple image what you want to achieve with the rounded corners, the full design Please, so that we know what we are talking/coding about


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
  •