Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10

Thread: footer problem

  1. #1
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    So im working on a website, fluid, its not online yet so i do not have a page url yet. Therefore ill post the html and the css.
    What i want is a footer that sticks to the bottom of the screen (my page wont be vertically scrolling).
    Normally I can get it done, but somehow its just not working now.
    Code:
    <div id="wrapper_header">
    <div id="header">
    <div id="wrapper_headergradl">
    <div id="wrapper_headergradr">
    <h1>&nbsp;</h1>
    </div>
    </div>
    </div>
    </div>
    
    <div id="wrapper_content">
    <div id="wrapper_menu">
    <div id="menu">
    </div><!--menu-->
    </div>
    <div id="content">
    </div>
    </div>
    
    <div id="wrapper_footer">
    <div id="footer">
    Design door Daisy Nabben | Alle rechten voorbehouden <i>Himalaya Hills 2012</i>
    </div>
    </div>
    
    CSS of the part thats about the footer
    
    html,body {
          height:100%;
          margin:0 auto;
    }
    
    /* Footer style */
    #wrapper-footer {
    margin-top: 1em;
    text-align: center;
    position:absolute;
    bottom:0px;
    }
    
    #footer {
    margin: 0 20px;
    text-align:center;
    background-color: #e5f0fc;
    border: 1px solid #ccc;
    border-bottom: 0;
    clear: both;
    }
    Hopefully some1 can help me on this
    Ohye also, when the footer sticks to the bottom, the room thats left will be filled up with the wrapper_content div right?? (my wrapper_header has a fixed height)

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Are you trying to have a footer bar that stays at the bottom of the page ? Even when the user scrolls ?

    That's normally accomplished witha fixed position CSS attribute....

    Since CSS attributes inherit from the parent... You really need to post everything... All of your CSS and all of your HTML, otherwise we'll pretty much be guessing at this.

    It could be something that is being carried over from the body attributes or a wrapper div that is causing the issue? But again, we'll only be guessing at it.

    I suggest you post your HTML and your CSS in different " code " brackets so anyone looking at it will know that it's different.

  4. #3
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Ye i juz noticed now that the stuff i posted in there didnt come out right, somehow it didnt take in the CSS hehe

    here again

    HTML:
    HTML Code:
    <div id="wrapper_header">
    <div id="header">
    <div id="wrapper_headergradl">
    <div id="wrapper_headergradr">
        <h1>&nbsp;</h1>
    </div>
    </div>
    </div>
    </div>
    
    <div id="wrapper_content">
    <div id="wrapper_menu">
        <div id="menu">
    </div><!--menu-->
    </div>
    <div id="content">
    </div>
    </div>
    
    <div id="wrapper_footer">
    <div id="footer">
    Design door Daisy Nabben | Alle rechten voorbehouden <i>Himalaya Hills 2012</i>
    </div>
    </div>
    CSS:
    Code:
    html, body {
        height:100%;
        margin:0 auto;
    }
    
    html {
        overflow:hidden;
    }
    
    /* Page width */
    #header, #wrapper_content, #wrapper_footer {
        width: 80%;
        margin: 0 auto;
    }
    
    /* Banner style */
    #wrapper_header {
        background:transparent url('images/bg.png') top center repeat-x;
    }
    
    #header {
        background:#fff url('images/bannerfluid.jpg') top center no-repeat;
    }
    
    #wrapper_headergradl {
        background: transparent url('images/bg02-blue-left.png') top left no-repeat;
    }
    
    #wrapper_headergradr {
        background: transparent url('images/bg02-blue-right.png') top right no-repeat;
    }
    
    #header h1 {
        margin:0px;
        height: 192px;
    }
    
    /* Footer style */
    #wrapper-footer {
        margin-top: 1em;
        text-align: center;
        position:fixed;
        bottom:0px;
    }
    
    #footer {
        margin: 0 20px;
        text-align:center;
        background-color: #e5f0fc;
        border: 1px solid #ccc;
        border-bottom: 0;
        clear: both;
    }
    I dont have any CSS for the wrapper_content stuff because it didnt matter to the footer, and i kicked it out again cuz i was having some trouble with it.
    But yes indeed what i want is a footer that sticks to the bottom of the screen, the header has a fixed height at the top. Then i need the wrapper_content to fill in the space inbetween the footer and the header.

    Hope i made myself clear with this

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times

  6. #5
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Thanks for the help,, although right now i figured i made a very simple mistake thats hard to find when you read over it real quick.
    As you can see i already have the position:fixed thing in my CSS
    the stupid part is that (which i dont have on the code i showed in here, but on my actual page) the html name of the div was wrapper-footer, and im my CSS i had wrapper_footer, see the diff between the dividing between both, one has underscore, other doesnt haha

    *Sigh* sometimes simple typos like that can cost you hours of work :'(

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    When someone ask for help, I try, when I ask for someone to post all their code... This is exactly the reason I asked for ALL the code...

    Had you posted all the code when asked....

    Everyone seems to think they just need to post snippets of what " they " think is relevant

    When your dealing with CSS "all the code" is relevant.

    Hate to be harsh, but perhaps, just maybe....

    Never mind ...

  8. #7
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I knew you had not posted all the code, that's why I put he link up to a similar article... Instead of trying to troubleshoot "partial code"....

  9. #8
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    The code i posted there was the full code of what i had, i just made a typo in my html file thats not on the code here, same portion of code, just somehow it went wrong hehe cant really explain. Didnt put partial code tho

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    All code between <HTML> </HTML> = FULL CODE

    Not going to beat a dead horse here, point has been made and your code is working, so...

  11. #10
    Member
    Join Date
    Nov 2010
    Posts
    31
    Member #
    24712
    Ahh i get you now haha i just copied everything inbetween <html> </html> didnt know td be easier if i copied that with it too ill remember for next time ^^ thanks


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com