is this possible

Good saturday to you

ok - how can I do this in FW

the whole window moving over the image and having all browser wide.

is it possible? thanks!

Julie


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

most of it I do get - in backdraft. but what I can seem to do is make the items the width of the browser window…

thats my main question and yet keep it floating above the slideshow (background image action)

J
On Jun 22, 2013, at 2:34 PM, Julie Maxwell email@hidden wrote:

Good saturday to you

ok - how can I do this in FW

the whole window moving over the image and having all browser wide.

is it possible? thanks!

http://www.glenrockinn.com

Julie


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

Two important things to start with :

  1. The background slideshow you can accomplish via the Background Supersize action.

  2. On top of that you place the box model layout (set horizontal dimensions of div’s to 100%). The DIV beneath the menu is transparent, while the other DIV’s have a colored background.

You can do all this in Freeway Pro quite easy when you’re familiar with the box model layout.


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

Thank you
On Jun 22, 2013, at 3:27 PM, Richard van Heukelum email@hidden wrote:

Two important things to start with :

  1. The background slideshow you can accomplish via the Background Supersize action
    I did get that part…
  1. On top of that you place the box model layout (set horizontal dimensions of div’s to 100%). The DIV beneath the menu is transparent, while the other DIV’s have a colored background.
    can it be done also in backdraft or is the box model responsive also?

You can do all this in Freeway Pro quite easy when you’re familiar with the box model layout.


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

where do you change the DIVs?
On Jun 22, 2013, at 3:32 PM, Julie Maxwell email@hidden wrote:

  1. On top of that you place the box model layout (set horizontal dimensions of div’s to 100%). The DIV beneath the menu is transparent, while the other DIV’s have a colored background.

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

Click once on an inline or layered HTML box (what Freeway will turn into a DIV) and look in the Inspector. The background color is set with the Color picker in the first tab (mirrored by the Background / Color picker in the Style tab).

Walter

On Jun 22, 2013, at 3:38 PM, Julie Maxwell wrote:

where do you change the DIVs?
On Jun 22, 2013, at 3:32 PM, Julie Maxwell email@hidden wrote:

  1. On top of that you place the box model layout (set horizontal dimensions of div’s to 100%). The DIV beneath the menu is transparent, while the other DIV’s have a colored background.

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

Walk before you run. You can make a responsive version of this, but first understand the layout structure in a fixed-width design.

Walter

On Jun 22, 2013, at 3:32 PM, Julie Maxwell wrote:

can it be done also in backdraft or is the box model responsive also?


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

ok…

so best beginning steps to this are? just so we / I am on the same page

On Jun 22, 2013, at 3:43 PM, Walter Lee Davis email@hidden wrote:

Walk before you run. You can make a responsive version of this, but first understand the layout structure in a fixed-width design.

Walter

On Jun 22, 2013, at 3:32 PM, Julie Maxwell wrote:

can it be done also in backdraft or is the box model responsive also?


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

Start with a completely blank new document. Don’t start from any template. Apply Background Supersizer to the first page, and configure it, and make sure it works the way you expect it to. (Don’t put anything else on the page yet.) Make sure your page is set to Align:none. When you preview in a browser, you should see your image(s) completely filling the screen, no matter what size you make that screen.

Draw an HTML box where you want to place the header, and set it to position:Fixed in Window, 100% width, 0, 0 top left. Fill it with a color so it is opaque, and preview in a browser. It should look like your example (minus the tasteful header graphic).

Now draw another HTML box position:absolute and 100% width beginning at a point just below your main menu. Double-click inside this box and choose Insert / HTML Item from the main menu. Click on this inline element and use the Inspector to set its width to 100%. Give it a background color. Double-click below it to get a new text cursor, and type some text. At the end of this text, choose Insert / HTML item again. Repeat these steps until you have all of your content “layers”. Click once on your header and choose Item / Bring to Front from the main menu.

Now you should have a structure like this:

+--------------------+
|    fixed header    |
+--------------------+
+--------------------+
|   wrapper          |
| +----------------+ |
| | inline div     | |
| |                | |
| +----------------+ |
| some text          |
| +----------------+ |
| | inline div     | |
| |                | |
| +----------------+ |
| more text          |
| +----------------+ |
| | inline div     | |
| |                | |
| +----------------+ |
| even more text     |
+--------------------+

(if you’re looking at this in Mail, it will look fairly messed up, please look on the Web for a properly-formatted ASCII-gram of what I mean.)

The Background Supersizer will put a complete background behind everything, and it will hold absolutely still while you scroll. The inline content inside a position:absolute wrapper will scroll beneath the fixed header. Anywhere there is a solid background foreground element, it will obscure the background image, and anywhere you have only text (or a DIV with no background defined) you will see through that foreground element to the background.

It’s a very simple layout trick once you have your head wrapped around it.

Now to make the “page” appear centered within the alternating stripes and clear bits, you can insert a third layer of inline DIV within the second-level elements (labeled inline div in the ASCII-gram). Set this item to Align: center and give it a fixed width. Then put your actual content inside that, not just inline within the second-level div. This will give you a 100% width to fill the browser, but a fixed content width (so you don’t end up with ultra-wide lines of text which nobody can read).

Walter

On Jun 22, 2013, at 3:59 PM, Julie Maxwell wrote:

ok…

so best beginning steps to this are? just so we / I am on the same page

On Jun 22, 2013, at 3:43 PM, Walter Lee Davis email@hidden wrote:

Walk before you run. You can make a responsive version of this, but first understand the layout structure in a fixed-width design.

Walter

On Jun 22, 2013, at 3:32 PM, Julie Maxwell wrote:

can it be done also in backdraft or is the box model responsive also?


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

I’m sorry Walther, just reading the responses I’m feeling that I’ve left you with this :S


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

Richard, I appreciate your input as well as Walters - both are very valuable thank you.

J
On Jun 22, 2013, at 5:45 PM, Richard van Heukelum email@hidden wrote:

I’m sorry Walther, just reading the responses I’m feeling that I’ve left you with this :S


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

Julie,

I have a tutorial on full width elements in Backdraft here, and a screencast here.

That, and the wealth of information from Walter, should get you started.


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

Thank you Caleb!

Sent from my iPhone

On Jun 22, 2013, at 9:04 PM, Caleb Grove email@hidden wrote:

Julie,

I have a tutorial on full width elements in Backdraft here, and a screencast here.

That, and the wealth of information from Walter, should get you started.


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

Interesting design - I like it so I started to wrap this in an example/template/whatever (a lot of more work to do - but…):

http://kimmich-dm.de/box-in-box-model/pizza-template.html

Some notes for the protocol:

  1. Not to do without a basic knowledge of inline construction/floats/margins/paddings/position relative/absolute etc.

  2. Do Background Supersizer as the VERY LAST step (or choose an alternative), cause it’s one of those actions, that forces Freeway to upload ever and ever again (this sucks). Furthermore it leaves a gap to the right I can’t explain for the moment.

  3. Fixed Header? For what purpose - or do I miss here something?

  4. Another interesting point (just for info):

The maximum value for Margin in inspector is exactly 256px :-). For more if necessary choose the item extended dialog (and it was necessary here).

  1. Cool stuff: Negative Margins (for overlapping) even works in Freeway workspace (never expected this).

So to answer the initial question:

More or less - YESSSS!

Now the less:

The BG stuff in the original example is not random, it can be steered by left and right arrows. This is something I have to mind about or seek for another example which can even accomplish this.

Cheers

Thomas


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