Children and html or graphic text

Hi the newbie again. So I’m attempting to get my head around the child / parent thing, not too difficult to work out though it’s brought up another area of slight confusion. I draw an html box to be a parent, insert a graphic box and it’s a child and it’s dimensions reference the parent and when the browser is scaled it stays inside the parent box - excellent. Now I want to add some text beneath the graphic and thought this should be in an html box but an html box doesn’t seem to want to be a child ? so I draw a graphic box and put text in it and it works … confused I’m afraid so the second part of this question is what’s the difference between text in an html box and text in a graphic box ?


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

On 1 Jun 2008, at 12:00, Roger Burton wrote:

Hi the newbie again. So I’m attempting to get my head around the
child / parent thing, not too difficult to work out though it’s
brought up another area of slight confusion. I draw an html box to
be a parent, insert a graphic box and it’s a child and it’s
dimensions reference the parent and when the browser is scaled it
stays inside the parent box - excellent. Now I want to add some
text beneath the graphic and thought this should be in an html box
but an html box doesn’t seem to want to be a child ?

In what way does the HTML box not seem to want to be a child? I have
to say here that I’m very confused myself about what a ‘child’ box
is. Whenever I put a box inside a box, I always use the ‘Insert’
menu. I know you can actually draw a box inside a box, but it seems
to be different depending on whether or not the cursor was flashing
in the parent box before you started drawing, so I’ve always used the
‘Insert’ menu, and I’ve always been able to insert either HTML or
graphic items without problems. What problems are you having?

so I draw a graphic box and put text in it and it works …
confused I’m afraid so the second part of this question is what’s
the difference between text in an html box and text in a graphic box ?

If you put text in a graphic box, it’ll become graphic text, and be
output as a GIF; not what you want, unless it’s a big header or
something like that. Do make sure it’s an HTML box.

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

Hi Paul –

Early on in v4 there was much confusion between “parent/child” boxes and “inline” boxes. What you are describing is what we began referring to as an “inline” box in Freeway – actually inserting an html box inside another as if it were “in the line” of text. While what we started calling a “child” box is actually drawn upon another box, within the boundaries of that parent.

I know this is so much semantics, being that “inline” and “child” divs appear exactly the same in the output code… and at that point they are both actually child/parent divs. However, since they are achieved by such different methods in Freeway we began using different terms to describe their construction. It was a communally adopted convenience meant to avoid confusion. At least, that is how I remember it.

The Child/Parent Method in Freeway
When you begin drawing a layered box above another layered box, the borders of the parent (the box underneath) “glow” to show you that you are creating a child of that box. If your child exceeds the dimensions of the parent underneath, then Freeway will stop “glowing” the parent box to indicate a different relationship between the two boxes.

You can also toggle the Site menu to Page view and drag the layered html boxes in the list until they become indented under a another box. The indented boxes in the list are children of the box they are indented under. Note that Ilnine boxes are displayed the same way in this menu, but are not “draggable”.

Inline HTML Boxes in Freeway
Draw a layered box and enter it as if you are going to enter text (you should see a flashing cursor). From the Insert menu, choose HTML Item. This will insert a box in the line where the cursor is. The Inspector menu for such an item is different, as Freeway automatically draws the position of such items with the relative attribute.

Inline divs were first used to create “flexible” page structures. They can be difficult for many users as unpredictable changes in width (padding, margin, borders) can “break” their placement and cause complex structures to “collapse” in such a way as to frustrate the user.

Child divs can be seen in the output code as contained by the Parent’s opening and closing div tags. Child divs can inherit some styling that is aimed at the parent… For example, the tag style “div#parent p { color:red }” will color plain (unstyled) text in the parent div red… but plain text in that div’s children will also be colored red.

I hope this helps.

On Sun, Jun 1, 2008 at 4:27 AM, Paul Bradforth wrote:

In what way does the HTML box not seem to want to be a child? I have
to say here that I’m very confused myself about what a ‘child’ box
is. Whenever I put a box inside a box, I always use the ‘Insert’
menu. I know you can actually draw a box inside a box, but it seems
to be different depending on whether or not the cursor was flashing
in the parent box before you started drawing, so I’ve always used the
‘Insert’ menu, and I’ve always been able to insert either HTML or
graphic items without problems. What problems are you having?


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

That, as ever, the big erns, was so helpful thank you. It has really helped. Regards Roger


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

Easiest way would be to draw a parent Html item. Then insert 2 HTML items into the parent. If you were doing a 2 column you would make your columns first. Then in the top item insert the graphic item and then use the one underneath for the caption. Change both child items to “clear: both.” That should do what you want.


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

