SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    685
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can you make footer that covers the whole rest of page?

    I want to take a background image, and display this in the footer and have it 100% width and 100% hieght so it covers the complete footer, and you can't see any whitespace in the backgorund

    I tried
    #footer2 {
    background:url('bg2.jpg') repeat-x;
    width:100%;
    height:100%;
    position:relative;

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what footer? we need more specifics, examples, etc. this is VERY confusing.
    Steve Davis

  3. #3
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    685
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've attached an example. As you can see, i have a footer there. I want this to be extended 100% width and height, so there is no white space below where the footer starts.
    Attached Images Attached Images

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't see (or approve) the attachment, but it sounds to me like you need to kill your margins and padding.

    If you don't have any major form elements on your page (or know what you're really doing when it comes to forms and CSS and are also willing to sacrifice some functionality) try using the universal selector at the very top of your page.

    Code CSS:
    * {
        margin: 0;
        padding: 0;
    }

    Please let me knowj if that works for you. (Also understand I'm updating a clean installation of Windows, so I can't help you as far as browsers go right now.)

  5. #5
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    685
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the full code. When I added the margin 0; padding, it just moved the text down, the #footer didn't automatically sync to the bottom

    Code:
    #footer {
    background:url('bot.jpg') repeat-x;
    width:100%;
    height:100px;
    position:relative;
    margin: 0;
    padding: 0;
    }
    
    
    .footerwrap {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    }
    
    .footerlinks, .footercopy {
    width:370px;
    padding-top:47px;
    position:relative;
    font:3px Tahoma,Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, what does the HTML that goes with that look like?

  7. #7
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    685
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="footer">
        <div class="footerlinks"><center>&nbsp;<br><font color="FFFFFF" size="2px" style='text-decoration: none;'><a href="#"><font color="FFFFFF" size="2px" style='text-decoration: none;'>Home</a> &nbsp; &nbsp; <a href="#"><font color="FFFFFF" size="2px" style='text-decoration: none;'>Company</a> &nbsp; &nbsp; <a href="#"><font color="FFFFFF" size="2px" style='text-decoration: none;'>Terms of Service</a> &nbsp; &nbsp;<a href="#"><font color="FFFFFF" size="2px" style='text-decoration: none;'>Privacy Policy</a> &nbsp; &nbsp; <a href="#"><font color="FFFFFF" size="2px" style='text-decoration: none;'>Support</a></font><br>&nbsp;<br></div>

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, there's a lot of code that doesn't need to be there.

    As for the HTML, here's how I'd structure it (I went with an unordered list for the footer menu since a menu is just a "list of links").

    HTML Code:
    <div id="footer">
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">Company</a></li>
    		<li><a href="#">Terms of Service</a></li>
    		<li><a href="#">Privacy Policy</a></li>
    		<li><a href="#">Support</a></li>
    	</ul>
    	<span>
    		Copyright &copy; 2007, The Monster Under the Bed. All Rights to Scare
    		Unsuspecting Children Reserved. <!-- I'm assuming you have a copyright
    		notice so I'm using some filler text to represent it -->
    	</span>
    </div>
    Since you've got so much HTML code, I'm going to have to see a live link to your page to be able to best advice you how to handle the CSS (even if it means a complete re-write, which I think it will entail; fortunately I can do that for you while showing you how and why the code I use works the way it does so you can learn from it and use the documentation and code as a basis for future work).


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
  •