|
|
|
| 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 : |
10145 |
| 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> | |
|
|
| Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | How to make a scrolling Div
Categories : HTML, CSS | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | <FORM> causing an extra line in HTML output on IE
Categories : Beginner Guides, HTML, CSS | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | 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 | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | Real simple example of removing HTML tags from text then changing \n (new line) to <br>. Could be used in a forum for instance.
Categories : HTML, PHP, HTML and PHP, Beginner Guides | | | How to get the source of a site into an array.
Categories : Arrays, HTML, PHP | | | PHP alternating the colors of table rows with style.
Categories : PHP, HTML and PHP, CSS | |
| |
| |
|
