[Pro] Image Tiling

Freeway
21

You’ll have to use inline at least partially. In order to make an
element center in the page without using the Freeway Inspector to
center the entire page, you have to leave the page alignment at none
(which means the page will be as wide as its widest element in the
browser, and will by default align left).

If you try this very simple layout, you will see what I’m talking about.

  1. New page, Alignment: none.
  2. Draw an HTML box at the top of the page from left to right, about
    200px tall. Give it a color, think of it as your header. Set the width
    to 100%
  3. Draw another colored HTML box as your footer, also 100% width.
  4. Preview in a browser. Note how it stretches to fill the screen.

Now to add the middle part.

  1. Draw a third box in between the first two, also 100% width, but no
    background.
  2. Double-click inside that box and choose Insert / HTML Item from the
    main menu.
  3. Drag that new box out to fill the box you drew in the first step,
    and use the Inspector to set its Margin to Auto.
  4. Give this inner box a color so you can see it.
  5. Preview again, and stretch the browser around to see the effect.

So finally, if you wanted to stay out of the whole Inline/Box Model
wasteland at this point, you could simply draw all of your page
elements as positioned children[1] of the center colored box. This
would cause them to center in the browser, but maintain their relative
position to one another and their nearest parent. That center box
doesn’t have to stay colored for the trick to work, but you could if
you want to. You can also use background images, suitably tiled,
instead of the color fills that make this quick demo look like
something other than a blank screen.

What you give up by not going all the way into a true Inline layout is
the ability of the layout to stretch and grow when your visitors mess
with text sizes or zoom levels in their (non-Safari) browsers. So
there’s still a lot of value in learning inline construction and using
it, but if you want to take it one step at a time, you can do this
limited inline layout first.

Walter

  1. To position an element as a child of another element, click first
    on the item you wish to be the parent, then choose the HTML tool and
    draw your child element directly over the parent. You must begin and
    end the drag that draws the child entirely over the parent. Once you
    begin to draw, you will notice that the cursor becomes a [ + ] shape,
    and the edges of the parent element glow blue to indicate you are
    targeting that element with your child. You can also change the
    heritage of elements by dragging their names around in the site panel
    (after expanding the hierarchy by clicking on the little triangle to
    the left of the page name in the list).

On Apr 21, 2010, at 10:03 AM, Colm Tuite wrote:

Yeah I guess that’s what I need. I was wondering, I tried resizing
to 100% but my html box just reduced to 30px (the width of my
background).

I’ll have a look at that thread. Am I right in saying this page
would have been made with inline construction, since you have a full
width header and footer?

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

22

Thanks Walter your a genius!

So finally, if I want to add a logo or an image or a carousel etc to my header, or rollover buttons, I guess I have to do the inline trick with the header HTML box too? And the same goes for the footer if I want to add text to that?

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

23

If you followed my example exactly, then you would double-click inside
the header HTML box, insert another HTML box and set it to the width
of your header, set its margin to Auto, and build your header layout
on top of that inline box, just as you did the middle part of the
page. If you built your header using the main page background image,
then you would still need to construct these HTML boxes in order to
center your header layout over the top of your page.

Walter

On Apr 23, 2010, at 5:28 AM, Colm Tuite wrote:

Thanks Walter your a genius!

So finally, if I want to add a logo or an image or a carousel etc to
my header, or rollover buttons, I guess I have to do the inline
trick with the header HTML box too? And the same goes for the footer
if I want to add text to that?

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

24

Ok, I have everything working fine, apart from the footer. How do I set the footer so it is at the bottom of the website?

When I set the bottom inset to 0px, the footer is at the bottom of the screen, but when I scroll down it stays where it was.

If I set it to “fixed in window” it will stick to the bottom of the screen all the time when I scroll.

But how do I set it so its always at the bottom of the website, so I have to scroll down to see it? Like this page on the freeway site?

Thanks for all you help Walt!

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

25

I think you’ll find that the Freewaytalk site doesn’t work quite that
way. The footer is just HTML elements centered over the document’s
background color. The body of the page is contained in a fixed-width
DIV centered in a 100%-width DIV. That 100% DIV makes the white
background, and has a bottom border that forms the top of the footer.
This is a basic inline or “box-model” layout, in that all of the
elements on the page exist in the same plane, so they can push each
other around when they grow or shrink.

Walter

On May 7, 2010, at 9:43 AM, Colm Tuite wrote:

Ok, I have everything working fine, apart from the footer. How do I
set the footer so it is at the bottom of the website?

When I set the bottom inset to 0px, the footer is at the bottom of
the screen, but when I scroll down it stays where it was.

If I set it to “fixed in window” it will stick to the bottom of the
screen all the time when I scroll.

But how do I set it so its always at the bottom of the website, so I
have to scroll down to see it? Like this page on the freeway site?

Thanks for all you help Walt!

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

26

Oh I see! I have a 400px x 100% HTML item with a gradient image for my header. In that I have an HTML item set to auto margin, in which I have my header elements.

I have done the same for my body content, except instead of a gradient background it’s just set to white.

I have the same for my footer, its a gradient image with an HTML item in it set to auto margin, in which I have my footer elements. But how do I set this footer to look like the Freeway footer, so its always at the bottom of the website?

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

27

The trick is in how you nest these elements. They need to be inline
children of a common parent item. That parent is set to 100% width,
and the children are set to a fixed width, with margin: auto. Because
they are in the same parent, and are all inline elements, they can
push each other away from one another.

body (dark background)
	outer div (100% width, light background)
		header (fixed width, margin auto)
		body container (fixed width, margin auto)
		footer (100% width, centered contents, dark background)

