http://n00bp00ns.frihost.net/project/index.html
How do I force the footer to be at the bottom of the broswer
?
Using CSS or not.
How do I force the footer to be at the bottom of the broswer
?
Using CSS or not.
HTML Help
Well, as far as i can tell, this code should work, butm doesn't (when i tried it anyway), i can't for the life of me figure out why, but it doesn't.
this should attach it to the viewport, but instead it squishes the thing so as that the text goes out of sight, i haven't a clue why, sorry.
| Code: |
| (inside footer in the css)
position:fixed; left:0; right:0; bottom:0; top:auto; |
this should attach it to the viewport, but instead it squishes the thing so as that the text goes out of sight, i haven't a clue why, sorry.
You could stick the whole page into another div with the height defined as 100% and so long as the footer and header have their heights defined (and the nav and middle dont) they should expand so the footer is at the bottom.
Should work as it's what I used to do.
Hope that made sense
Matt
Should work as it's what I used to do.
Hope that made sense
Matt
use a table tag will be easyer than div tag
Tables are not ment for layout stuff. You need to use them for tabular-data, not for making up your design.
The trick Mathiaus gave you is a good one, I use such kind of tricks myself and they work
The trick Mathiaus gave you is a good one, I use such kind of tricks myself and they work
usually I use Frontpage to edit my html pages.. I really like the WYSIWIG-editor. it is now common in almost all the html-editors downloadable on internet. download.com gives many results with the WYSIWIG searchterm
| BlackSkad wrote: |
| Tables are not ment for layout stuff. You need to use them for tabular-data, not for making up your design.... |
Hmmmm... I don't know about that. Sure, you're absolutely right but using tables for layout is not going to vanish off the face of the internet anytime soon (let's get real). Even many high profile members of the W3C still use tables for the layout of their web pages and they're supposed to be the ones supporting web standards in the first place. Moreover, 99% of the visitors to your site won't give a rat's arse about whether you're using tables or not. They just want to see a web page that works.
Last edited by littlegiant on Mon Oct 10, 2005 12:59 am; edited 1 time in total
Wow people sure know how to spam boards. Can I use that layout that you have there?
| xorcist wrote: |
| Wow people sure know how to spam boards. Can I use that layout that you have there? |
Yeah sure
And, thanks for all your help. I'll try it soon
.| BlackSkad wrote: |
| Tables are not ment for layout stuff. You need to use them for tabular-data, not for making up your design.
The trick Mathiaus gave you is a good one, I use such kind of tricks myself and they work |
No, it doesn't
There seems to be no way to get a footer to attach itself to the bottom of the viewport in IE. using a fixed position with those parameters will get you a nice footer right below your header.
So here's the challenge: Prove it!!!
I challenge you to use this simple file to layout a fixed header/footer
attached to the top and bottom, respectively, that is always visible and
does not scroll.
here's the html page:
| Code: |
|
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Find a Header/Footer Layout That Works</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type"></meta> <link rel="stylesheet" href="style/default.css" type="text/css"></link> </head> <body> <div class="page"> <div class="header"> <img src="images/title.gif" alt="Isaan Imports"/> </div> <div class="nav-bar"> <a class="baritem" href="index.html">Home Page</a> <a class="baritem" href="somescript.php">another page</a> <a class="baritem" href="info.php">Information</a> <a class="baritem" href="checkout.php?phpsessid=">Buy some stuff</a> <a class="baritem" href="photos.php">Pictures of Stuff</a> <a class="baritem" href="about.php">Contact Us</a> </div> <div class="body-text"> Get something in here.<br/> Actually get alot in here so that it over-fills the page.<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> That Oughta do it<br/> </div> <div class="footer"> Some Kind of footer, this will do for testing. </div> </div> </body> </html> |
Here's a style sheet:
| Code: |
|
html, body /*this should work instead of a <div class="page"> we can try each or both*/ { margin: 0; padding: 0; width: 100% height: 100%; } body { font-weight: 400; font-size: 12pt; line-height: 14pt; font-family: helvetica, sans-serif; font-variant: normal; font-style: normal; background-color: #ffffff; color: #000000; } .page { margin: 0; padding: 0; hieght: 100%; width: 100%; } .header { position: fixed; /* let's shoot for a real header/footer type config*/ right: 0px; left: 0px; top: 0px; display: block; z-index: 2; height: 100px; text-align: center; } .nav-bar { position: fixed; top: 100px; right: 0px; left: 0px; height: 2em; border-style: solid; border-width: 1px; white-space: nowrap; padding-right: 1em; padding-left: 1em; text-align: center; background-color: #000000; color: #ffffff; z-index: 3; } .baritem { line-height: 24pt; padding: 0em 1em; } .body-text { position: absolute; padding: 0; top: 150px; right: 10%; left: 10%; z-index: 2; } .heading { text-align: center; font-size: 18pt; z-index: 3; } .footer { bottom: 0px; width: 100%; position: fixed; height: 14pt; font-size: 10pt; text-align: center; background-color: #000000; color: #ffffff; z-index: 3; } |
Now, theoretically fixed should attach the block elements to the view
port; absolute should allow them to scroll with the page.
In MSIE this is not the case! the property of fixed will attach the
element to view port at opening but watch whtat happens when you
scroll... absolute works ok for the header but if you use it for a
footer it'll act knda screwy. like, scroll right in the page in
this case.
I challenge you to use this simple file to layout a fixed header/footer
attached to the top and bottom, respectively, that is always visible and
does not scroll.
one condition: No Frames!!
Yes I could go along with the whole table, and put height 100% for the height of the table itself, and to the whole tables arn't ment for the actual design of a webpage well without them it's gonna be pretty f***ing hard, .
. |