|
|
|
| Title : |
An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution. |
| Categories : |
HTML, CSS, Interfaces |
bastien koert |
| Date : |
Jan 15th 2006 |
| Grade : |
3 of 5 (graded 5 times) |
| Viewed : |
5624 |
| File : |
No file for this code example. |
| Images : |
No Images for this code example. |
|
| Search : |
More code by bastien koert |
|
| Action : |
Grade This Code Example
|
|
| Tools : |
My Examples List |
|
|
|
|
|
|
The below is an example of placing elements on a page using Divs, CSS, and HTML. Note that its also possible to include the CSS file instead of placing it inline as shown in the code below.
Enjoy,
Bastien
| <!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body, #contents {min-height: 100%;
width: 100%;
height: 100%;} /* hack for IE5+/Win.*/
html>body, html>body #contents {height: auto;}
/* Without this, Moz1.0 adds a vertical scrollbar */
body {margin: 0;
font-family: Arial, sans-serif;}
#main {margin-bottom: 3em;
height: auto;
padding: .5em;}
#contents {position: absolute;
top: 0;
left: 0;}
#footer {position: absolute;
bottom: 0;
left:0;
background-color: #ccffcc;
width: 100%;
text-align: center;}
</style>
</head>
<body>
<div id="contents">
<div id="main">
<p>Place your page contents here</p>
<p>Place your page contents here</p>
<p>Place your page contents here</p><br />
</div>
<div id="footer">
<p>Enter any content for your footer here</p>
</div>
</div>
</body>
</html> | |
|
|
| How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | How to make a scrolling Div
Categories : HTML, CSS | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | color codes for positive and negative numbers
Categories : PHP, MySQL, Databases, HTML | | | Parses HTTP_USER_AGENT so that you can customize your site to different browsers
Categories : HTML, PHP, Complete Programs | | | How to use META REFRESH to auto refresh an html page
after x seconds.
Categories : HTML | | | XDT Topsite (Gold v1.0)
Categories : Databases, CSS, PHP, HTML and PHP, Sessions | |
|
|
|
