In-line, in-flow, and “box-model” (a spoonerism that appears only in FreewayTalk, and is a mis-use of a very specific term in CSS that means something unrelated) all mean the same thing. The idea is that you insert an HTML element into another HTML element as if it was a single character of text. So instead of seeing this:
<div>asdfg</div>
you might see:
<div>
<div style="position:relative">a</div>
<div style="position:relative">s</div>
<div style="position:relative">d</div>
<div style="position:relative">f</div>
</div>
each of those divs would respect the others, just as individual letters of a headline keep out of each other’s way.
(Just so my example doesn’t send you down too literal a path, mentally, the fact that I put letters in them has nothing to do with this. They could have images, paragraphs of text, headers, forms, whatever – inside them. Also, I have used inline CSS to make my example clearer, and I have specified position: relative even though I don’t need to exactly. The default is position static, which is near as makes no difference identical to position:relative. Also, modern Freeway writes this into the head or the stylesheet, but the style is the important thing to understand. The elements are positioned relative to one another.)
In contrast, when you use Freeway in its usual “draw things where you want them” mode, you are using position:absolute to place the elements at a specific x/y offset from their nearest positioned parent, and a specific set of dimensions. Again, eschewing the way Freeway would write this nowadays, here’s another example:
<div style="position:relative">
<div style="position: absolute; top: 0, left: 0; width: 200px; height: 40px;">a</div>
<div style="position: absolute; top: 0, left: 300px; width: 200px; height: 40px;">s</div>
<div style="position: absolute; top: 50px, left: 0; width: 200px; height: 40px;">d</div>
<div style="position: absolute; top: 50px, left: 300px; width: 200px; height: 40px;">f</div>
</div>
Now that will give you four boxes, spaced like this:
a s
d f
They won’t move, or even know if the other is there. If you crank up your font size, the top row will overlap the bottom row, because they are each on a separate virtual “sheet of glass”, entirely unaware of each other. It makes for pixel-perfect layout, but it does not allow for responsive effects.
Freeway 7 lets you set a separate set of geometry for each element on the page, at each breakpoint you define (for a different browser width). This means that you double or triple or quadruple the amount of CSS you generate, but you end up with a layout that appears to be different at each browser width, all without having to write any other HTML. In-between the defined breakpoints, nothing changes, so you see a set of steps in the layout as you resize the browser, with the elements snapping into their new dimensions and positions as you cross each threshold.
Inline layout allows you to specify these elements in percentage widths, so that they will flex to fill a defined space, which is a different kind of response to browser width changes.
Combine the two techniques, and you get something that not only looks great at the defined widths, but also at any points in between. This is important if you want your layout to really fit the small screen, and you don’t want to go nuts making a breakpoint for every Android phone ever made.
Walter
On Aug 1, 2015, at 10:30 AM, rakeljuice email@hidden wrote:
Walter, does in-flow layout means layers, and does in-line layout means no layers…?
I think I dont reach my death hour yet… Im trying this with the iframe, making buttons as graphics, ans smoll pages with the thext content to make them web yep editable. My first choice was the web yeo menu, but, appart from the layer problem you say (and Im not ready for…) my own problem is than I never could edit the MyMeny item as it says in the manual… for example, I cant take the bullets of, and it doesn take the font, colour, and anything… my css own problem…
I dont know whoy, but always think that an iframe is not a good idea, soy try another thing, but Iin this case, I will go on with it…
But now, my webyep system show the editable icons in grey colour (is not working on Saturday… ), and cant edit any thing, so Im looking why happened this…? before continuing with the iframe.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options