SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Help with space below footer, please

    I (a newbie) am designing a website for my friend to feature her poems. I have a content area and sidebar that expand vertically to fit the text, a fixed size header and a fixed size footer, both with background images. The top of the web page sits about 30px from the top of my screen, showing a nice border of the screen's background colour. I would like to have that also at the bottom, so that the footer image does not sit right at the bottom of the screen when you scroll down to the bottom. (See the diagram I attached). Is there any way to do that with CSS? or do I have to add 30px of empty space at the bottom of my footer with the same background colour as the screen's background colour?
    Attached Images Attached Images

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    footer

    Did you try giving the footer a margin-bottom: with a background-color: inherit?

  3. #3
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I tried what you suggested and I got the margin I need (thanks), but because the footer is inside my wrapper, it inherited the colour of that (off white). I want it to inherit the colour of the body (teal). If I give the content colour (off-white) instead of the wrapper, I get the colour I want below the footer, but I also get a teal-coloured space around the content area.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easist way to get top and bottom space like this is to use top and bottom padding on the body element.

  5. #5
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    That suggestion worked for IE7, but not Firefox or Safari. What am I doing wrong? Also, while trying to fix this problem, I have two other problems that have me completely baffled. 1) In Firefox and safari, there is a small gap between the header and the sidebar. 2) I had a lily sit in front of the top right hand corner of the header, overlapping the body on the top and to the right. In IE7, the lily has disappeared altogether, and in the other two browsers, it is not sitting in front of the page, so I don't get the overlap effect.
    I don't want to have someone do my coding for me ... I would like to solve this problem on my own, but I think these two problems are a bit beyond me (or else I am not seeing the obvious). Any help is greatly appreciate
    I have included my html and css.

  6. #6
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry, here are the codes:

    Code:
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Peggy's Website</title>
    <link rel="stylesheet" type="text/css" href="Peggy.css" >
    </head>
    
    <body>
    
    <div id="wrapper"> 
    	<div id="pageheader">
    		<h1>Title</h1>
    		<h2>Subtitle</h2>
    		<h3>by Peggy</h3>
    	</div>
    	<img id="lily" src="images/lily4.png"  alt="lily">
    	
    	<div id="content">
    		<ul>  
    			<li>Text Text Text TextText Text Text Text</li> 
    			<li>Text Text Text Text Text Text</li>
    			<li>Text Text Text TextText Text Text Text</li>
    			<li>Text Text Text Text Text Text</li>
    		</ul>
    		 <ul>  
    			<li>Text Text Text TextText Text Text Text</li> 
    			<li>Will always be your guide</li>
    			<li>Text Text Text TextText Text Text Text</li>
    			<li>Text Text Text Text Text Text</li>
    		</ul>
    		<ul>  
    			<li>Text Text Text TextText Text Text Text</li> 
    			<li>Text Text Text Text Text Text</li>
    			<li>Text Text Text TextText Text Text Text</li>
    			<li>Text Text Text Text Text Text</li>
    		</ul>
    		<ul>  
    			<li>Text Text Text TextText Text Text Text</li> 
    			<li>Text Text Text Text Text Text</li>
    			<li>Text Text Text TextText Text Text Text</li>
    			<li>Text Text Text Text Text Text</li>
    		</ul>
    		<ul>  
    			<li>Text Text Text TextText Text Text Text</li> 
    			<li>Text Text Text Text Text Text</li>
    			<li>Text Text Text TextText Text Text Text</li>
    			<li>Text Text Text Text Text Text</li>
    		</ul>	 
    	</div>
    	<div id="sidebar">
    		<div id="Peggy">
    			<h3 class="heading">About the author</h3>
    		</div>
    		<div id="titles">
    			<h3 class="heading">Poems</h3>
    				<a class="poemName" href="poem1">Name of Poem 1</a>
    				<a class="poemName" href="poem2">Name of Poem 2</a>
    				<a class="poemName" href="poem3">Name of Poem 3</a>
    				<a class="poemName" href="poem4">Name of Poem 4</a>
    				<a class="poemName" href="poem5">Name of Poem 5</a>
    				<a class="poemName" href="poem6">Name of Poem 6</a>
    				<a class="poemName" href="poem7">Name of Poem 7</a>
    				<a class="poemName" href="poem8">Name of Poem 8</a>
    				<a class="poemName" href="poem9">Name of Poem 9</a>
    				<a class="poemName" href="poem10">Name of Poem 10</a>
    				<a class="poemName" href="poem11">Name of Poem 11</a>
    		</div>
    	</div>
    	<div id="clear">
    	</div>
    	<div id="footer">
    		<p>&copy; 2007, All rights reserved - Peggy</p>
    	</div>
    </div>
    
    </body>
    
    </html>
    Code:
    html, body, div, h1, h2, h3, p, ul, li, a, img, span { margin: 0;
    									    padding: 0;}
    
    html, body {height: 100%;}
    
    body {background-color: rgb(0,140,140);
    	padding: 30px 0;}
    
    p, h1, h2 {padding: 10px;}
    
    h2, h3 {line-height: 0.8em;}
    
    h1 {display: none;}
    
    h2 {color: rgb(255,0,153);
    	margin-left: 45px;
    	padding: 90px 0 0 200px;}
    	
    #pageheader h3 {float: right;
    				padding-right: 250px;
    				margin-top: -15px;
    				padding-bottom: 20px;
    				font-style: italic;}
    
    #wrapper {background-color:  rgb(255,255,204);
    		position: relative;
    		width: 780px;
    		min-height: 100%;
    		margin: 30px auto;
    		overflow: hidden;}
    		
    * html #wrapper {height:100%}
    		
    #pageheader {background: url(images/banner.jpg) 0 0 no-repeat;
    			height: 120px;
    			border-bottom: 2px solid rgb(255,0,153);}
    			
    #pageheader #title {vertical-align: middle;}
    
    #pageheader h3 {margin-left: 100px;}
    
    #content {width: 530px;
    		float:left;
    		text-align: center;
    		height: 100%;}
    
    ul {padding: 2em 0 0;}
    		
    ul li {list-style: none;
    		font-family: Arial, Verdana, sans-serif;
    		font-size: 1em;
    		line-height: 1.5em;}
    		
    #sidebar {width: 220px;
    		float: right;
    		height: 650px;
    		background: url(images/sidebar.jpg) 100% repeat-y;
    		text-align: left;
    		padding: 50px 0 0 0;
    		border-left: 2px solid rgb(255,0,153);}
    		
    #sidebar h3 {padding: 50px 0 20px 30px;
    			font-family: Arial, Verdana, sans-serif;
    			font-style: italic;
    			color: rgb(0,100,100);}
    
    #sidebar a {padding: 40px;
    			line-height: 2em;
    			font-family: Arial, Verdana, sans-serif;
    			font-size: 0.85em;
    			color: rgb(0,100,100);}
    
    #lily {position: absolute;
    	width: 300px;
    	height: 245px;
    	z-index: 5;
    	top: -35px;
    	right: -60px;}
    		
    #footer {position: relative;
    		background: url(images/lily.jpg) 100% no-repeat;
    		background-color: inherit;
    		width: 780px;
    		height: 120px;
    		margin-top: -25px;
    		border-top: 2px solid rgb(255,0,153);}
    		
    #footer p {text-align: left;
    		color: rgb(255,255,204);
    		padding: 80px 0 0 30px;}
    		
    #clear {height:1px;
    	    overflow:hidden;
    	    clear:both;
    	    margin-top:-1px;}

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, you are using a 100% height model, so that changes things as the body will always only be 100% of the screen height, and a bottom margin / padding will not affect that.

    Try removing the padding from the body again, and give the footer the teal background colour, the footer paragraph the off white background, and apply a 30px bottom padding to the footer :
    Code:
    #footer {
    	position: relative;
    	background-color: #008C8C;
    	width: 780px;
    	margin-top: -25px;
    	border-top: 2px solid rgb(255,0,153);
    	padding-bottom: 30px;
    }
    		
    #footer p {
    	text-align: left;
    	padding: 80px 0 0 30px;
    	background-color: rgb(255,255,204);
    }

  8. #8
    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,

    If you are wanting the footer at the bottom of the window technique but with some space at the top of the page and the bottom of the page then you will have to do something like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Peggy's Website</title>
    <link rel="stylesheet" type="text/css" href="Peggy.css" >
    <style type="text/css">
    html, body {height: 100&#37;;margin:0;padding:0}
    body {background-color: rgb(0,140,140);}
    p, h1, h2 {padding: 10px;margin:0}
    h2, h3 {line-height: 0.8em;margin:0}
    h1 {display: none;}
    h2 {color: rgb(255,0,153);
        margin-left: 45px;
        padding: 90px 0 0 200px;}
        
    #pageheader h3 {float: right;
                    padding-right: 250px;
                    margin-top: -15px;
                    padding-bottom: 20px;
                    font-style: italic;
                    }
    
    #wrapper {
            position: relative;
            width: 780px;
            min-height: 100%;
            margin:0 auto;
            background-color:  rgb(255,255,204);
            }
            
    * html #wrapper {height:100%}
            
    #pageheader {background: url(images/banner.jpg) 0 0 no-repeat;
                height: 120px;
                border-bottom: 2px solid rgb(255,0,153);}
                
    #pageheader #title {vertical-align: middle;}
    
    #pageheader h3 {margin-left: 100px;}
    
    #content {width: 530px;
            float:left;
            text-align: center;
    }
    
    ul {padding: 2em 0 0;}
            
    ul li {list-style: none;
            font-family: Arial, Verdana, sans-serif;
            font-size: 1em;
            line-height: 1.5em;}
            
    #sidebar {width: 220px;
            float: right;
            background: url(images/sidebar.jpg) 100% repeat-y;
            text-align: left;
            padding: 50px 0 0 0;
            border-left: 2px solid rgb(255,0,153);}
            
    #sidebar h3 {padding: 50px 0 20px 30px;
                font-family: Arial, Verdana, sans-serif;
                font-style: italic;
                color: rgb(0,100,100);}
    
    #sidebar a {padding: 40px;
                line-height: 2em;
                font-family: Arial, Verdana, sans-serif;
                font-size: 0.85em;
                color: rgb(0,100,100);}
    
    #lily {position: absolute;
        width: 300px;
        height: 245px;
        z-index: 5;
        top: -35px;
        right: -60px;}
            
    #footer {
            background: url(images/lily.jpg) 100% no-repeat;
            width: 780px;
            margin:auto;
            height: 120px;
            margin-top:-152px;
            border-top: 2px solid rgb(255,0,153);
            position:relative;
            border-bottom:30px solid rgb(0,140,140) ;
            }
            
    #footer p {text-align: left;
            color: rgb(255,255,204);
            padding: 80px 0 0 30px;}
            
    #clear {height:1px;
            overflow:hidden;
            clear:both;
            margin-top:-1px;}
    
    #clearfooter{
        height:152px;
        clear:both;
    }
    #inner{
        background-color:  rgb(255,255,204);
        width:780px;
        border-top:30px solid rgb(0,140,140) ;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="inner">
            <div id="pageheader">
                <h1>Title</h1>
                <h2>Subtitle</h2>
                <h3>by Peggy</h3>
            </div>
            <img id="lily" src="images/lily4.png"  alt="lily">
            <div id="content">
                <ul>
                    <li>Text Text Text TextText Text Text Text</li>
                    <li>Text Text Text Text Text Text</li>
                    <li>Text Text Text TextText Text Text Text</li>
                    <li>Text Text Text Text Text Text</li>
                </ul>
            </div>
            <div id="sidebar">
                <div id="Peggy">
                    <h3 class="heading">About the author</h3>
                </div>
                <div id="titles">
                    <h3 class="heading">Poems</h3>
                </div>
            </div>
            <div id="clearfooter"></div>
        </div>
    </div>
    <div id="footer">
        <p>&copy; 2007, All rights reserved - Peggy</p>
    </div>
    </body>
    </html>
    You can't use the 100% height anywhere else and if you want full length borders between the columns you will need to apply a repeating image to #wrapper instead.

    An inner has been added and a top border in the background color added to give the illusion of space. The same has been applied to the bottom of the footer to give the illusion of space underneath also.

    Or we could do something like this without the need for the inner div but is a little more complicated tio understand.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Peggy's Website</title>
    <link rel="stylesheet" type="text/css" href="Peggy.css" >
    <style type="text/css">
    html, body {height: 100%;margin:0;padding:0}
    body {background-color: rgb(0,140,140);}
    p, h1, h2 {padding: 10px;margin:0}
    h2, h3 {line-height: 0.8em;margin:0}
    h1 {display: none;}
    h2 {color: rgb(255,0,153);
        margin-left: 45px;
        padding: 90px 0 0 200px;}
        
    #pageheader h3 {float: right;
                    padding-right: 250px;
                    margin-top: -15px;
                    padding-bottom: 20px;
                    font-style: italic;
                    }
    
    #wrapper {
            position: relative;
            width: 780px;
            min-height: 100%;
            margin:0 auto;
            background-color:  rgb(255,255,204);
            margin-top:-152px;
    }
            
    * html #wrapper {height:100%}
            
    #pageheader {
                background: url(images/banner.jpg) 0 0 no-repeat;
                height: 120px;
                border-bottom: 2px solid rgb(255,0,153);
                border-top:180px solid rgb(0,140,140) ;
    }
                
    #pageheader #title {vertical-align: middle;}
    
    #pageheader h3 {margin-left: 100px;}
    
    #content {width: 530px;
            float:left;
            text-align: center;
    }
    
    ul {padding: 2em 0 0;}
            
    ul li {list-style: none;
            font-family: Arial, Verdana, sans-serif;
            font-size: 1em;
            line-height: 1.5em;}
            
    #sidebar {width: 220px;
            float: right;
            background: url(images/sidebar.jpg) 100% repeat-y;
            text-align: left;
            padding: 50px 0 0 0;
            border-left: 2px solid rgb(255,0,153);}
            
    #sidebar h3 {padding: 50px 0 20px 30px;
                font-family: Arial, Verdana, sans-serif;
                font-style: italic;
                color: rgb(0,100,100);}
    
    #sidebar a {padding: 40px;
                line-height: 2em;
                font-family: Arial, Verdana, sans-serif;
                font-size: 0.85em;
                color: rgb(0,100,100);}
    
    #lily {position: absolute;
        width: 300px;
        height: 245px;
        z-index: 5;
        top: -35px;
        right: -60px;}
            
    #footer {
            background:rgb(255,255,204) url(images/lily.jpg) 100% no-repeat;
            width: 780px;
            margin:auto;
            height: 120px;
            border-top: 2px solid rgb(255,0,153);
            position:relative;
            cleaar:both
    }
            
    #footer p {text-align: left;
            color: rgb(255,255,204);
            padding: 80px 0 0 30px;}
            
    .clear {height:1px;
            overflow:hidden;
            clear:both;
            margin-top:-1px;}
    
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="pageheader">
            <h1>Title</h1>
            <h2>Subtitle</h2>
            <h3>by Peggy</h3>
        </div>
        <img id="lily" src="images/lily4.png"  alt="lily">
        <div id="content">
            <ul>
                <li>Text Text Text TextText Text Text Text</li>
                <li>Text Text Text Text Text Text</li>
                <li>Text Text Text TextText Text Text Text</li>
                <li>Text Text Text Text Text Text</li>
            </ul>
        </div>
        <div id="sidebar">
            <div id="Peggy">
                <h3 class="heading">About the author</h3>
            </div>
            <div id="titles">
                <h3 class="heading">Poems</h3>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div id="footer">
        <p>&copy; 2007, All rights reserved - Peggy</p>
    </div>
    </body>
    </html>
    The whole page #outer is shifted upwards with a negative margin by 180px and the pageheader is given a 150px + 30px top border to soak up the space required for the footer and also make space at the top of the page. This also creates space at the bottom of the page automatically.

    (In both the examples above you would need to add box model hacks for ie5.x)

  9. #9
    SitePoint Evangelist WebMachine's Avatar
    Join Date
    Jun 2007
    Location
    Ontario, Canada
    Posts
    430
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestions. I am going to go through them and try to understand how they work. I may be back soon.


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
  •