SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Confusion with repeat-x and position: fixed

    Hello,

    I have spent hours trying to create a basic repeated footer in a webpage to span 100% across the screen:

    (I need position:absolute but this only works if i apply position:fixed)?
    Code CSS:
    .footer {
    position:absolute;
    background-color:#000;
    width:100%;
    height:250px; 
    z-index:2;
    background-image:url(images/footer_repeat.gif);
    background-repeat:repeat-x;
    }

    I already have a repeat for the header which works fine:
    Code CSS:
    body{
    background:#fff;
    height:2000px;
    background-repeat:repeat-x;
    background-image:url(images/header.gif);
    z-index:2;
    }

    I'm not sure what i'm doing wrong and if there's an easier way i'd love to know!

    Thank you,
    Ross

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,219
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    You haven't said what the result of that code is. Still, position: absolute should generally not be used for page layout. Perhaps you need to position the footer somewhere, by adding something like

    bottom: 0;

    ... but I doubt this will solve all of your problems. Sounds like you may be after a "sticky footer" which is not easy with CSS. See here for some details on what is required.


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
  •