FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


HTML Help





n0obie4life
http://n00bp00ns.frihost.net/project/index.html

How do I force the footer to be at the bottom of the broswer Wink ?

Using CSS or not.
davmcmul
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.

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.
mathiaus
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
haoys
use a table tag will be easyer than div tag
BlackSkad
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 Smile
irkekajo
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
littlegiant
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.
xorcist
Wow people sure know how to spam boards. Can I use that layout that you have there?
n0obie4life
xorcist wrote:
Wow people sure know how to spam boards. Can I use that layout that you have there?


Yeah sure Wink

And, thanks for all your help. I'll try it soon Wink.
friscofrankie
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 Smile

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/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<br/>
      <br/>&nbsp;<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!!
Jack_Hammer
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, Wink .
Related topics
Internet Download Manager
HTML Tutorials
HTML one
Hi, I'm blue ^_^
HTML help needed
trying to get this to work
Last bit of HTML help please
what software for all drive of usb flash disk 98se
HTML HELP SITE
HTML help - Firefox and IE?
making a site but I need help I am new to php and Runy scrip
html help plz
Need some help
Html help?
Reply to topic    Frihost Forum Index -> Scripting -> Php and MySQL

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.