This is a discussion on "Positioning a footer at the bottom of the screen" within the Web Page Design section. This forum, and the thread "Positioning a footer at the bottom of the screen are both part of the Design Your Website category.
|
|
|
|
|
 |
||
Positioning a footer at the bottom of the screen
|
||
| Notices |
 |
|
|
LinkBack | Thread Tools |
|
#1
Oct 6th, 2006, 21:19
|
|||
|
|||
|
Positioning a footer at the bottom of the screen
I've tried for days to add a CSS sticky footer (positioning a footer at the bottom of the screen) to one of my pages, but I can't get it to work... Please help me, I have tried all I can, but I'm not an expert and I had to give up. I tried with various codes found around the net and especially with "footerStickAlt".
Below is the code of the page on which I want to add the sticky footer. I have simplified it a lot, so it's easier to understand (I hope). All I need to do is to make the red and white portions (you will see them when you paste the code as html) touch the bottom of the screen. Many thanks, and please help me if you can... Source code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Title</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <!-- ****** start of Sticky Footer CSS ****** --> <!-- here goes the sticky footer css code --> <!-- ****** end of Sticky Footer CSS ****** --> </head> <body> <!-- ****** start of Page Layout ****** --> <table width="779" cellpadding="0" cellspacing="0" border="0" align="center"> <tr><td valign="top" width="150" bgcolor="red"> <table width="100%" cellpadding="9" cellspacing="0" border="0"> <tr><td><table width="100%" cellpadding="0" cellspacing="2" border="0"> <tr><td><table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td align="center"> <img src="http://www.example.com/logo.png" alt="image"> <tr><td valign="top"><table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td><table width="100%" cellpadding="4" cellspacing="1" border="0"> <tr><td><a href="http://www.example.com/">Link</a></td></tr> </table></table></table></table> <table width="100%" cellpadding="1" cellspacing="0"> <tr><td><table width="100%" cellpadding="3" cellspacing="0" border="0"> <tr><td align="center"> </table></table></table> <td valign="top" bgcolor="#ffffff"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td valign="top" width="100%" bgcolor="red"> <table width="100%" cellpadding="2" cellspacing="0" border="0"> <tr><td width="10%" align="left"><table width="100%" cellpadding="4" cellspacing="2" border="0"> <tr><td width="20%"><a href="http://www.example.com/">Link</a></td> </table> <td><table cellpadding="0" cellspacing="1" border="0" width="100%"> <tr><td align="right"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td width="8" bgcolor="#97B3D1" valign="top"> </table></table></table> </table> <tr><td valign="top" width="100%"> <table width="98%" cellpadding="0" cellspacing="0" border="0"> <tr><td valign="top"> <!-- ****** end of Page Layout ****** --> <!-- ****** start of Content ****** --> text text text text text text text text<br><br> FOOTER <!-- ****** end of Content ****** --> </table></table></table> </body></html>        
|
|
|
|
#2
Oct 8th, 2006, 10:04
|
||||
|
||||
|
Re: Positioning a footer at the bottom of the screen
Why would you need a CSS sticky footer when you're using tables? Add height="100%" to the table. I would recommend ditching the tables entirely and coding with CSS and <div>'s, but you've got to really want to learn web design to get serious about it.
Here is my CSS Sticky Footer Last edited by Ryan Fait; Apr 14th, 2007 at 21:43.
|
|
| Tags |
| css problem |
| Thread Tools | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Footer directly aligned to bottom | thewebkid | Web Page Design | 2 | Dec 25th, 2007 21:36 |
| [SOLVED] footer positioning | danny322 | Web Page Design | 3 | Nov 12th, 2007 10:30 |
| Cleaning up footer and positioning | genista | Web Page Design | 10 | Aug 14th, 2007 14:28 |
| Making a footer stick to the bottom | bob_visualefx | Web Page Design | 8 | May 26th, 2006 13:32 |
| absolute bottom positioning in all browsers | stephenleefarmer | Web Page Design | 5 | Dec 6th, 2005 23:19 |
