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