[Pro] flexible image action

Freeway
1

Hi, I am trying to get two simple lines to stretch the width of any browser and have downloaded the flexible image action from the actions forge but cannot get it to work. I thought it would be a simple action which you applied to a layered graphic and set the width to 100%. Unfortunately when I preview in safari, opera, firefox and chrome it doesn’t work in any of them, nor in FW’s internal browser?
Is anyone out there using this action successfully and could help me getting it to work…please :o)

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

2

Could you post a link to your page? You don’t need an Action to do
this, but you do have to think about something basic here. 100% means
100% of the element’s parent. In the case of anything on the page in
Freeway, that’s going to be at minimum the outermost div, always given
the ID ‘PageDiv’.

If your page is set to Align none, then anything that you draw as an
HTML box, give a width of 100% in the Inspector, and give a
background color to will appear to stretch from one side of the
browser to the other. That’s because left to itself, a DIV tag (the
PageDiv in this case) has 100% width, so it expands to fill the BODY,
which has 100% width, and so on to the browser window.

But the moment that you center or otherwise align the page, the
PageDiv has to be given a width so that it can be positioned relative
to the BODY tag. And once you give the PageDiv a width of any kind,
the widest that any of its children can become is that width. So 100%
of 800px is 800px.

Walter

On Aug 13, 2011, at 4:58 AM, gfel wrote:

Hi, I am trying to get two simple lines to stretch the width of any
browser

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

3

Hi Walter
Thanks for your help, I have removed the center align from the page but it has not resolved the issue, here is a link to a very basic page with the problem, thanks:

http://www.brunelharmony.org.uk/

If I remove the centre align, but want the rest of the items on the page to be centered how do I achieve this? Do I have to manually align them all?

Thanks in advance.

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

4

If you want parts of the page to be centered, and other parts to be
full-width, you will need to create an inline layout. I have an
example document you can download here:

http://scripty.walterdavisstudio.com/fwtalk/freewaytalk.freeway.zip

This document created this page:

http://scripty.walterdavisstudio.com/fwtalk

When I built the FreewayTalk site, I hand-coded the template – I was
building everything in PHP/MySQL and it just seemed easier that way.
But when someone asked me how to make a similar layout in Freeway, I
was astounded at how fast it was to lay out there (given how long I
struggled with floats and clears in CSSEdit when building it the first
time).

Walter

On Aug 13, 2011, at 9:13 AM, gfel wrote:

Hi Walter
Thanks for your help, I have removed the center align from the page
but it has not resolved the issue, here is a link to a very basic
page with the problem, thanks:

http://www.brunelharmony.org.uk/

If I remove the centre align, but want the rest of the items on the
page to be centered how do I achieve this? Do I have to manually
align them all?

Thanks in advance.

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

5

Hi Walter
Thanks for pointing me in the right direction but I am still confused.
Is an inline layout the same as a Relative Page layout as described in the FW User Guide?
The Freeway Talk site you have linked to is the look I am trying to achieve but it seems very complicated for something which looks so simple.
Is there a idiot step by step guide, for setting this page up? The FW user guide is not very comprehensive? How do I set headers and footers?
I am sure this is very easy and I am just being very stupid :o)
Thanks again

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

6

On Aug 13, 2011, at 10:48 AM, gfel wrote:

Hi Walter
Thanks for pointing me in the right direction but I am still confused.
Is an inline layout the same as a Relative Page layout as described
in the FW User Guide?

RPL can generate an inline layout, but for the optimal control over
the result, you’re either going to want to know how the layout works,
or at least have a clue about what Freeway is doing so you can
influence the result. Knowing how to construct an inline layout by
hand is a critical step in your learning as a Web designer. Dan Jasker
has a lot of great screencasts that walk through this process. He
refers to these as “box model” layouts, which is something of a
misnomer. When you hear “box model”, think “inline”. They are all
linked up at http://freewaycast.com

The Freeway Talk site you have linked to is the look I am trying to
achieve but it seems very complicated for something which looks so
simple.
Is there a idiot step by step guide, for setting this page up? The
FW user guide is not very comprehensive? How do I set headers and
footers?

Freeway is basically a Desktop Publishing application that generates
HTML instead of PostScript. The notions of headers and footers are
somewhat orthogonal to that ideal, since a header in DTP is simply an
element placed in a certain position on the page – it doesn’t have
any special structural importance or semantic weight relative to the
other elements on that page.

