www.webdeveloper.com
Results 1 to 6 of 6

Thread: making footer for page.

  1. #1
    Join Date
    Dec 2006
    Posts
    35

    making footer for page.

    Hi i would like to make footer for my page
    i tried lot but not success.
    can anybody help me.

    i am sending my some code which i tried to do that.
    #wrapper{
    /*padding: 0px 0px 0px 0px;*/
    position:relative;
    width: 1050px;
    margin: 0 auto;
    min-height:100%;
    padding-bottom:40px;
    }
    #siteInfo{
    /*float:left;*/
    position: absolute;
    width:1050px;
    bottom: 0;
    clear: both;
    background-color: #FFFFFF;
    border-top: 1.5px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    text-align:center;
    }

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The CSS is meaningless without the HTML. Show the complete document.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Sep 2006
    Location
    MA
    Posts
    494
    By looking at the CSS I'm a little confused. This part specifically:

    Code:
    #wrapper{
    /*padding: 0px 0px 0px 0px;*/
    position:relative;
    width: 1050px;
    margin: 0 auto;
    By the ID of wrapper I think you mean the main body, and the margin 0 auto would mean in the center of the page? However, using the position attribute takes it out of the page flow, so I am not sure what you are exactly trying to do. However, I can say that since you have defined the width of the main body, all you need to do is close all other divisions on the page except for the wrapper div, and then make one with an ID of footer or something, make it with the same width as the main wrapper, and maybe give it a small height so that way it really looks like a footer. Add a border, and a repeating background if you like and you've got a footer!

    Hope this helps.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Quote Originally Posted by Ascendancy
    using the position attribute takes it out of the page flow,
    Relative positioning doesn't take an element out of the flow.

    To get that wrapper to follow 100% min-height, its parent and its parent also need the 100% height, so you need
    Code:
    * { margin: 0; padding: 0;}
    html, body { height: 100%;}
    This zeroes default margins etc and sets both html and body to 100% height.

    The footer then needs a height specified, and shout NOT use any positioning attributes - it should naturally follow the wrapper. The footer then needs a negative top margin equal to its total height to "pull" it back up on screen. The contents of the wrapper will also need a bottom padding equal to footer height so they don'r disappear behind it.

  5. #5
    Join Date
    Dec 2006
    Posts
    35
    Hi Centauri
    I did what u told but i didn't solve the prob.

    here the code which i changes according ti u
    html,body{
    height:100%;
    font-family: Arial,sans-serif;
    color: #333333;
    /*line-height: 1.166;*/
    margin: 0px;
    padding: 0px;
    }
    #wrapper{
    width: 1050px;
    margin: 0 auto;
    padding-bottom:40px;
    }
    #siteInfo{
    clear: both;
    background-color: #FFFFFF;
    border-bottom: 1.5px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    text-align:center;
    height:35px;
    top:-35px;
    bottom:0px;
    }
    site info is my footer

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    You need a minimum height on the #wrapper and * html hack to feed the height to the #wrapper for IE6
    Code:
    * {
    margin: 0;
    padding: 0;
    }
    html, body {
    height:100%;
    }
    body {
    font-family: Arial,sans-serif;
    color: #333333;
    }
    #wrapper {
    width: 1050px;
    margin: 0 auto;
    min-height: 100%;
    }
    * html #wrapper {
    height: 100%;
    }
    #content {
    padding: 10px 10px 45px 10px;
    }
    #siteInfo{
    background-color: #FFFFFF;
    border-bottom: 2px solid #cccccc;
    font-size: 75%;
    color: #cccccc;
    text-align:center;
    height:35px;
    top:-37px;
    }
    The first part zeros browser default margins and paddings so they don't interfere with height calculations. The wrapper gets the 100% minimum height, and a #content div inside the #wrapper gets the bottom padding, not the #wrapper itself. Also note the negative top margin needs to take into account the border width (which I changed as 1.5px is not a valid figure).
    Last edited by Centauri; 05-22-2007 at 06:47 PM. Reason: additional code

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles