1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Pure CSS: Sticky Footer by Tom@Lwis (LWIS.NET)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Tom@Lwis (LWIS.NET)">
<style type="text/css">
/* Layout */
html, body, #container { height: 100%; margin: 0; padding: 0; }
body > #container { height: auto; min-height: 100%; }
#content { padding-bottom: 3em; }
#footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }
/* Theme */
body { font: .75em/normal "Lucida Sans", "Lucida Grande", sans-serif; }
a, a:link, a:visited { color: #c6762f; text-decoration: underoline; }
a:hover, a:focus { }
p { margin-bottom: 1em; }
#about { padding: 50px; }
#footer { background-color: black; color: white; font-size: 200%; text-align: center; line-height: 3em; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<!-- optional code below -->
<div id="about">
<?php for($i=0; $i<=100;$i++){ ?>
<p>This is an example of the Lwis CSS Sticky Footer.</p>
<?php } ?>
<p>This is an example of the Lwis CSS Sticky Footer.</p>
<div class="ad_728x15">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5151928908072155";
/* 728x90, created 10/31/08 */
google_ad_slot = "3550363170";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p><a href="http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/">< Read the tutorial</a></p>
</div>
<!-- // end of optional code -->
</div>
</div>
<div id="footer">My Sticky Footer</div>
</body></html>
|