[thelist] css bottom footer
Austin Harris
austin at dotmail.co.uk
Wed Feb 21 16:42:24 CST 2007
It is possible, (I have *just* done it). As an aside I don't like it in usability terms but that's another story...
If you look here you can see it in action;
<http://londonfields.art-dept.org/projects/gastarbyter/index.php>
<div class="footerWrapper">
<div class="footerContent">blah</div>
</div>
The css is fairly straightforward;
.footerWrapper {
position: fixed;
bottom: 0;
width: 100%;
}
and then for IE6 only (via conditional statement);
html, body {
height: 100%;
overflow: auto;
}
div.footerWrapper {
position: absolute;
margin: 0 0 -1px -9px;
bottom: 0;
}
The margins are a bit awkward for IE for some reason.
I'm not particularly happy with using it, but when a designer & client insist I can only try my hardest. It *HAS* got to be better than using frames...
Austin
----- "super super" <supercop at shaw.ca> wrote:
> I was thinking of doing this in CSS, but its too hard. Then I go back
> to table, and I still cannot figure out how to do this, would anybody
> know if this is possible?
>
> I wanted to achieve something like a old style frame effect where a
> footer will always appeared at the bottom of the screen regardless how
> long/short the page. (not those 3 column css layout that the footer
> will expand if there is space)
>
> I managed to create something similar in IE by removing DTD and using
> table, but FF doesn't seem to like that idea,
>
> http://www.rightertag.com.hk/test/a.html
>
> Please show some light if anybody knows how it would work, coz I don't
> want to go back to frameset.
>
> Thank you so much,
>
> Stanley
>
>
> =============================================
>
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <style type="text/css">
> <!--
> html,body {
> margin:0;
> padding:0;
> height:100%; /* needed for container min-height */
> background:gray;
>
> font-family:arial,sans-serif;
> font-size:small;
> color:#FFFFFF;
> }
> .content {
> overflow: scroll;
> height:auto !important; /* real browsers */
> height:100%; /* IE6: treaded as min-height*/
> min-height:100%; /* real browsers */
> margin: 0px;
> padding: 0px;
> }
> .aaa {
> overflow: hidden;
> }
> p {
> font-size: 76px;
> margin: 10px;
> padding: 10px;
> }
> -->
> </style>
> </head>
>
> <body>
> <table width="1004" height="100%" border="0" align="center"
> cellpadding="0" cellspacing="0">
> <tr valign="top">
> <td height="110">logo & header</td>
> </tr>
> <tr valign="top">
> <td height="100%" nowrap class="aaa"><div class="content">
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> <p> main content </p>
> </div></td>
> </tr>
> <tr valign="top">
> <td height="28">Footer</td>
> </tr>
> </table>
> </body>
> </html>
> --
>
> * * Please support the community that supports you. * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
More information about the thelist
mailing list