[Pro] moveable full width footer?

It’s probably a ridiculously simple question, but I’ve not done it before! I know how to create the header but how do I achieve a full width footer that moves down the page when zoomed as shown here: http://www.clydepaperandprint.com/index.html


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

Nothing moves at the base of my browser window using Safari.
Trev

On 12 May 2011, at 10:03, neil.west1 wrote:

It’s probably a ridiculously simple question, but I’ve not done it
before! I know how to create the header but how do I achieve a full
width footer that moves down the page when zoomed as shown here: http://www.clydepaperandprint.com/index.html


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

Go to your view menu, set ‘Zoom text only’ then zoom using cmd +. The text will enlarge and push the footer (horizontal blue bar) down the page.

If the blue bar was only the width of the window, I would know how to create it, but it runs the full width of the screen, and I don’t!


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

Make your page background the blue color (use the Inspector). Then
draw an HTML box the full width of the page, set its width to 100%,
and its background to white. To center your “page” inside this white
area, double-click inside it, use the main menu to Insert / HTML Item,
drag that out to your desired fixed width, set its margin to Auto (to
center it) and then build the rest of your page within that centered
box. Naturally, you have to use inline construction technique here so
the height can grow without overruns.

Other caveats: The page must be set to Align: None (this gets you a
true full-browser width). Once you have added content to the boxes you
drew earlier, you must remove the height attribute from them to make
them stretchy. Work from the inner-most to the outer-most when you do
this last step.

Inline construction is fiddly, which is why it isn’t the default in
Freeway. But it can give you powerful effects like this with minimal
code and work-arounds. The RPL Action is a way to bridge the ease of
positioned layouts with the power of inline layouts, but as far as I
know, there’s no way to use it in this precise construction. Joe
Billings, if you’re listening and know a way, please point it out.

Walter

On May 12, 2011, at 6:15 AM, neil.west1 wrote:

Go to your view menu, set ‘Zoom text only’ then zoom using cmd +.
The text will enlarge and push the footer (horizontal blue bar) down
the page.

If the blue bar was only the width of the window, I would know how
to create it, but it runs the full width of the screen, and I don’t!


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


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

Thanks Walt, I’ll try that now.


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

On 12 May 2011, 11:02 am, waltd wrote:

Make your page background the blue color (use the Inspector). Then
draw an HTML box the full width of the page, set its width to 100%,
and its background to white. To center your “page” inside this white
area, double-click inside it, use the main menu to Insert / HTML Item,
drag that out to your desired fixed width, set its margin to Auto (to
center it) and then build the rest of your page within that centered
box. Naturally, you have to use inline construction technique here so
the height can grow without overruns.

I’m having real fun with this. I’ve created the site within the white box but I’m not having much success with getting a fading slideshow (or any element) to appear ‘above’ the white box i.e. at the top of the page without causing havoc on the rest of the page. I’ve had various results including the header and main body appearing side by side, or the header ranged left and the main body centred, but I can’t get them both centred and one on above the other.

How would you set it up?


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

