SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy footer problems!

    Actually I like more to find directly somewhere a result to my problem, but this one is quite a pain for me!

    I want that the stupid footer (which drives me crazy since hours ) stays down also when the main-div too short is.

    html-file:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Commissaries of the Phoenix</title>
    <link rel="stylesheet" type="text/css" href="gw_dark.css">
    </head>
    <body>
    
    
    <div id="header">
    
    </div>
    
    <div id="leftmenu">
    
    </div>
    
    <div id="main">
    
    </div>
    
    <div id="footer">
    Footer doesn't stay's down if the main-div is to small is
    </div>
    
    </body>
    </html>
    css-file

    Code:
    @charset "ISO-8859-1";
    html {
    	height: 100%;
    	width: 100%;
    }
    
    body {
            background-color: #fff;
    	color: #101010;
    	margin:0; 
    	padding:0; 
    	height:100%;
    }
    #header { 
        margin-top: 0em;
        margin-left: 0em;
        margin-right: 0em;
        border-top: 0px;
        border-left:0px solid #000;
        border-right:0px solid #000;
        border-bottom:2px solid #000;
    	box-shadow: 0px 4px 3px #999;
    	background-color: #444;
        width: 100%;
    	height: 7em;
    	opacity: 0.8;
    }
    
    #leftmenu { 
            width: 11.5em;
    	position: fixed;
    	left: 0;
    	top: 8em;
            min-height: 20em;
            padding: 0.2em;
            border:2px solid #444;
            border-right:0px solid #444;
            border-left:0px solid #444;
            border-top:2px solid #444;
    	box-shadow: 4px 0px 5px #999;
    	border-radius: 0px 21px 21px 0px ;
    	padding: 0.3em;
    	opacity: 0.8;
    	background-color: #fff;
    }
    
    #main { 
        width: 76%;
        min-height: 20%;
        margin-top: 1em;
        margin-right: 4.5em;
        margin-left: auto;
        margin-bottom: 1.5em;
        padding-bottom: 0.2em;
        border:0px solid #555;
        border-bottom:0px solid #444;
        border-top:0px solid #333;
        box-shadow: 4px 4px 5px #999;
        padding: 0.3em;
        opacity: 0.8;
        background-color: #ddd;
    }
    #footer { 
    	margin-bottom: 0em;
    	margin-left: 0em;
    	margin-right: 0em;
    	border-top:2px solid #000;
        border-left:0px solid #000;
        border-right:0px solid #000;
        border-bottom: 0px;
    	background-color: #444;
    	box-shadow: 0px -4px 3px #999;
        width: 100%;
    	height: 7em;
    	opacity: 0.8;
    	text-align: center;
    	color: #dddddd;
    	padding-top: 0.3em;
    }
    What I make wrong? I didnt made anything since 2 years - today I begun again!

    Yeah I know that the code is a chaos - I will clear him after I made the basic.

    btw: this will be I hope my first Joomla-Template

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi dadoirie. Welcome to SitePoint.

    It seems what you want is a "sticky footer", but they are not easy to do.

    Here is a page that describes in detail the best way to do this:

    http://www.sitepoint.com/forums/show...66#post1239966

    Work your way through that, and then come back if you have any questions.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great ralph - thanks - it was easy to understand the idea of it and it helped. Now the footer is on bottom everytime.
    I had just to put 0.4em more on the footers margin-top than the negativ margin-top of the outer (which is in my case called "allin" ) becouse if not than there
    was a scrollbar becouse the fouter was to low. but ok
    more strangely was that after that occured that the main-div when it was too big and u had to scroll doesn't used the margin-bottom. so I had to put inside the
    allin at last place a footerallin with the same number of allin margin-top but off course positiv.
    maybe abit confused now?
    I just post the code!

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Commissaries of the Phoenix</title>
    <link rel="stylesheet" type="text/css" href="gw_dark.css">
    </head>
    <body>
    <div id="allin">
    
    <div id="header">
    
    </div>
    
    <div id="leftmenu">
    
    </div>
    
    <div id="main">
    
    
    </div>
    
    <div id="allinfooter"></div>
    
    </div>
    <div id="footer">
    
    </div>
    </body>
    </html>
    CSS

    Code:
    @charset "ISO-8859-1";
    html {
    	height: 100%;
    	width: 100%;
    }
    
    body {
    
    background-color: #fff;
    
    /*	
    	background-image: url(background2.jpg);
    	background-attachment: fixed;
    	background-repeat:no-repeat;
    	background-size: 100%;
    */
    
    	color: #101010;
    	margin:0; 
    	padding:0; 
    	height:100%;
    	width: 100%;
    }
    
    #allin {
        min-height:100%;
    	margin-top: -7em;
    	border: 0px;
    }
    #header { 
    	margin-top: 7em;
    	margin-left: 0em;
    	margin-right: 0em;
    	border-top: 0px;
        border-left:0px solid #000;
        border-right:0px solid #000;
        border-bottom:2px solid #000;
    	box-shadow: 0px 4px 3px #999;
    	background-color: #444;
        width: 100%;
    	height: 7em;
    	opacity: 0.8;
    }
    
    #leftmenu { 
        width: 11.5em;
    	position: fixed;
    	left: 0;
    	top: 8em;
        min-height: 20em;
        padding: 0.2em;
        border:2px solid #444;
        border-right:0px solid #444;
        border-left:0px solid #444;
        border-top:2px solid #444;
    	box-shadow: 4px 0px 5px #999;
    	border-radius: 0px 21px 21px 0px ;
    	padding: 0.3em;
    	opacity: 0.8;
    	background-color: #fff;
    }
    
    #main { 
        width: 76%;
        min-height: 30%;
        margin-top: 1em;
        margin-right: 4.5em;
        margin-left: auto;
        margin-bottom: 1.5em;
        padding-bottom: 2em;
        border:0px solid #555;
        border-bottom:0px solid #444;
        border-top:0px solid #333;
    	box-shadow: 4px 4px 5px #999;
    	padding: 0.3em;
    	opacity: 0.8;
    	background-color: #ddd;
    }
    #allinfooter { 
    	margin-top: 0em;
    	border: 0px;
        width: 100%;
    	height: 7em;
    }	
    #footer { 
    	margin-top: -7.4em;
    	border-top:2px solid #000;
        border-left:0px solid #000;
        border-right:0px solid #000;
        border-bottom: 0px;
    	background-color: #444;
    	box-shadow: 0px -4px 3px #999;
        width: 100%;
    	height: 7em;
    	opacity: 0.8;
    	text-align: center;
    	color: #dddddd;
    	padding-top: 0.3em;
    }
    Would like to understand why that happend!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dadoirie View Post
    Would like to understand why that happend!
    I don't quite understand all of what you described, but you needed the extra negative margin on the footer to account for the top border and top padding on the footer.

    Code:
    border-top:2px solid #000;
    padding-top: 0.3em;
    To be honest, I would suggest using pixels instead, as mixing ems and pixels like this is imprecise and likely to lead to problems.

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I don't quite understand all of what you described, but you needed the extra negative margin on the footer to account for the top border and top padding on the footer.

    Code:
    border-top:2px solid #000;
    padding-top: 0.3em;
    To be honest, I would suggest using pixels instead, as mixing ems and pixels like this is imprecise and likely to lead to problems.
    The first point I will try to explain it more clearly: If the main-div to long ist (much content), and I scroll down to the footer > a part of the main-div is overlaped by the footer and its not reacting on the margin-bottom > for that I had to put an extra footer (which u on browser dont see) after the main-div, but
    inside the allin-div (as last div in the allin-div) - now the main-div is margin-bottom related to this allinfooter. is there a way to make it more clear
    the code, becouse it seems for me like a cheat

    2nd: Thanks for the understanding of the extra margin-top, because of the padding and border. Its strange that I didn't came by myself on it.
    but ok I did for allmost 2 years nothing.

    3rd: I read right now some info about the difference of px and em - as the design now will be for a guild of an mmoprg I will use px, but after
    when I'm making a template for a blog then I will use em, so that more people have access to the blog!

    Saludos y Fuerza
    Dado

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

    The link Ralph gave you shows you everything you need for a sticky footer and you shouldn't deviate from the plan because it has been refined over the last 8 years and is the only version that works consistently well cross browser. You have also left out the fixes that makes it work in IE8 and opera.

    You can't use margin on the header instead of the thick border because you will get margin collapse on the container. Use a thick border as in my example and then there will be no margin collapse issues. The thick border on the header is the method by which the negative margin is compensated for and allows the content not to overlap the footer. You don't need any negative margins in the footer as that is done on the main container.


    Here is your code in basic working form (but I have not added the ie8 and opera fixes.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Commissaries of the Phoenix</title>
    <link rel="stylesheet" type="text/css" href="gw_dark.css">
    <style>
    html,body { 
    	height: 100%;
    	margin:0;
    	padding:0;
    }
    body {
    	background-color: #fff;
    	color: #101010;
    }
    #allin {
    	min-height:100%;
    	margin-top: -7em;
    }
    * html #allin { height:100% }
    #header {
    	border-top: 7em solid #000;
    	border-bottom:2px solid #000;
    	box-shadow: 0px 4px 3px #999;
    	background-color: #444;
    	height: 7em;
    	opacity: 0.8;
    }
    #leftmenu {
    	width: 11.5em;
    	position: fixed;
    	left: 0;
    	top: 8em;
    	min-height: 20em;
    	padding: 0.2em;
    	border:2px solid #444;
    	border-right:0px solid #444;
    	border-left:0px solid #444;
    	border-top:2px solid #444;
    	box-shadow: 4px 0px 5px #999;
    	border-radius: 0px 21px 21px 0px;
    	padding: 0.3em;
    	opacity: 0.8;
    	background-color: #fff;
    }
    #main {
    	width: 76%;
    	min-height: 20em;
    	margin-top: 1em;
    	margin-right: 4.5em;
    	margin-left: auto;
    	margin-bottom: 1.5em;
    	padding-bottom: 2em;
    	border:0px solid #555;
    	border-bottom:0px solid #444;
    	border-top:0px solid #333;
    	box-shadow: 4px 4px 5px #999;
    	padding: 0.3em;
    	opacity: 0.8;
    	background-color: #ddd;
    }
    #footer {
    	height: 7em;
    	background:red;
    }
    </style>
    </head>
    <body>
    <div id="allin">
    		<div id="header"> </div>
    		<div id="leftmenu"> </div>
    		<div id="main">main </div>
    </div>
    <div id="footer">footer </div>
    </body>
    </html>

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    Thanks a lot!
    I have now studied the code and I like it, because I learned something and that is: Try to keep the code small and if something works how you would like it but you see the code is a big chaos und you had to make a lot unnecessary sideways to reach that what u want than its nice, but it will lead to other problems.
    I will try now not to make the code bigger by solving something. More try other ways

    just one small think which isnt a big deal for this template, but maybe in the future: Why I get at your code a scrollbar and acts like that the design das a 110% heigh and not (like its coded) 100%?

    again thanks - I have learned from it!

    Saludos y Fuerza
    Dado

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The link Ralph gave you shows you everything you need for a sticky footer and you shouldn't deviate from the plan because it has been refined over the last 8 years and is the only version that works consistently well cross browser.
    Funny, the negative top margin on the outermost wrapper version has NEVER worked and results in broken layouts for me -- which is why I use the pad the bottom of the content wrapper and negative top margin on the footer approach, which is simpler and doesn't break in anything I've tested in.

    Also you can't rely on EM fonts or heights on a sticky footer -- firefox is a total idiot when it comes to calculating EM's the same way twice, and as such will sometimes show a scrollbar and sometimes not depending on the window size. (much like it being a total idiot about what left:100% or right:0 means -- rounding errors).

    Code:
    <body>
      <div id="heightWrapper">
        <div id="content">Content before footer here</div>
      <!--#heightWrapper --></div>
      <div id="footer">Footer</div>
    </body>
    Code:
    /* assumes reset is in use */
    html, body {
      height:100%;
      position:relative; /* opera and IE8 helper */
    }
    
    /* Opera Fix */
    body:before {
      content:" "; /* doesn't work for me without at least a space inside it! */
      height:100%;
      float:left;
      width:0;
      margin-top:-9999em; /* using EM avoids divide by zero error in iCab */
    }
    
    #heightWrapper {
      clear:both;
      min-height:100%;
    }
    
    * html #heightWrapper {
      height:100%; /* IE knows not the min-height, but incorrectly treats height as such */
    }
    
    #content {
      height:1%; /* fixes IE8 resize bug, this is NOT haslayout fixing it! */
      padding-bottom:192px;
    }
    
    #footer {
      height:192px;
      margin-top:-192px;
    }
    Notice my approach to the IE8 fix... so long as some child element inside #heightwrapper has a % height on it, the resize bug for 8 goes away. Your empty content version of the Opera fix does NOTHING here, and not using EM's for the footer (which sucks, but whaddayagonnado) dodges the "Firefox is a retard about EM's" bullet.

  9. #9
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah - that idea is really much more simpler. nice one

    I will try it tomorrow as soon I wake up and made my good-morning-coffee. (Its now 2.32 night here )

    thanks for the idea

    saludos
    dado

    btw: the post before from me - I use chrome - of course testing it on other browsers - just IE I gave up long ago (I know: isn't right for the visitors, but IE is just crap) Still didnt tested v.9 and I hope (but dont think so) that it is better!

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Funny, the negative top margin on the outermost wrapper version has NEVER worked and results in broken layouts for me
    It works all the time for me and I've never had a problem with it which is why its the method I advise to use. Show me an example where its broken and I may change my mind or revise the method.


    -- which is why I use the pad the bottom of the content wrapper and negative top margin on the footer approach, which is simpler and doesn't break in anything I've tested in.
    Yes that's fine, but in practice I find that my clients inevitably break the layout with this approach as they are always adding to the page and add elements under the #content and thus breaking the footer. This has happened a number of times now. With the header approach this has never happened (yet) which is why I prefer it.

    Also this approach suffers from the fact that the content area is now 192px larger than it needs to be and any background images or colours extend below the content which is undesirable in most cases.

    If you wanted an element in the content section with another background then you would still get 192px of the original background beneath it. Which at that point you find users moving the element out of the content and thus breaking the footer again.

    Another point to consider is that if #content has a background and also has position:relative added then once again the footer disappears under the content. Not a hard issue to solve of course but this doesn't happen with my header version and is therefore unlikely to break once handed to a client.

    The height:1% on #content is a dangerous approach as far as IE6 is concerned and should there be floats in #content then the user will apply overflow:hidden to #content thus breaking ie6 as the content will be hidden.

    The 9999em negative margin is past the limits of old opera versions (early 10 and before if I remember correctly) and unlikely to work and probably why you said you couldn''t get it work before. -32767px is the safe limit and Simon (zcoprpan) from opera explained where that limit came from but newer versions of opera seem to have increased that limit now.

    Lastly the position:relative on the html element causes an old safari bug and although its not an issue these days I still think its a hack that should be avoided (older safari would hide any other elements on the page that had position:relative defined).

    Taking all that into account I prefer my version but agree that for modern browsers the issues mentioned aren't important apart from the background colour issue and the fact that clients keep breaking the layout when this approach is used.

    I would however agree that for pixel precision in a sticky footer you need to use px (although IE6 and 7 will likely always be a pixel out on odd pixel heights)

    Your empty content version of the Opera fix does NOTHING here, and not using EM's for the footer (which sucks, but whaddayagonnado) dodges the "Firefox is a retard about EM's" bullet.
    It works fine for me in every version of Opera I've tested since we started using it and not seen a problem. I don't doubt that there are bugs in certain circumstances but that's probably true for most everything else also. However, adding a space or come content could make it more solid as Firefox does have a weird collapsing margin bug where floats are cleared using "" without content although I haven't run in to it when used with the sticky footer.


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
  •