Sun, 2006-12-17 08:00
Is there any way that footers can appear at the bottom of page views, if the view is longer than the actual content length? Footers look weard if the page view is larger than contents. I am interested in non JavaScript implementation.
Thanks in advance.
Sun, 2006-12-17 10:46
#1
The answer is probably 'Yes'
The answer is probably 'Yes' but without clear notion of your intent and sight of code it's difficult to help.
If you have a look through the 'How To' section you will find a topic on footer techniques which may well answer your question (it's worth while having a quick check through the 'How To' section before posting)
Hugo.
Mon, 2006-12-18 05:30
#2
Thanks, I tried suggested
Thanks,
I tried suggested methods in the links. But still having problems;
I have the following requirement. At the top there's a header: fixed height streaching all width. At the bottom, I have footer. In the middle, body with a two-column table. If the whole content is smaller than the diaply window frame height, then I like the footer displayed at the bottom adjacent to the bottom of the window frame. In addition, the menu table column streach up to the top of the footer, so that we have yellow right menu column, filling from th bottom of the header to the top of the footer. Of course, if the content height is larger than the window viewport height, the footer appear after the contents. I used the following codes, but it shows the following symptoms;
1. It oversize the height to that of header (possibly plus footer). As a consequence, when it is scrolled down, it shows empty spaces below footer!
2. The yellow menu colum is not fully streached. It fills up to the actual content size.
HEADERS
MAIN CONTENTS
MENUS
And the CSS containg the followings;
HTML {
HEIGHT: 100%
}
BODY {
HEIGHT: 100%
}
#nonfooter {
MIN-HEIGHT: 100%; POSITION: relative
}
HTML #nonFooter {
HEIGHT: 100%
}
#footer {
MARGIN: -1.5em auto 0px; POSITION: relative
}
HTML #footer {
MARGIN-TOP: -1.4em
}
Mon, 2006-12-18 07:32
#3
See these
See these demos,
http://garyblue.port5.com/webdev/footertest.html and
http://garyblue.port5.com/webdev/2col.html
The first takes care of the footer issue and the second, the two column equal heights.
Start with the footer skeleton and work in the other a bit at a time.
The solution may not be readily apparent, but it is there.
Hint: The body may be styled separately from html.
cheers,
gary
Tue, 2006-12-19 05:34
#4
It seems that none of
It seems that none of suggested techniques work. I will give up noble solutions for now. I will use simple floating footers.
Tue, 2006-12-19 07:33
#5
Yes, yes they do work
Actually, my suggestions work just fine, thank you. Did you not even try? I gave you all you needed to make it work.
Here, I just plopped the one set of code into the other, as I said would work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml"
lang="en">
<head>
<meta name="generator"
content=
"HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
<meta name="editor"
content="Emacs 21" />
<meta name="author"
content="Gary Turner" />
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<meta name="description" content="Lock your footer to the bottom of the screen or bottom of content, whichever is lower" />
<title>Footer at the bottom of the viewport | Gary Turner's html & css playpen</title>
<style type="text/css">
/*<![CDATA[*/
html, body, #wrapper {
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;
}
html>body #wrapper {
height: auto; /*this undoes the IE hack, hiding it
from IE using the child selector*/
}
html {
background-color: #fff;
}
body {
font: 100% verdana, helvetica, sans-serif;
color: #333;
background: #eee url(navcolbg.jpg) repeat-y;
position: relative;
width: 80%;
margin: 0 auto;
outline: 1px dotted red;
}
p {
font-size: 1em;
margin: 1em 0; /*required for IE's buggy behavior
with collapsing margins*/
}
h1, h2 {
font-family: georgia, serif;
text-align: center;
text-transform: capitalize;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
}
#main {
overflow: hidden;
height: auto;
padding-bottom: 3em; /*Keeps content above footer. Originally
used margin, but a bug in Opera7 seemed
to add spurious margin, pushing the
footer beyond the viewport even with
short content. */
}
#navcol {
width: 160px;
padding: 5px;
float: left;
}
#content {
margin-left: 170px;
padding: 5px;
}
#pageheader {
padding: 5px;
border-bottom: 1px solid black;
background-color: #eee;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background-color: #eef;
border-top: 1px solid #aaf;
}
/*]]>*/
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="pageheader">
<p>Generic banner goes here</p>
</div> <!-- end pageheader -->
<div id="navcol">
<p>Navcol is here.</p>
</div> <!-- end navcol -->
<div id="content">
<h1>Lock the footer to the bottom of viewport</h1>
<p>The footer will sit at the bottom of the viewport unless the content pushes it down.
<p>Put your whole page in #main, everything except the footer.</p>
<!-- uncomment the following to see long content -->
<!--
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
<p>spacer</p>
-->
</div> <!-- end content -->
</div><!-- end main -->
<div id="footer">
<p>Put your footer stuff here.</p>
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
gary
Tue, 2006-12-19 15:43
#6
hi there, i can help you
hi there, i can help you with another solution to.
the other way is to use php.
you just put in a little *invisible table* or layer or what ever you wan't.
and put in this code:
<?php include'footer.html';?>
the only thing you have do make that php code work, is to save your file as a PHP doc, else it won't work.
you can also just make it footer.php whatever you wan't.
it's like an external Cascade styling sheet.
it imports it into the page, only here it's a other page in the actually you use now.
Carsten
Tue, 2006-12-19 22:58
#7
I am not sure how php can do
I am not sure how php can do magic? After all you still need CSS! Gary's solution is promissing. The footer floats as I wished. But I still have some problems with content and navigation columns work properly. I will post my code soon.
Tue, 2006-12-19 23:51
#8
u only have to make a
u only have to make a table.
and put in that php include, and it's exact at that space were the table is.
so if the footer is bigger then the table, no prob.
just try;)
just helping out you guy
Wed, 2006-12-20 00:04
#9
I have the following code.
I have the following code. The problem is in the middle section. The right side is fixed width navigation bar, in blue. The rest at left is supposed to be filled with contents in red background.
Contents and navigation bars should be on top of the footer and just below the header. Currently it does not work properly. Any suggestions?
Footer at the bottom of the viewport | Gary Turner's html & css playpen
/**/
Generic banner goes here
Lock the footer to the bottom of viewport
The footer will sit at the bottom of the viewport unless the content pushes
it down.
Put your whole page in #main, everything except the footer.
spacer
spacer
Wed, 2006-12-20 05:37
#10
Go back and study the 2
Go back and study the 2 column demo. Look where the background image and color are used. Too, the float element must precede the no float elements.
gary
Wed, 2006-12-20 10:48
#11
kk5st wrote:Go back and
kk5st wrote:
Go back and study the 2 column demo. Look where the background image and color are used. Too, the float element must precede the no float elements.
As a matter of fact, I am starting to realize the limitation of CSS features. I managed 2 columns and three columns. But not the way I wanted. I (maybe we) have to say congratulations to those who designed CSS that cannot do something so obvious!
Wed, 2006-12-20 12:56
#12
Do you think using a doctype
Do you think using a doctype may make this easier for you? There is a reason we tell people to use doctypes, they're not just cosmetic 
Wed, 2006-12-20 15:03
#13
oh1234 wrote:I (maybe we)
oh1234 wrote:
I (maybe we) have to say congratulations to those who designed CSS that cannot do something so obvious!
Actually it can do it quite nicely, but that's not the point. What matters, I suggest, is whether your layout works with your content. What is it about your content that demands a certain layout, or at least works best with a certain layout? If you can't answer that then I (not so) humbly suggest you might just have your design process backwards.
Wed, 2006-12-20 18:13
#14
oh1234 wrote:kk5st wrote:Go
oh1234 wrote:
kk5st wrote:Go back and study the 2 column demo. <snip>
As a matter of fact, I am starting to realize the limitation of CSS features. I managed 2 columns and three columns. But not the way I wanted. I (maybe we) have to say congratulations to those who designed CSS that cannot do something so obvious!
I'll agree the faux column method and a lot of other work-arounds seem a bit klunky, but don't blame the css.[1] CSS is a powerful presentation language. The unfortunate facts of web development life are that a certain 800lb gorilla supports less than half of css 2.1. That same gorilla applied pressure to have css 2.1's status set back to working draft from release candidate in order that its css support would seem less bad. Browser vendors are expected to implement CR versions as a prerequisite to the version becoming the official recommendation. Firefox (Gecko) has pretty much complete support and Opera is only slightly behind[2]. CSS 3 is in working draft status, with the modern browsers implementing proper proprietary test support. Do not look for the gorilla in that group.
Even with the klunky work-arounds and silly hacks we have to use in order that IE performs, the results are still superior to the crap that is the table layout with its poorly structured, non-semantic markup and the resulting maze of code.
cheers,
gary
[1] In my site, go to the "modern browser" layout examples. These are alternative methods of creating columns provided by css 2.1 properties—IE fails miserably.
[2] See http://www.webdevout.net/browser_support.php for test results. Safari test results are incomplete.
Wed, 2006-12-20 19:45
#15
Whatelse will be more basic
Whatelse will be more basic and elementary than layout management? Most will agree this! If CSS is not designed for it, I have say that's design bug that should be fixed ASAP. CSS is partially useful!
Wed, 2006-12-20 21:23
#16
Do you not understand what
Do you not understand what you've been told? CSS is an excellent layout tool. The fault lies with IE. We web developers have to dumb things down for that PoS browser.
Even with the dumbing down, css is still a better layout device than tables for server-side templating, DOM scripting, accessibility, reduced code bloat and ease of debugging—not to mention reducing world hunger and bringing peace on earth, good will to men.
If you don't see it, it is because you haven't learned enough yet.
gary
Thu, 2006-12-21 03:37
#17
I wonder whether those who
I wonder whether those who designed CSS ever learn to write GUI (Graphical User Interface) programs using MFC, JFC, etc. If they did, things should have been far different! When you learn to GUI programming, widgets and layout management are the first thing to learn! IMO, ≤DIV> tag was to address layouts. But they didn't cook it properly. I wish one of them read this and go back to the drawing board again!
Thu, 2006-12-21 05:22
#18
You're comparing apples and
You're comparing apples and oranges. HTML, css and javascript are meant to be UA and OS agnostic. Your c++ application, using MFC[1] is not cross OS at all (Java and Java foundation classes try to be by running in a VM).
Show me the application like you're talking about that will run equally well on a variety of graphical browsers, screen readers and Braille pads on Windows, Mac, Amiga, and Linux/Unix flavors with or without X-Window. Let the user freely set his preferred window size and font, the application re-flowing as needed on the fly. HTML+css+ECMAScript can do all that and adjust gracefully to the UA's capabilities.
CSS certainly has room for improvement, and a bunch is being done in css3. The big three[2] among modern browsers are ready to jump ahead. That gorilla I mentioned earlier is the drag on the process. As long as the browser with 90% of the market chooses not to improve, there is a huge contra-incentive to advance the state of the art. Hell, it's impossible when your advanced pages break for nine out of ten visitors.
So let's not knock what you don't understand. You can still do a lot with css even allowing for IE. The limitations we suffer are only partially due to css shortcomings, and a small part, at that.
gary
[1] I haven't tried it, but I kinda doubt MFCs would even compile on a non-Windows OS—at least not without a whole pot load of work.
[2] The Moz/Gecko family, Opera and Safari/Konqueror.
Wed, 2006-12-27 14:00
#19
I have worked out with
I have worked out with Gary's version footer. However I am having another nasty thing on IE. When content is shorter than viewport, IE initially diaplays (unscrollable) vertical scrollbar at the right hand side. After some navigation, it tends to fail to draw the scrollbar at all, leaving it empty space! Ideally it should fill 100% width. Is there any way I can prevent this?
Wed, 2006-12-27 15:23
#20
Do you have a link to your
Do you have a link to your page with the problem?
And which version of IE is causing the problem, 6 or 7?
Wed, 2006-12-27 18:58
#21
Chris..S wrote:Do you have a
Chris..S wrote:
Do you have a link to your page with the problem?
And which version of IE is causing the problem, 6 or 7?
5, probably 
Thu, 2006-12-28 03:08
#22
It's 6! But it should not be
It's 6! But it should not be a matter. It should be ok on all versions! The problem is happening after visiting "Frame" version html pages. It must be a bug. I will make simplified reproducuable version and post it.
Thu, 2006-12-28 05:21
#23
I located the problem. It
I located the problem. It may be something to do with the way links on Frames are navigated. I place the following three files;
index.html
toframe.html
framed.html
You can recreate the situation by copying the files into your folder. Navigate from "index.html" to "To Frame" then back to "To Index". Then you will see the scrollbar at the right vanished but left spaces!
"index.html";
testing
/*body #wrapper {
height: auto;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
}
#main {
overflow: hidden;
height: auto;
padding-bottom: 2em;
}
#mainbody {
margin-left: 0px;
margin-top: 0px;
border-left: 0px;
margin-right: 0px;
border-right: 0px;
background-color: red;
}
#pageheader {
padding: 0px;
border-bottom: 0px;
background-color: skyblue;
}
#footer {
clear: left;
position: absolute;
bottom: 0;
width: 100%;
background-color: yellow;
color: white;
border-top: 1px solid crimson;
border-bottom: 3px solid yellow;
}
BODY {
BACKGROUND-COLOR: white;
FONT-SIZE: 9pt;
FONT-FAMILY: "Arial", "Tahoma";
BORDER: 0px;
MARGIN: 0px;
PADDING: 0px;
}
/*]]>*/
To Frame
Left
Middle
Right
"toframe.html";
To Frame
Frameset Alert
This document is designed to be viewed using the frameset feature!
"framed.html";
frame me
To Index
p.
p.
p.
p.
p.
p.
p.
p.
p.
p.
p.
Thu, 2006-12-28 10:39
#24
To quote what I asked a week
To quote what I asked a week ago . . .
thepineapplehead wrote:
Do you think using a doctype may make this easier for you? There is a reason we tell people to use doctypes, they're not just cosmetic
Thu, 2006-12-28 20:27
#25
There are also compelling
There are also compelling reasons not to add things which do not required. Adding such stuff especially at the front COULD pay you in terms of search engine rankings!
Thu, 2006-12-28 20:32
#26
What? You're intentionally
What?
You're intentionally making this task impossible for yourself because you "might" lose Google pageranks?
Google doesn't care if you have a doctype. No search engine does. It's not going to penalise you for having one. Google searches for content in the section. The doctype isn't even in the , it's separate.
:roll:
Fri, 2006-12-29 01:27
#27
Note that the prefix does
Note that the prefix does not do anything to the layout! But it rather occupies spaces in front! So we should not put garbages that do nothing in practice. If putting them makes any difference, I will put them everywhere!
After I getting involved with css-based layout, I am getting more convinced that css layout facility is crap that should be reinvented asap.
If I try to make pages a bit fancy, I am also creating lots of problems! Such a mess.
Fri, 2006-12-29 14:37
#28
I don't think you
I don't think you understand.
Without a doctype in place, IE f*cks up bigtime. It won't render your page according to the specs. So you can try and fail miserably to get a page working, all because you're apparently too damn stubborn to put a doctype in place.
Until you put the DTD in, and understand why you need it, we can't help you any further, it will be a complete waste of our time.
Fri, 2006-12-29 16:19
#29
oh1234, if you come to a
oh1234, if you come to a forum to ask for help. Please try to respect the answers that you are given. If you don't understand the answer or they appear contrary to other knowledge you have ask, for further explanation.
This forum actively encourages the use of CSS, Semantic HTML and Doctypes. If that isn't the way you want to build your sites, you aren't going to get suitable answers to your questions here.
If you want to equate your lack of knowledge and understanding of CSS with CSS being crap, that is up to you. In this forum that just means you'll be treated as ignorant and lazy and your posts will be ignored. However, if you are prepared to listen and learn, you will get lots of help from the people who frequent this forum. The choice is yours.
Sat, 2006-12-30 06:46
#30
I respect what people reply
I respect what people reply to my postings. That's why I spent quite a time to produce non-working examples. I know that no one will have perfect solutions because of the limitations of CSS. But I posted it to share the information with other people who might be reading this forum. IMO, forum is a place you can discuss and share experience, NOT a place to promote certain things! That's why forum is a good place to broden and share experiences with people from different backgrounds!
Also I don't understand why "not using doctypes which has no functions" becomes an issue here! I gave enough reasons NOT to use them. Before I removed it, I tested the difference! If it has difference, I would have never removed it. Rather I should be using everywhere.
CSS is good in styling for spacing, fonts and colors. Not for layout management! To make CSS really useful, they have to address this problem. Do you think raising this type of issue is an act of disrespectful about others? Then I should stop here.
Sat, 2006-12-30 10:08
#31
oh1234 wrote:I respect what
oh1234 wrote:
I respect what people reply to my postings. That's why I spent quite a time to produce non-working examples. I know that no one will have perfect solutions because of the limitations of CSS.
While CSS has certain 'limitations' one has to remember that it is an evolving standard and relies on browsers implementing the agreed specification for new properties.
oh1234 wrote:
But I posted it to share the information with other people who might be reading this forum. IMO, forum is a place you can discuss and share experience, NOT a place to promote certain things!
True to an extent; yes it is a place where discussion and experience is shared and where in a democratic spirit points of view encouraged, but..
you're wrong in your opinion that it shouldn't promote 'certain things'. This is a forum for the discussion, help and guidence, on matters of a very specific web development nature; that of Cascading Style Sheets; so in that sense it IS a place to promote 'certain things'
oh1234 wrote:
Also I don't understand why "not using doctypes which has no functions" becomes an issue here! I gave enough reasons NOT to use them. Before I removed it, I tested the difference! If it has difference, I would have never removed it. Rather I should be using everywhere.
Quite simply if you do not understand why then you must find out why. Fundementally the problem here is that you have insufficient knowledge on the subject at this moment and as such a point of view is null and void and where it is a case that you must listen to those that do have the experience and knowledge.
Doctypes DO have a difference in the way a page or browser handles the iterpretation of CSS and it is quite simple to test case that difference - try centering a fixed width box using margin auto in IE <' 7 without a DTD. It is important that you understand what is meant by 'Quirks Mode' and 'Standards Mode'.
oh1234 wrote:
CSS is good in styling for spacing, fonts and colors. Not for layout management! To make CSS really useful, they have to address this problem. Do you think raising this type of issue is an act of disrespectful about others? Then I should stop here.
You can raise that point, and it is not disrespectful to others, but what is is to fight and struggle as you are at the moment against the advice of those that understand the issues and that have even gone to the extent of providing working code for you.
CSS is actually rather good for layout management - not perfect - no one claims it's perfect, but it progresses towards that goal, but what else is there? the constant error is assuming that the table construct is actually a layout tool it's not! it has the benefit of certain behaviors that allowed people to achive certain requirements that they wished for, but that was a secondary use for the tag, it was not created for that purpose.
The true point to all this is that originally the HTTP protocol and UA was not conceived for your purposes it was designed to fulfil a requirement to convey information within a common readable format for acedemics, and as such had little requirement for the fancy layouts that people now demand and complain that they cannot achieve simply, well tough, you have to understand that these requirements are being concidered and catered for but that a common 'Standard' must be maintained unless you're happy with browser chaos that we have all experienced, also concider that in actual fact these standards are in their infancy, in 10 years time all this will seem like a bad dream 
CSS has begun to provide true presentational tools that allow for a high degree of control, but the fact that there was concidered a need for Doctype Switching was a result of the fact that browsers went their seperate ways in development echewing any notion of a common format.
If you wish to develope web pages you must really understand this area and why it is important at this moment in time to use a switching DTD, you'll also find your coding life so much easier as well.
Sat, 2006-12-30 15:00
#32
oh1234, I don't believe
oh1234, I don't believe there is any comprehensive resource on the web which details differences between browser rendering with and without doctypes. In my experience, the most significant differences occurs with:
- table rendering
- box model (IE)
- hasLayout (IE)
In your particular case there may not be any difference due to doctype, but then again there may be. Doctype tells the browser to render the page to an agreed standard. Modern browsers attempt to do that (with varying degrees of success). From a web designer point of view, if you have a doctype you are dealing with a know quantity - a w3c standard with reference documentation. Browsers may still implement things differently, but those differences are far less than when there is no doctype.
The number of bytes required to implement a doctype is not many. If you look around the internet, it usually only extremely high traffic pages (e.g. google search page) or very basic pages that don't have them. e.g. checkout microsoft or google's documentation pages, these have doctypes - so there must be something in it 