I am using the same page set up as Walt D suggests above. I am having problems when I put things into the fixed width header (as I say in my post posted a few moments ago (called just PRO -I forgot to add a title for my post) I am interested in the replies you get as the problems re havoc may be linked.


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

You can have as many full-width “slices” across the middle of the page
as you need. So if you need a separate area above the white area that
can hold a fading slideshow, just layer another 100%-width box above
the first one, and push that first one down the page a bit. Unless
your top “slice” needs to also have a flexible height, you don’t need
to do anything more complex than this.

But if you need both the top and middle “slices” to be full-width AND
flexible-height, you will need to move up another layer, and insert
those two slices as inline children of the PageDiv. To do this, click
on both full-width HTML boxes so they are both showing their 8 handles
(selected for moving) and cut to the clipboard with Command -X.
Everything should now be gone from your page. Next, double-click on
the page itself so you see a flashing text cursor in the top-left
corner. Paste.

Your two layers should come in as direct inline children of the page,
hopefully in the order you expected. Now, make sure that the content
in your top slice is also build in an inline layout style (pasted in
with the flashing text cursor, not as positioned children, which you
would get if you merely drew the child elements over their parent box,
or moved them there with the spacebar trick).

Once that’s all confirmed, you can disable the height attribute for
all of these nested boxes using the Inspector so that they will flex
vertically and their content won’t overflow the bounds defined by
their CSS height attribute.

Walter

On May 20, 2011, at 9:58 AM, neil.west1 wrote:

On 12 May 2011, 11:02 am, waltd wrote:

Make your page background the blue color (use the Inspector). Then
draw an HTML box the full width of the page, set its width to 100%,
and its background to white. To center your “page” inside this white
area, double-click inside it, use the main menu to Insert / HTML
Item,
drag that out to your desired fixed width, set its margin to Auto (to
center it) and then build the rest of your page within that centered
box. Naturally, you have to use inline construction technique here so
the height can grow without overruns.

I’m having real fun with this. I’ve created the site within the
white box but I’m not having much success with getting a fading
slideshow (or any element) to appear ‘above’ the white box i.e. at
the top of the page without causing havoc on the rest of the page.
I’ve had various results including the header and main body
appearing side by side, or the header ranged left and the main body
centred, but I can’t get them both centred and one on above the other.

How would you set it up?


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


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

On 20 May 2011, 2:08 pm, waltd wrote:

You can have as many full-width “slices” across the middle of the page
as you need. So if you need a separate area above the white area that
can hold a fading slideshow, just layer another 100%-width box above
the first one, and push that first one down the page a bit. Unless
your top “slice” needs to also have a flexible height, you don’t need
to do anything more complex than this.

Hmm, I’m obviously still missing something! I’ve pasted the header at the top of the page and set its width to 100% (or unchecked the width of 1000px - if that’s what you mean), I’ve previewed and the header has ranged left whilst the rest of the site is centred. I can get it to range left or right but checking or unchecking the left/right dimensions in the inspector, but how do I get it to stay central?

Neil


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

Well, I can get it to align centre by aligning the page to ‘centre’, but you said above to align the page to ‘none’, though I haven’t yet seen the detriment of doing this.

Neil


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

Scratch that last comment, I can now see that the white box doesn’t fill the full width of the window! Back to square 2!


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

On May 20, 2011, at 10:28 AM, neil.west1 wrote:

Hmm, I’m obviously still missing something! I’ve pasted the header
at the top of the page and set its width to 100% (or unchecked the
width of 1000px - if that’s what you mean), I’ve previewed and the
header has ranged left whilst the rest of the site is centred. I can
get it to range left or right but checking or unchecking the left/
right dimensions in the inspector, but how do I get it to stay
central?

Not quite. You have to actually add 100% (type it in) in the Width
field of the inspector for your full-width element. Then you need to
add an inline element within that outer 100% width element and make
its width whatever pixel or percentage width you want your header to
be. This will be the element that is centered. When you set the Margin
of this second-level nested element to Auto, it will center properly,
while maintaining your full-width white box around it. Just be sure
that both boxes (outer and inner) are set to no height, and they will
flex according to their content.

Walter


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

Hi,

@Walter: just wondered why you always recommend “Auto” to center inner divs. This is causing an unnecessary bottom-margin (small gap) that can be avoid in setting:

margin, adjust and check the tick-box center horizontal cause to my understanding you have just to stick it to the left and right.

If there are more than one divs in one wrapper (one above the other) set them clear to both.

Another request in the thread:

What to do with all the elements that should be situated in those constructions?

They “ALL” need to be in (inline) the latest inner div. To achieve there are two methods:

Inclick (flashing cursor) and Menu Insert what you need or pick up your tool (HTML or graphic) and carefully draw it into the desired div (this should be highlighted blue).

This all is not the usual Freeway construction method that is called Boxmodel (in the latest consequence Full Inline Boxmodel).

From my personal experience it’s not that easy to achieve, so I once took advantage of having a look into Dan Jaskers Screencast “Inline Boxmodel”. The knowledge in there was for me personal “invaluable” , paid me back the 5 bucks a hundreds and a thousand times.

And if I count the trillions of words Walter needed to write down here, either buy Dan’s Screencast or Walter a beer.

Cheers

Thomas


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

Thanks Walter

All sorted now, I had tried actually typing 100% before but it wouldn’t allow it, I’ve tried it now and it works! I must have done something different last time!


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