[Pro] Embarrassed to ask about In line Layout... but

As some of you know i am a relative newbee at this, but i would like to think that i am putting the time in to learn the Freeway system including reading all the relevant Knowledge based articles and also searching through the threads on the Forum,… but i am really struggling with the In Line layout. i have been through various articles and have downloaded Walters Demo (of some years back…thanks Walter)… but i am still having trouble. and would really appreciate some kindly help from the forum.

I have used Walter’s demo layout based on this web site as the basis for this thread.

I have taken the demo from Walter and just embedded the info of a new site i am working on. and this can be seen from the link used on this thread.

I have then tried to implement the same structure based on Walters demo, but created 100% by my own efforts and that;s were the issues are??? if you take a look at the following link, you will see what happens when i use my implementation…

http://www.reenoserve.com/newsitenotworking/

All i am trying to do is to create a page that centres automatically within the browser page, as you can see my attempts seem to Float left and Float right… but the elements of my page are (i believe) exactly the same as those within Walters demo.

Please what am i doing wrong??

Thank You for your patience…

John

http://www.reenoserve.com/newsiteworking/


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

John,

This is just a late night thought but when you started the page you would have it set-up as page align center, the size required ie. 960px wide by whatever depth. Ok.

Did you then double click into this ‘blank’ and insert an html item ? Re-size html item to width of your page and then start to add the inline elements, header, footer columns etc. into that base and containing div ??

If you wished to have a header and footer that will be a band across the top and bottom there’s a slightly different principal. That’s when you would set width of base div to 100% and page align none. Insert another html item and set to 100% width > in that div insert another which you can set as a page width ie 960px and with that third div you would set its margin to Center Horizontally… etc…

First things first though.

s


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

This is just a late night thought but when you started the page you would have it set-up as page align center, the size required ie. 960px wide by whatever depth. Ok.

Page Align was None

Did you then double click into this ‘blank’ and insert an html item ? Re-size html item to width of your page and then start to add the inline elements, header, footer columns etc. into that base and containing div ??

I used the width as 100% and followed Walters suggestions on Margin, Float and clear etc…

Thank you for your inputs.

John


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

Well, then go back and with nothing selected use the Page Inspector to set
the page align to center and page width to 960px. Then Preview and see if
that helps.


Ernie Simpson

On Fri, Sep 14, 2012 at 8:10 PM, ejw email@hidden wrote:

Page Align was None

I used the width as 100% and followed Walters suggestions on Margin,
Float and clear etc…


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

OK, But in all the threads i have read it clearly indicates that page Align should be None, and in Walter’s demo it is also None.

So i must have missed something …again…

Thanks for the response.

John


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

In fairness, I’ve not re-read Walter’s posts, or looked at his files.

I HAVE looked at the code FWP produced for your page, and the relevant part
is a structure called “PageDiv” which FWP outputs based on your chosen page
settings. Everything on your page is a child element of that PageDiv, and
so takes its cues on how to behave in the browser window based on that
relationship. Try the simple fix I previously suggested and see if the
result is what you want.

All this is a learning experience for you, and you may find it confusing.
That is normal, so don’t push too hard. Keep exposing yourself to new ideas
and don’t think you have to learn A before B. You’ll find there is no one
way to do things, and right or wrong may depend more on why and not how.

Now go on and make that change to your Page Inspector setting and
re-output, then tell us what you think… better, or not?

Best,

Ernie Simpson

On Sat, Sep 15, 2012 at 2:34 AM, ejw email@hidden wrote:

OK, But in all the threads i have read it clearly indicates that page
Align should be None, and in Walter’s demo it is also None.

So i must have missed something …again…

Thanks for the response.

John


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

Ernie,

Yes the suggestion seems to fix the problem. Thank You.

But still interested to appreciate why the:-

http://www.reenoserve.com/newsiteworking/

version, which works OK as i want and is Walters code with my content and the page align is None???


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

Yes the suggestion seems to fix the problem. Thank You.
But still interested to appreciate why the:-
reenoserve.com - reenoserve Resources and Information.
version, which works OK as i want and is Walters code with my content and the page align is None???