On 1 Jun 2008, at 18:47, Ernie Simpson wrote:

The Child/Parent Method in Freeway
When you begin drawing a layered box above another layered box, the
borders of the parent (the box underneath) “glow” to show you that
you are creating a child of that box. If your child exceeds the
dimensions of the parent underneath, then Freeway will stop
“glowing” the parent box to indicate a different relationship
between the two boxes.

You can also toggle the Site menu to Page view and drag the layered
html boxes in the list until they become indented under a another
box. The indented boxes in the list are children of the box they
are indented under. Note that Ilnine boxes are displayed the same
way in this menu, but are not “draggable”.

Inline HTML Boxes in Freeway
Draw a layered box and enter it as if you are going to enter text
(you should see a flashing cursor). From the Insert menu, choose
HTML Item. This will insert a box in the line where the cursor is.
The Inspector menu for such an item is different, as Freeway
automatically draws the position of such items with the relative
attribute.

Thanks for all this Ernie; I’m familiar with inline DIVS, inserting
them using the ‘Insert’ menu. But I simply can’t get my head around
the Child/Parent thing. It took me a stint with RapidWeaver to
realise that this Child/Parent thing is merely a Freeway convention;
is that the case? It doesn’t exist in the world outside Freeway?
After reading you post, I dove into Freeway to try stuff out. I drew
an HTML box then, with the handles on that HTML box showing, I drew
another one inside it. The border of the first box glowed, as you
say, and I ended up with an inside box I could drag anywhere, but no
‘float’ or ‘alignment’ options in the Inspector. Not the kind of
behaviour I expect in a ‘child’ item. Also, If I give the inner box
‘no height’ and put some text in, the box will grow when the text
expands, but if I try to give the outer, containing box ‘no height’,
it shrinks to a single pixel height as though it had no content.
However, if I’ve clicked inside the outer box so that the cursor is
flashing in there, and THEN use the ‘HTML box tool’ to draw one
inside, it behaves exactly as I’d expect: float available in the
Inspector, and if I delete the height of the container, it shrinks to
the dimensions of the inner box. As expected. What am I missing here?
Or is it just that the correct way to insert an inline DIV is to do
it with the cursor flashing in the box it’s being inserted in? So
what’s the first way for, the one where I can draw a box inside a box
without having the cursor flashing in the main box? I just can’t
figure out how this is useful …

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

Hi Paul –

Sorry if I sounded a bit primer-ish earlier… it was for the sake of the broader audience, actually :slight_smile:

Child/Parent goes way beyond Freeway. The child/parent relationship is an HTML structure (div within a div) like this:

This structure conveys the relationship of these objects within the structure of the document, conveying a semantic relationship not unlike

A.
Aa.
A1.

In Freeway, both the inline method and the drawn method produce child divs in the output code. Where they differ is how Freeway writes the inline CSS positioning code for each of these children.

In Freeway, inline divs are given Relative positions with no left, top or z-index attributes. While child divs drawn on their parent ARE given Absolute positions with left, top and z-index values. The only reason I can surmise for the difference in why they are treated differently is to address limitations on how Freeway can display these items in its working view.

A drawn child div can have its attributes extended so it behaves like the inline child div (and vice-versa). However, Freeway cannot display these positional additions in the working view. Preview and Browser view will show them without problem.

So, the parent child relationship is important to the semantic order of structural content in a document – with two different methods in Freeway for creating that relationship. Like you, I find the inline child to be the most useful – however, the drawn method is useful for situations where relative positioning is not needed.

I hope this helps :slight_smile:

Paul Bradforth wrote:

Thanks for all this Ernie; I’m familiar with inline DIVS, inserting
them using the ‘Insert’ menu. But I simply can’t get my head around
the Child/Parent thing. It took me a stint with RapidWeaver to
realise that this Child/Parent thing is merely a Freeway convention;
is that the case? It doesn’t exist in the world outside Freeway?
After reading you post, I dove into Freeway to try stuff out. I drew
an HTML box then, with the handles on that HTML box showing, I drew
another one inside it. The border of the first box glowed, as you
say, and I ended up with an inside box I could drag anywhere, but no
‘float’ or ‘alignment’ options in the Inspector. Not the kind of
behaviour I expect in a ‘child’ item. Also, If I give the inner box
‘no height’ and put some text in, the box will grow when the text
expands, but if I try to give the outer, containing box ‘no height’,
it shrinks to a single pixel height as though it had no content.
However, if I’ve clicked inside the outer box so that the cursor is
flashing in there, and THEN use the ‘HTML box tool’ to draw one
inside, it behaves exactly as I’d expect: float available in the
Inspector, and if I delete the height of the container, it shrinks to
the dimensions of the inner box. As expected. What am I missing here?
Or is it just that the correct way to insert an inline DIV is to do
it with the cursor flashing in the box it’s being inserted in? So
what’s the first way for, the one where I can draw a box inside a box
without having the cursor flashing in the main box? I just can’t
figure out how this is useful …


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

