Tiling footers

Hello,

Although I an understand how to extend a top banner to extend the full width of a browser window whatever its size, I cannot get my head around how to add a footer with the same. Rather like the Freewaytalk page you’re looking at.

Can somebody point me in the right direction please?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi John-Paul,

one of the possibilities had been discussed on:

http://www.freewaytalk.net/thread/view/74022

Maybe it helps you out.

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wonderful … as much as I like this, rewriting the layouts for every page is going to be a pain in the neck. Wish I had set this up in the first place. This is of course one o the weaker points of FWY that we can’t change layouts globally so easily.

Ah well!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

that we can’t change layouts globally so easily.

If your site is based on Master pages you can!

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Well that is slightly misleading as a comment above. If your page is based on any way on the box model you can’t make global changes. The changes destroy the content. Might as well make changes on each page. Please prove me wrong! I don’t use FWY all the time so am happy to see the light on this one!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

agree … but as I said: one way to do.

The other is just to draw your object 2500 px widht, let start it somewhere in the -x and it will be stretched over the browserwindow, too.

Please keep in mind, that a 27" display will detect your trick if you do not make it wide enough as well on those that hit cmd (-) to make screen view smaller - but it will work no doubt.

To my point of knowledge:

All divs set to a 100% widht will stretch across the screen, but centering the page via inspector will break this 100% to the relative page width.

The boxmodel trick is to center an inner div to center the whole page. So the basic 100% div will be intact and stretched all across the browser window.

So there is an alternative - isn’t it?

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The centered fixed-width page with full-width header and footer is
very simple in Freeway.

  1. New page, align set to None.

  2. Double-click into the page itself (you’ll see a blue border on the
    page outline and a flashing text cursor).

  3. From the main menu: Insert HTML Item.

  4. Click once on this new item, set its width to 100% using the
    Inspector, and its Float to left. Leave the height at 100px for now.

  5. Double-click inside this new HTML item so you have the text cursor.
    From the main menu, choose Insert HTML Item again. Click once on the
    resulting HTML item and set its width to your desired “page” width in
    pixels and set its Margin to Auto (which centers it on the page).

  6. Click on the box you created in step 3 (the outer box) to select
    it. If you made your Freeway page size the same width as your desired
    page width, then you may need to use the Site panel to select this
    item, or use the Command-Option-click trick to cycle through the stack
    of nested elements. Copy it to the clipboard.

  7. Double-click in the page, below this HTML box, so you see the
    flashing text cursor again and the entire page has a blue selection
    highlight border.

  8. Paste two times in a row. You should now have a layer cake of three
    inline HTML boxes with the cream center of the floating “column” of
    fixed width elements.

Now, using this layer cake, you can create a full-width stripe of
color or graphic by applying a background to the top layer. Any
content you wish to have in the center of the page is added to the
inline centered element in that layer, either as a positioned child,
or as an inline element. To make it a positioned child, first click on
the center element in the layer, then choose a drawing tool (graphic
or HTML item) and begin and end your drag to draw within the bounds of
the center element. You’ll know you’re doing it right if the cursor
changes from a + to a [+] while you draw and the blue parent highlight
rectangle shows around the bounds of the center element.

You can make the middle layer of indefinite height if you like, as
long as you use an inline construction technique. If you don’t want to
do that, simply make the middle layer the height you need and make all
of the body content as children of the centered box in that layer.

Finally, your footer can be constructed the same way as the header.

This has taken me about four times as long to write out as it would to
just do it. It’s extremely simple in Freeway and quite browser-proof,
too. This is precisely the layout technique used in FreewayTalk,
except for that I used a text editor and a lot of cursing to figure it
out. Someone asked me a couple years ago how to do it in Freeway, and
I was flabbergasted at how simple it was to do there.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I know this is old but just wondering if I could get a little help on this subject.

waltd: I have followed your steps and everything seems to work well but if I have a short page and the content doesn’t fill the whole browser there is a white gap at the bottom of the page. Is there any way of avoiding this? have the footer snap to the bottom and the main content get longer i guess.

thanks


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Make your page background color the same color as your footer background.

If you are looking at the FW Talk site, the background colors are applied like this; the header is blue (actually its a graphic that is tiled horizontally in the body), the page content is white, the footer is light gray and the page background is light gray. This will make for a seamless color transition in your footer.

Marcel


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Marcel beat me to the answer I was going to give you. It’s actually
very hard to make an element stick to the bottom of the screen when
the content is too short and also stick to the bottom of the content
when it’s not. It is possible, but really hard to do well enough that
it looks convincing in a wide range of browsers.

Walter

On Aug 11, 2011, at 10:26 PM, Sherwell wrote:

Is there any way of avoiding this? have the footer snap to the
bottom and the main content get longer i guess.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options