SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    background not extending...

    Everything was just fine until I added the footer in there. I am trying to accomplish having the footer stay at the bottom of the page regardless of how much content the page holds. I added the footer and clearfooter divs in there like I've see in so many examples before and now my background isn't extending to 100% height. I'm sure this is something small, just can't figure it out.


    Here is my code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>deronsizemore.com - Deron Sizemore's personal portfolio site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body, html {height: 100%;}
    body {
    margin: 0;
    padding: 0;
    color: #000000;
    background: url(images/bg2.gif);
    }
    #outer {
    width: 700px;
    background: url(images/bg.gif) repeat-y left top;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    _height: 100%;
    min-height: 100%;
    margin: auto;
    clear: both;
    }
    html>#outer {height:auto;}
    #header {
    border-bottom: 1px solid #000000;
    background: #ffffff;
    height: 30px;
    width: 700px;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    padding-top: 2px
    }
    #leftheader {
    float: left;
    margin-right: 155px;
    }
    #rightheader {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    color: #000000;
    padding-top: 7px;
    }
    #rightheader a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #rightheader a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #rightheader a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #picheader {
    height: 150px;
    background: url(images/blueback.jpg);
    border-bottom: 1px solid #000000;
    }
    #picheader img {
    border-right: 1px solid #000000;
    float: left;
    width: 600;
    }
    #content {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 12px;
    width: 499px;
    margin-left: 100px;
    margin-top: 2px;
    clear: both;
    }
    #content a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #content a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #content a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #title {
    padding-top: 6px;
    padding-left: 10px;
    }
    #paragraph {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    }
    #paragraph2 {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    }
    #paragraph p {
    margin: 0;
    }
    #footer {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    width: 501px;
    margin-left: 98px;
    border-top: 1px solid #9999ff;
    text-align: center;
    margin-top: 15px;
    height: 15px;
    position: absolute;
    }
    #footer a:link {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:hover {
    color: #6666ff; 
    text-decoration: underline; 
    }
    #footer a:visited {
    color: #6666ff; 
    text-decoration: none;
    }
    #footer a:visited:hover {
    color: #6666ff; 
    text-decoration: underline;
    }
    #clearfooter {
    height: 10px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    	<div id="header">
    		<div id="leftheader">
    		<img src="images/deronsizemorelogo.gif" alt="" title="deronsizemore.com logo" />
    		</div>
    			<div id="rightheader">
    			<a href="">Home</a> | <a href="">About</a> | <a href="">Resume</a> | <a href="">Portfolio</a> | <a href="">Services</a> | <a href="">Contact</a></span>
    			</div>
    	</div>
    		<div id="picheader">
    		<img src="images/wavecrashing.jpg" alt="" title="wave crashing" />
    		</div>
    			<div id="content">
    			<div id="title"><strong>Welcome to deronsizemore.com!</strong></div>
    			<div id="paragraph"><p>Hi, I'm Deron.  If you couldn't tell by the name of the site, I am the designer/owner of deronsizemore.com.  Welcome to my little space on the web.  Feel free to browse around the site, I know there isn't much here right now, but I plan to add new stuff often, such as tutorials for those of you out there like myself who learn by doing, not by reading.  So check back often!</p></div>
    			<div id="paragraph"><p>This site was for the most part designed with one purpose in mind, a place for me to showcase my abilities to possible employers.  If there is one thing that I have learned it is that if you cannot prove your abilities to an employer in the web design industry, you're probably not going to get hired for the job.  So I figured I would design a site to showcase what I have done, and what I'm capable of doing in hopes of landing that great career in web design that I am struggling to find.</p></div>
    			<div id="paragraph"><p><strong>Do you need a website/logo/graphic?</strong> Check out the <a href="#">services</a> section of the site, I may be able to help and at a fraction of the cost of what some companies may have quoted you.</p></div>
    			<div id="paragraph"><p>Feel free to <a href="#">contact</a> me at any time if you have a question about something you've seen on this website.  I will try to return your inquiry as soon as possible.</p></div>
    			</div>
    				<div id="clearfooter"></div>
    				<div id="footer">
    				All Content &copy; Deron Sizemore - 2004
    				</div>
    </div>
    </body>
    </html>

  2. #2
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone?

    I had a similar post like this for a different site the other day and the fix was to make the footer position:absolute and then add a clearfooter div to keep content from overlapping footer. This I think is what I have done above but doesn't work?

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

    You're nearly there

    Just add position:relative to #outer to gain stacking context and the add bottom:0 to the footer.

    Code:
    #outer {
    width: 700px;
    background:red url(images/bg.gif) repeat-y left top;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    _height: 100%;
    min-height: 100%;
    margin: auto;
    clear: both;
    position:relative;
    }
    #footer {
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 10px;
    width: 501px;
    margin-left: 98px;
    border-top: 1px solid #9999ff;
    text-align: center;
    margin-top: 15px;
    height: 15px;
    position: absolute;
    bottom:0;
    }
    There you go

    paul

  4. #4
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Paul. I still am leaning the whole position: relative, absolute, etc...don't know when or when not to use them.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Have a look at the FAQ until it sinks in


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
  •