On 3 Jun 2008, at 19:44, Ernie Simpson wrote:

Hi Paul –

Sorry if I sounded a bit primer-ish earlier… it was for the sake
of the broader audience, actually :slight_smile:

No, you didn’t, and in any case, that would have been fine :slight_smile:

Child/Parent goes way beyond Freeway. The child/parent relationship
is an HTML structure (div within a div) like this:

Yes, I understand that.

In Freeway, both the inline method and the drawn method produce
child divs in the output code. Where they differ is how Freeway
writes the inline CSS positioning code for each of these children.

In Freeway, inline divs are given Relative positions with no left,
top or z-index attributes. While child divs drawn on their parent
ARE given Absolute positions with left, top and z-index values. The
only reason I can surmise for the difference in why they are
treated differently is to address limitations on how Freeway can
display these items in its working view.

Ah, now we’re getting somewhere! That’s what I meant earlier when I
said that it was a ‘Freeway thang’. I realised that an inserted,
inline DIV was known and love Web-wide, and I suspected that the
‘drawn’ child element was a Freeway-only thing, a way to get
something to work –in Freeway–. That is what you’re saying?

A drawn child div can have its attributes extended so it behaves
like the inline child div (and vice-versa). However, Freeway cannot
display these positional additions in the working view. Preview and
Browser view will show them without problem.

So, the parent child relationship is important to the semantic
order of structural content in a document – with two different
methods in Freeway for creating that relationship. Like you, I find
the inline child to be the most useful – however, the drawn method
is useful for situations where relative positioning is not needed.

I hope this helps :slight_smile:

If I’ve understood you correctly, it helps a lot, and thank you. To
sum up then: a DIV inserted into another DIV using the ‘Insert’ menu
is, for want of a better word, a ‘classic’ inline DIV, and a child of
the outer DIV. A DIV made by drawing, when the cursor is flashing in
the outer DIV, is the same thing, in every respect (they behave
identically). A DIV drawn on the parent DIV when the cursor is NOT
flashing inside it is a peculiarity of Freeway which can be useful,
but is not found in the wild. Have I got it about right?

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

A DIV drawn on the parent DIV when the cursor is NOT flashing inside it is a peculiarity of Freeway which can be useful, but is not found in the wild. Have I got it about right?

Not quite. A DIV drawn on the parent DIV is a different kind of child. If you look at the code in an editor, you would see that it is nested inside of its parent, just as the inline DIV is, but it is positioned absolutely using the X/Y coordinates relative to its parent, rather than to the page.

Most every DIV you draw in Freeway is an absolutely positioned DIV, and that means that it has a width and an (optional) height, and an X/Y coordinate pinning one of its corners relative to the page or the viewport.

An absolutely positioned child DIV is the same thing, but pinned to its parent.

The thing about these absolute children is that from the point of view of the browser, they don’t take up any space. They don’t reserve any space for themselves or consider the boundaries of any of their neighbors. This is why such a layout will look perfect – until you enlarge or reduce the text size.

Walter


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

On 4 Jun 2008, at 00:40, waltd wrote:

A DIV drawn on the parent DIV when the cursor is NOT flashing
inside it is a peculiarity of Freeway which can be useful, but is
not found in the wild. Have I got it about right?

Not quite. A DIV drawn on the parent DIV is a different kind of
child. If you look at the code in an editor, you would see that it
is nested inside of its parent, just as the inline DIV is, but it
is positioned absolutely using the X/Y coordinates relative to
its parent, rather than to the page.

Most every DIV you draw in Freeway is an absolutely positioned DIV,
and that means that it has a width and an (optional) height, and an
X/Y coordinate pinning one of its corners relative to the page or
the viewport.

An absolutely positioned child DIV is the same thing, but pinned to
its parent.

The thing about these absolute children is that from the point of
view of the browser, they don’t take up any space. They don’t
reserve any space for themselves or consider the boundaries of any
of their neighbors. This is why such a layout will look perfect –
until you enlarge or reduce the text size.

Perfect, Walter. All is now clear, and thank you. And thanks to Ernie
too; between the two of you, you’ve made it much clearer. I have to
say that I still don’t quite understand why I’d want an absolutely
positioned DIV as a child, but I daresay that if I think about it for
a while, I’ll come up with a scenario …

best wishes

Paul Bradforth

http://www.paulbradforth.com


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