The footer is pushed down by the other contents of the page, since
it’s just another inline element in the outer div. The background of
the footer and the main page match one another at the edges, so the
footer will always be at the bottom of the page contents, and if the
page should turn out to be shorter than the window, you won’t notice
the bottom of the footer – because it “dies” into the solid page
background color.

Walter

On May 7, 2010, at 10:37 AM, Colm Tuite wrote:

Oh I see! I have a 400px x 100% HTML item with a gradient image for
my header. In that I have an HTML item set to auto margin, in which
I have my header elements.

I have done the same for my body content, except instead of a
gradient background it’s just set to white.

I have the same for my footer, its a gradient image with an HTML
item in it set to auto margin, in which I have my footer elements.
But how do I set this footer to look like the Freeway footer, so its
always at the bottom of the website?

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

28

Excuse my ignorance, but I’m lost!

Basically I want my site to look like this freewaytalk site, except the footer will be a gradient.

At the moment I started with the default background freeway gives you, I resized it to 900px x 1300px, left it with no colour and I inserted my header, body and footer HTML items. Inside each HTML item I inserted another HTML item, dragged this to the size of the HTML item its nested in, and set the margin to auto. Inside of these HTML items I built my page.

I guess I did something wrong? Should have used the main page background for my header?

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

29

Here’s a quick demo. Naturally, none of the dynamic goodies are there,
but the basic layout took me all of five minutes in Freeway. (I wish I
had used that when I hand-coded the site!)

http://scripty.walterdavisstudio.com/fwtalk

You may download the project folder here: http://scripty.walterdavisstudio.com/fwtalk/fwtalk.zip

Walter

On May 7, 2010, at 11:25 AM, Colm Tuite wrote:

Excuse my ignorance, but I’m lost!

Basically I want my site to look like this freewaytalk site, except
the footer will be a gradient.

At the moment I started with the default background freeway gives
you, I resized it to 900px x 1300px, left it with no colour and I
inserted my header, body and footer HTML items. Inside each HTML
item I inserted another HTML item, dragged this to the size of the
HTML item its nested in, and set the margin to auto. Inside of these
HTML items I built my page.

I guess I did something wrong? Should have used the main page
background for my header?

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

30

Oh, just one thing – I forgot to uncheck the height property on the
right-hand content area, you’ll need to do that or your page won’t
grow vertically.

Walter

On May 7, 2010, at 12:02 PM, Walter Lee Davis wrote:

Here’s a quick demo. Naturally, none of the dynamic goodies are
there, but the basic layout took me all of five minutes in Freeway.
(I wish I had used that when I hand-coded the site!)

FreewayTalk

You may download the project folder here: http://scripty.walterdavisstudio.com/fwtalk/fwtalk.zip

Walter

On May 7, 2010, at 11:25 AM, Colm Tuite wrote:

Excuse my ignorance, but I’m lost!

Basically I want my site to look like this freewaytalk site, except
the footer will be a gradient.

At the moment I started with the default background freeway gives
you, I resized it to 900px x 1300px, left it with no colour and I
inserted my header, body and footer HTML items. Inside each HTML
item I inserted another HTML item, dragged this to the size of the
HTML item its nested in, and set the margin to auto. Inside of
these HTML items I built my page.

I guess I did something wrong? Should have used the main page
background for my header?

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

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

31

If you download the zip file (and I recommend you do) take a look at
the Site pane, which I switched over to Page view. Click on each item
listed, and then look in the design view and the Inspector to see how
they are structured and configured. The same background image that is
set on the

Some elements are floated, and others are not, almost all have their
height turned off (by clicking on the little up/down arrow icon left
of that field in the Inspector). Each thing that is adjusted away from
the Freeway default is done so for a reason.

Walter

On May 7, 2010, at 12:12 PM, Walter Lee Davis wrote:

Oh, just one thing – I forgot to uncheck the height property on the
right-hand content area, you’ll need to do that or your page won’t
grow vertically.

Walter

On May 7, 2010, at 12:02 PM, Walter Lee Davis wrote:

Here’s a quick demo. Naturally, none of the dynamic goodies are
there, but the basic layout took me all of five minutes in Freeway.
(I wish I had used that when I hand-coded the site!)

FreewayTalk

You may download the project folder here: http://scripty.walterdavisstudio.com/fwtalk/fwtalk.zip

Walter

On May 7, 2010, at 11:25 AM, Colm Tuite wrote:

Excuse my ignorance, but I’m lost!

Basically I want my site to look like this freewaytalk site,
except the footer will be a gradient.

At the moment I started with the default background freeway gives
you, I resized it to 900px x 1300px, left it with no colour and I
inserted my header, body and footer HTML items. Inside each HTML
item I inserted another HTML item, dragged this to the size of the
HTML item its nested in, and set the margin to auto. Inside of
these HTML items I built my page.

I guess I did something wrong? Should have used the main page
background for my header?

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

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

32

Grrr. Hit. Send. Too. Early. Tarzan no like computer.

On May 7, 2010, at 12:38 PM, Walter Lee Davis wrote:

If you download the zip file (and I recommend you do) take a look at
the Site pane, which I switched over to Page view. Click on each
item listed, and then look in the design view and the Inspector to
see how they are structured and configured. The same background
image that is set on the

page body is also set on the outer, 100%-width container. I’m not sure
they are both needed, so you could experiment with removing the one
from the page body.

Walter

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

33

Thanks for that Walt! I think I have it all figured out now. Thanks for the time you took to show me the example.

There is one problem this method has presented though. Up until now I have always made rollovers as children of nothing and dragged them to where I wanted them positioned, because for some reason if it was a child of something it never seemed to work. But now I have to make it a child of my header inline box or it won’t be positioned correctly, and my rollovers don’t work.

Anyone know why this is?

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