I suspect Walter’s version is truer to my second example. But as Ernie say’s there are different approaches.

It’s taken me a while to get the hang of it and I still get divs flicking to a different position occasionally, because I haven’t set the align properly or unchecked the ‘height can shrink’, expanded the width etc. Now that I’ve done several ‘stable’ versions I can use those as a template framework for future sites.

s


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

As I have tried to say before, I do not know what you intended to achieve, just that you were unhappy with what you had achieved.

Here’s an explanation of what reenoserve.com - reenoserve Resources and Information. is doing. (For our purposes, let’s agree that an html item in Freeway Pro is the same as an html div in page code)

The Freeway Pro page is indeed set to page align none, as can be seen in how FWP creates the automatic root html item - aka, PageDiv:

<div id="PageDiv" style="position:relative; min-height:100%">

So this Mother of All Divs is free to be as wide and tall as the browser window, and unless specified otherwise, so are all of its children. The first user div created child was named “outerBox”:

<div id="outerBox" class="f-x2" style="position:absolute; left:0px; top:0px; width:100%; z-index:1; background-color:#fff; overflow:visible">
  • the position of this div is absolute (with reference to the browser window)
  • starts on the left at 0px from the left edge of the browser window
  • starts 0px from the top of the browser window
  • is 100% of the full width of the browser window
  • is one layer above the PageDiv div
  • has a background color of white
  • renders visible any contents that overflow
  • because it has no height set, will shrink vertically to the size of its content.

The next div child is “innerBox”, and is completely different:

<div id="innerBox" class="f-x2" style="position:relative; width:770px; margin:auto; overflow:visible">
  • the position is relative to the containing div (outerBox)
  • has left/right top/bottom position, so is left to react to the container div
  • has a defined width, which restricts is freedom to be fluid (770px)
  • margin is the space around an html object. With a margin of auto, or a left/right margin of auto, the browser will provide equal space to either left or right side of the div beyond the 770px reserved for its width, essentially ‘centering’ the div.
  • contents that overflow will be rendered visibly
  • no height setting means the div will shrink vertically to match the content size

All the main content is inside the innerBox div, so the relative or floated positioning of this content is constrained by the container div - innerBox. All content outside of innerBox is free to fill the entire browser window while the innerBox content must be constrained by its width and centered position. This is why the “footer” div is free to be as wide as the browser window.

<div id="footer" class="f-x3" style="position:relative; float:left; width:100%; height:80px; clear:both; margin-top:15px; background-color:#dfdfdf; background-image:url(Resources/footer.png); background-repeat:repeat-x; background-position:left top; border-top:solid #999 1px; overflow:visible">
  • the position is relative to its parent, which in this case is “outerBox” which you remember is wide as the browser permits
  • it is floated left, which is completely unnecessary as its width is already 100%. The width could also have been undefined, or the left and right positions set to 0px
  • clear is set to both, which guarantees no conflicts with items floated above
  • other than a defined height, the rest is decoration

There you have it, hopefully, a long and thorough explanation of what is actually happening… that inline html items (relatively positioned items) are constrained by the items which contain them.

On 15 Sep 2012, 9:01 am, ejw wrote:

Ernie,

Yes the suggestion seems to fix the problem. Thank You.

But still interested to appreciate why the:-

reenoserve.com - reenoserve Resources and Information.

version, which works OK as i want and is Walters code with my content and the page align is None???


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

Ernie,

Firstly, thank you for taking the time to respond so comprehensively, it is invaluable information for beginners like myself…

There is a considerable amount of information for me to digest in this response and i will not pretend to understand 100% of what you are saying. I intend to “take it apart” in a more leisurely time frame.

However in response to your opening statement …

…As I have tried to say before, I do not know what you intended to achieve, just that you were unhappy with what you had achieved…

What i was trying to do is to create a page that emulates the FW talk site i.e. full browser width header and footer with page content including the Navigation menu centered in the browser window…

Ernie once again thank your for taking the time to explain.

John


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