Try this, in an otherwise entirely empty page in Freeway:

  1. Make sure the page is set to Align:none.
  2. Double-click in the middle of the screen. You should see a text
    cursor in the top-left corner of the page.
  3. From the main menu, choose Insert / HTML Item. Click once on the
    100px square that appears at the top-left of the page.
  4. In the Inspector, set the Width to 100%. Set the background color
    to white. You should now have a stripe across the top of the screen.
    If you set the page background to a color, this will be easier to see.
  5. Repeat this process, except this time double-click into the first
    inline box you created. Click on the nested 100px square.
  6. Set the width of this innermost box to 700px, and set its Align to
    centered (this sets margin:auto on left and right sides, which is the
    CSS equivalent of “center”).
  7. Double-click inside the innermost box and type some text, so you
    can see where the left of this box lives.

Preview, and you should see a white stripe with a bit of text that
respects the browser resize. You can’t make the window narrower than
700px – that’s your fixed inner width – but the white stripe expands
and contracts without showing scrollbars no matter how wide you make
your screen.

Walter

I am sure this is very easy and I am just being very stupid :o)
Thanks again

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

7

That is great, this is really helpful and I am getting the hang of how it works now.

On the innermost box from your instructions above, I am not seeing the option to set the align to center? I only have overflow, float & clear options?

AND just one other question:
Can you import graphic items into this layout that will stretch across the width? When I try this it doesn’t allow you to change the width to 100%? It reverts to pt?

Thanks so very much, wish the FW user guide was this helpful ;o)

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

8

On Aug 13, 2011, at 12:04 PM, gfel wrote:

That is great, this is really helpful and I am getting the hang of
how it works now.

On the innermost box from your instructions above, I am not seeing
the option to set the align to center? I only have overflow, float
& clear options?

Check the Margin settings on the innermost box.

AND just one other question:
Can you import graphic items into this layout that will stretch
across the width? When I try this it doesn’t allow you to change
the width to 100%? It reverts to pt?

Images can be set to stretch out (that’s what the original Action you
were using is meant to do) but the result rarely looks like anything
nice. The document I linked to earlier uses a tiling graphic
background to do the same thing. That blue stripe across the top is a
25px-wide slice that tiles horizontally, so no matter how wide the
browser is stretched, you never see a gap or seam. The graphical
header image is a foreground image placed above the tiling background,
and since it was sliced from the same Photoshop document as the tiling
background image, there’s no possibility of mis-match.

Walter

Thanks so very much, wish the FW user guide was this helpful ;o)

The guide is very good at outlining what all the tools are and how you
use them. But it’s nearly impossible for a book to anticipate all the
ideas that people will want to translate into HTML. It’s the
difference between alphabet and literature.

I’ve been asked – many times – to write a book about Freeway. The
simple answer is I can’t do that. My brain doesn’t work that way, and
I’m not good enough at planning to come up with the outline to fill in
with answers. What I am very good at is responding to questions. I
have a copious memory, excellent recall, and good associative
imagination (this works like this over here, maybe it will do
something similar in this entirely unrelated area…). And I can type
really fast.

So ask away.

Walter

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

9

Thanks, when I add the action it does now work…yippee! :o) I will have a play around with all your have taught me and see how I go, and will come back to you if I get stuck…You have been very very VERY helpful, THANK YOU! :o)

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

10

Just to be clear, it was working before – it was just giving you 100%
of the parent container, which wasn’t as wide as the browser window.

Walter

On Aug 13, 2011, at 12:33 PM, gfel wrote:

Thanks, when I add the action it does now work…yippee! :o) I will
have a play around with all your have taught me and see how I go,
and will come back to you if I get stuck…You have been very very
VERY helpful, THANK YOU! :o)

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

11

Thanks, can I ask you about html items, how do you chose which type you want to insert? They all seem to go in as the css type with dimensions, overflow and float options? How do I insert the html item with the placement on the page adjustment options? I have just copied and pasted my css menu into the inline html box but cannot move it around or align it to the center? When I adjust the float to right, it goes right over to the right side of the hole browser rather than the main 900px window? I am not seeing the adjustment options you normally see?
Thanks

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