SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would not have that footer as an image. I would have it as a div with a grey BG and a yellow border-top ... what is the point in it being an image? ... plus it means that the page is not flexible because it is in the same image as the top BG- if you want to add more content or if users insist on making the text bigger then your page will get all screwed up.

    So take that bottom out of the Main background image and add this div to the page:

    Code CSS:
    #footer {
      height: 86px;
      background: #F0F0F0;
      width: 100%;
      border-top: 2px solid #fbc53f;
      text-align: center;
    }

    (Add it outside of all other Divs.)
    You can fiddle around with the padding and perhaps line-height to get the text in the proper place.

    Code:
    <div id="footer">FOOTER TEXT</div>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Add clear:both to the footer.
    Code:
    #footer {
      height: 86px;
      background: #F0F0F0;
      width: 100&#37;;
      border-top: 2px solid #fbc53f;
      text-align: center;
        clear:both
    }

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    quite weird how it won't work.

    Try adding float:left; just to the footer div
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

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

    You can't add a top margin to the footer because it slides under the floated elements above. You can either float the footer to make the margin take effect:
    Code:
    #footer{float:left}
    Or add a margin-bottom to #pagewidth instead.

    However you would then also need to ensure #pagewidth is containing its floats:

    Code:
    #pagewidth {
        margin: 0 auto 40px;
        padding: 0;
        width: 772px;
        overflow:auto;/* clear floated content*/
    }
    See the faq on floats for more information on floats and clearing.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by JimmyPaddy
    quite weird how it won't work.
    Not Really

    Margins on static content will slide under floated content because floats are removed from the flow. The bottom edge of #pagewidth doesn't clear the floated content so it does not come into effect. The floats need to be cleared and then the margin will take effect.

    Margins and padding will always slide under floated content (unless overflow other than visible is used or if the element has "haslayout" in iE). Floats only repel foreground content and therefore any margins on static content that follows a float will act as if the float was not there.


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
  •