i have had a good look thru the previous posts about footers but i was not able to find an answer so i thought i would post to see if anyone has an answer
if you look at the following site the footer always stays at the bottom of the browser but it wont over run the content http://www.iloura.com.au/design.php
has anyone been able to successfully do something like this?
if so how
thanks
Arthur
Why would you want it to? Is the idea not that the footer stays displayed at the bottom of the page no matter what? Under what circumstances would you want the content to cover it?
I know what Arthur means: if you make the browser window smaller so that vertical scrolling is necessary, the footer disappears instead of staying visible and covering up the content.
The example that Arthur linked to basically uses two floating divs one above the other. The top one has “min-height” set to 100%, which would normally push the other div off the bottom of the page, but the bottom div has its top margin set to a negative amount.
This can be done in Freeway using the Extended dialog to set the min-height value and the negative margin. Here’s a link to another example using a similar technique, complete with explanation:
Why would you want it to? Is the idea not that the footer stays displayed at the bottom of the page no matter what? Under what circumstances would you want the content to cover it?
i have had a go at trying to replicate the footer from michael’s response and the link, bu i am unable to get it to work heres a freeway file with a what i have tried(its 5 pro). if you could have a look michael i am sure you will be able to let me now where i am going wrong
thanks
arthur
This is a link to your Freeway file, which is going to be a tough
download. If you meant to send the Freeway file, then you should Zip
it first. If you meant to link to the site you created, you should
link to the actual HTML page.
its a link to a single page (15kb) that i created in freeway to try what michael had suggested but i could not get it to work and i thought i would upload the project for the page and someone might be able to tell me what i need to change to make it work
heres a link a zip www.visualmediaproductions.com/footer.zip (7kb)
thanks
arthur
Sometime around 5/7/08 (at 20:41 -0400) arthur Moody said:
i thought i would upload the project for the page
Arthur and everyone else, this is an IMPORTANT notice:
If you upload a Freeway document for others to download and
investigate, PLEASE make sure that you have removed all details from
the Upload dialog first.
No, it isn’t possible to extract your password from a Freeway
document for use in other software, BUT someone could still wreak
havoc, accidentally or on purpose, by uploading from your Freeway
document itself.
I’m pretty sure all the active members here and most of the passive
readers too are very nice and respectul people who wouldn’t do such a
think. However, there are many people signed up as Freewaytalk
members, and these discussions are open for anyone to read even if
they’re not signed up.
Here are instructions for making this sort of footer with Freeway. Try it out: if something isn’t clear, let me know. If it all makes sense, I’ll pop it in the Tutorials section.
This is a CSS footer, so the CSS button is set to CSS layout!
Draw an HTML item on the page. This item will contain everything on the page, including the footer. Call the item “wrapper”, set the left inset to 0, the top inset to 0, the width to 100% and the height to 100%.
Click inside "wrapper " so that the text cursor appears in the top left hand corner. From the Insert menu, choose “HTML Item”. Do this again, so that there are two HTML items inside “wrapper”.
Call the first item “main”. All the content of the page, apart from the footer, will go in here. Click once on the width button in the “Dimensions” section of the inspector, so that it is de-selected. The width of “main” will now be the same as the width of the page.
Put something in “main”. A few paragraphs of text will do. Now you can de-select the height button so that the height of “main” adapts to its contents. Give “main” a background colour so you can easily see what’s going on when you preview the page.
Call the second item “footer”. De-select the width button, as you did with “main”, so that the footer fills the width of the page. Set the height of the footer to whatever you want: let’s say 60px. Give the footer a background colour.
If you preview the page now, the footer should be sitting snugly beneath the main item. We want it to be at the bottom of the window, so we’re going to use the main item to push it down there:
Select the “main” item, go to the Item menu and choose “Extended…”. In the dialog that appears, click on “div style” and enter a new attribute. The name should be “min-height” (without the quotes!) and the value “100%”.
Now if you preview the page, you’ll see that the main item has pushed the footer right out of the window. This isn’t what we want, so we are going to make space for the footer by giving the main item a negative bottom margin.
Go back to the “Extended Attributes” dialog for “main”, click on “div style” and enter a new attribute. This time the name should be “margin-bottom” and the value “-60px”.
Preview the page. It’s looking good, but if you make the window shorter so that a vertical scroll bar appears, you’ll see a problem: the footer covers up the bottom 60 pixels of “main”. To prevent this happening, we’ll add an invisible item, 60 pixels high, to the bottom of “main”.
Click on “main” so that the text cursor appears, then hold down the “down” arrow until you see that the cursor is right at the end of the content. Choose “HTML Item” from the insert menu.
Call the new item “push”. Set its width to 100% and its height to 60px. Set Clear to “both”.
You’re done! As far as I know, this page works in all common browsers - apart from one. If you haven’t already guessed, the culprit is IE6, which doesn’t understand the “min-height” property. There’s a hack to get round this, but I haven’t yet worked out how to integrate it into the Freeway page.
Excellent. very clear, i was able to get it working first go, thank you very much its exactly what i was after and i learned a few things on the way
Arthur
Next time (if you have Freeway 5) you can skip the first step. Double-click the page, and you have your 100% div to contain everything else on the page.
I haven’t yet understood why, but this doesn’t work. If I make a div directly on the page by double-clicking and then give this div a min-height of 100%, it only expands far enough to fit the content, not to the bottom of the window.
For some reason the “wrapper” div with absolute positioning is needed to make the whole thing work. Why is this? Here’s a quick thing to try in Freeway 5:
Double-click on an empty page to make the cursor appear.
Insert HTML item.
Give the item a background colour and a type a word or two inside it.
Set the height of the item to 100% with the inspector palette.
On the Freeway page the height of the item is now the same as the height of the page. In a browser, the item is only as high as its content.
On 6 Jul 2008, 11:58 pm, waltd wrote:
Next time (if you have Freeway 5) you can skip the first step. Double-click the page, and you have your 100% div to contain everything else on the page.
Update: I’ve found a way of including the hack for Internet Explorer 6.
In the example I linked to, the hack for IE 6 is to add the following two attributes for “main”:
height: auto !important;
height: 100%;
Freeway doesn’t approve of having two values for “height” for the same item: when I tried entering both these values in the “Extended” dialog, only the second one made it into the generated code.
The solution I found was to pack both values into one in the dialog. For "Name " I entered “height” and for “Value” I entered “auto !important; height: 100%”. It produces the right code and the page now works in IE6. The code is valid, too.
Hi Michael,
Very interesting!
–>7. It didn’t do anything for my FRW 5 Pro, Safari / FFOX - Mac
nothing was pushed off, so I continued with 10.
The footer seems to stick alright with 60 px after the last line of text (push-item),
ok it’s not at the very bottom of the browser window but it’s the best we got so far,
Thanks for the great input!
BW, Omar K Neusser
livelynights.webdesign
Hi Michael,
Very interesting!
–>8 (not 7). It didn’t do anything for my FRW 5 Pro, Safari / FFOX -
Mac
nothing was pushed off, so I continued with -->11 (not 10).
The footer seems to stick alright with 60 px after the last line of
text (push-item),
ok it’s not at the very bottom of the browser window but it’s the
best we got so far,
Thanks for the great input!
BW, Omar K Neusser
livelynights.webdesign
Have been working with Michael’s footer method , his simple example works, but problems placing items. I have a lot of difficulty to put in other HTML-items, it is quirky, I mean the content of the whole page dissappears when clicking somewhere, then comes back when clicking outside.
For now I’ll give up Michael’s footer method: it’s quirky, f ex I
cannot mark with the general marker (the one which marks several items),
also the picture-content of my graphics (not their borders)
disappear, and only reappear when clicked on again.
This has probably to do with the wrapper, main and footer having their
width/height dimensions deselected, resulting in some kind of
overlapping (?!).
Anyway until this footer-issue has been solved (don’t mind IE 6) we
will have to think of some other solution…
BTW to get that far (= to be able to fill the original wrapper, main
and footer - page
with items), I had to apply %-heights to them, only later when the
items were in the page I changed back to what Michael had suggested
(6 Jul 2008, 6:37 pm), i.e. deselcted heights / widths.
Yeh - and how was it done on the softpress - site ?
Have been reviewing Michael’s and other such CSS-footer methods, but having problems placing items. The feel is quirky, I mean the content of the whole page can suddenly dissappear when clicking somewhere, then comes back when clicking outside.
Or to put it in another way:
I like the original work-process of FRW, such as drawing areas for HTML/ graphics with positioning etc. BUT THIS way to work is not possible when working inside a lot (or even one) DIVs, so we may win a footer, but we loose FRW’s intuitive workbench, so I’m not so sure if I’m willing to sacrifice it.
Would like to hear what other designers think in this respect.