PDA

View Full Version : Add an Image Footer


rph105
12-15-2007, 05:50 PM
i wanted to add an image footer, could someone WALK me through the steps, like how to put in the code, then what to do next, i wanted an image being repeated to the x axis so (repeat-x), and i would like it to stay right at the bottom of the page with a height of about 400pixels.

Now also in the footer, i'd liek to add some company writing, like my address, copyright, and a few links, maybe the company logo down there too.

Can someone please Walk me through this method..

would be much appreciated, got a couple friends who are dying to learn how to do this, thanksss

Raph

Cary
12-15-2007, 11:12 PM
Well, here's some code you can try out. For the life of me I can't find the source page I got this from, but this validating method was the brain-child of Sitepoint's CSS guru, Paul O'B.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable 100% high element</title>
<style type="text/css">
* {margin:0;padding:0}
p{margin:0 0 1em 0}
html,body{margin:0;padding:0}
body{height:100%;margin:0; }
#outer{
background:#ffffcc;
overflow:auto;
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:100px;
}
#bottom{
position:absolute;
left:0px;
right:0px;
height:100px;
background:red;
overflow:hidden;
bottom:0px;
}
</style>
<!--[if IE ]>
<style type="text/css">

* html {padding:0 0 100px;overflow:hidden}
* html body{padding:0 0 100px;padd\ing:0;overflow:hidden}
* html #outer{
height:100%;
position:static;
}
* html #bottom{
left:0;
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<h1>Fixed header and footer in standards mode</h1>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>

<p>test</p>
<p>test</p>
<p>test</p>
<p>last line</p>
</div>
<div id="bottom">
<p>This is the footer and all that stuff.</p>
</div>
</body>
</html>

rph105
12-15-2007, 11:59 PM
Well, here's some code you can try out. For the life of me I can't find the source page I got this from, but this validating method was the brain-child of Sitepoint's CSS guru, Paul O'B.
]

Is it possible to keep the footer at the bottom only when u scroll to the bottom?

Cary
12-16-2007, 01:57 AM
You mean if the page scrolls you want the footer at the end of the page, but if the page content is shorter than the window, then you want the footer to be at the bottom of the window?

rph105
12-16-2007, 06:53 AM
You mean if the page scrolls you want the footer at the end of the page, but if the page content is shorter than the window, then you want the footer to be at the bottom of the window?

Yes! By the way thanks Cary for the help, u dont understand how much I appreciate it

Cary
12-18-2007, 12:40 AM
The following is based on Paul O'B's example page (http://www.pmob.co.uk/temp/3colfixedtest_4.htm), but I reduced it to a single column to make the relevant code easier to see, I hope.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 column layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
<div id="header">Header - No column longest - footer at bottom of window.</div>
<div id="clearheader"></div>
<!-- to clear header - you could use padding-top instead on the three main elements-->
<div id="centrecontent">
<!--centre content goes here -->
<h1>3 column layout</h1>
<h1>(modifed: two columns removed by Cary)</h1>
<p>&nbsp;</p>
<p>Any column can be the longest. Footer will stay at bottom of window unless content is greater then it stays at bottom of document.</p>
<p>Only tested on PC (IE5, 5.5 , 6, Mozilla 1.2 , Firebird 0.6.1, Opera7, Netscape 6.2). Opera 6 doesn't like the footer but it's usable. I expect mac and other browsers will fall over. (<strong>*Update*</strong> Mac Firebird and Mac Netscape 6 &amp; 7 (OS9) look perfect in all cases. Mac IE 5.1.7 &amp; IE5.2.3 and Safari1.1.1 don't like the footer and render it at bottom of the longest column. However the columns works fine ane the effect is still usable. Thanks to a number of people for checking this out for me as I don't have a mac to test on.)</p>
<p>The left and right column colours are the background showing through. A different left column background colour can be achieved by using a repeating image on the left side of the body as in this example.</p>
<p>There is nothing special about this demo as similar techniques have been used before, however they are not usually integrated into one example. The secret to this demo is the left and right columns which are floated negatively from the centre container. If you float them completely in the gaps at the side then they don't clear the footer in older versions of mozilla. However if you leave them overlapping the centre content by 1 pixel then the footer is pushed down as required. The difference can be made up with by shifting to the side with relative positioning.</p>
<p style="text-align: center;"><strong>Read <a href="http://www.pmob.co.uk/temp/3colfixedtest_explained.htm">The Full Explantion</a></strong></p>
</div>
<div id="clearfooter"></div>
<!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer">Footer - | - Footer </div>
</body>
</html>

The style.css content:
* {
margin:0;
padding:0;
}
p {
margin-bottom:1em;
}
/* commented backslash hack v2 \*/
html, body {
height:100%;
}
/* end hack */

body {
background:#D2DA9C;
color: #FFF;
}
#outer{
background: #FFF;
margin-bottom:-52px;
min-height:100%;
color: #000;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background: #809900;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #406700;
text-align:center;
position:relative;
}
#clearheader {height:72px;}/*needed to make room for header*/
#clearfooter {clear:both;height:52px;}/*needed to make room for footer*/
* > html #clearfooter {float:left;width:100%;}/* ie mac styles */
html>body #minHeight {float:right;width:0px;height:100%;margin-bottom:-52px;} /*safari wrapper */

The ie.css content:
* html #outer{
height:100%;
}
#minHeight {
display:none;
}
* html #footer {
height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#centrecontent {
margin:0;
}
#outer {
word-wrap:break-word;
}