CSS Footer Action

Legacy ActionsDev
1

Is there a way to implement this way of attaching a footer to a page using CSS into an action that would apply the correct tags:

I would envisage that the action would be applied to the element you want as the page footer & then it adds the correct div tags and css to the page ?

Is this possible or am I dreaming waltd ?

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

2

This is done by what is refered to here as “in-line” divisions. That just means a process of inserting html boxes inside other html boxes. For this example it’s pretty straight forward…if you are using FreewayPro that is.

  1. Starting from a new blank Freeway page, double click on it to get the flashing cursor.
  2. Go to Insert menu and select HTML 3 times which place 3 html boxes inside the main page division.
  3. In the inspector pallet enter the width value of 100% for each html box. This will make the boxes fill the entire page width wise. Also set each box to float left, clear left.
  4. The top html box will be your header so size the height appropriately. The bottom box will be your footer, likewise set the height as required.

The center box will hold your main content and will push the footer down as the content grows.

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

3

To get precisely what this original recipe was doing, try this:

  1. (Follow steps 1-3a above).
  2. Instead of setting Float:left, Clear:left, leave them alone.
  3. Click once on the third (bottom) box so it is selected.
  4. Select Item / Extended from the main menu. Click on the DIV Style segment, and press New.
  5. Enter position in the Name field and absolute in the Value field. Okay this sub-dialog.
  6. Press New again, and enter bottom in the Name field and 0 in the Value field (that’s a zero).
  7. Okay out of the stack of dialogs
  8. Enter something in the middle box (text or other inline content) and then un-check the height field in the Inspector (click on the little icon to the left of the field) to make it vertically stretchy.

Now you may preview either internally or in a browser. The bottom will stick to the bottom of the screen if the page content is less than the overall height of the browser window, or it will scroll off to the bottom of the page otherwise.

Note that this will not get you the elusive grail of a footer that “sticks” to the bottom of the browser screen regardless of the overall page height.

Walter

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

4

Walter/Chuck,

The holy grail is exactly what the linked page offers… It was a question of how to apply the same method to either a page or an action ?

This is probably what I should have linked to as well:

Which shows the effect working on a page.

Regards,

MM

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

5

Nearly…

I have uploaded this file - take a look and you will see it pretty much works as per the example above.

http://mmuller.vndv.com/crud.freeway.zip

If I could get the content within the body section reflow on resize then all would be well.

:slight_smile:

regards,

MM

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

6

Whoops, forgot to mention that most of this was achieved by using extended options within a body style and also the footer itself…

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

7

On 2 Mar 2009, 7:49 pm, mmull wrote:

The holy grail is exactly what the linked page offers… It was a question of how to apply the same method to either a page or an action ?

No, if you squinch up the example page, you will see that the footer does eventually push off the screen if you make the window small enough. What I was referring to as “the grail” is a page where there is a footer always anchored to the bottom of the window, and no matter how much content there is on the page, or how small you make the window, that footer is always in view.

This grail is desperately easy to achieve on standards-compliant browsers – just select position:fixed (Fixed in Window in Freeway parlance). Except that no version of IE except 8 (maybe) will display it as you designed it.

Walter

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

8

True, I hadn’t closed the window up “that” far !

So, in theory my example is closer ‘to the grail’ as it complete destroys the body content whilst resizing the window to almost nothing.

Will keep playing…

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

9

Try what Chuck was suggesting – making an inline nested layout is the only way (in Freeway, in its CSS-positioning model) to make a page where individual elements give way to one another.

If you have laid out your page by drawing objects on the page while the CSS Layout button is on (or by converting drawn elements to layers using the Inspector) then you have created a page where each element believes it is alone on the page. Each drawn element gets its own z-index layer all to itself, and doesn’t “know” about any of the other elements. So if you do something that changes the layout, like resizing text, then each layer plays “every man for himself” and resizes. This almost never looks the way you’d like.

If you’d like to avoid all that, you can simply convert your page to a table layout. Make a new page, make sure the CSS Layout button is off (and reads Table Layout instead), and draw a bunch of HTML boxes willy-nilly. Note that you won’t be able to overlap them – this is what you give up when you don’t use a CSS-positioned layout – but if you resize the text, everything just moves down to suit.

Walter

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