box model master page questions

Freeway
1

I am trying to create a new master page based on a box model. I watched Dan J’s very good tutorials and thought I understood everything. But alas, that is not the case (as usual!).

I set up all of the HTML boxes, but when I add graphic elements or new html boxes I am unable to move them within the html box ‘container’.

Also, I would like to have some graphical elements stretch across the window while the site remains centered. Dan’s tutorial shows this, but I believe it is a filled html box.

Is this because it is being created in a Master Page and not a regular page?

Where should I look for more information on doing this properly?

Thanks.

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

2

No, the reason you can’t move an inline object is because it is
inline. Its positioning is governed by the top-left (or right, if
it’s floated right) margin relative to its nearest parent element.

Think of it as an inline image if you were to create one in
QuarkXPress or InDesign. It’s anchored to the text flow, and moves
along as if it were a very large and square text character. Even if
there is no text per se in the parent box, each inline element
behaves as if it was a character of text.

Walter

On Oct 8, 2008, at 6:02 PM, george wrote:

I am trying to create a new master page based on a box model. I
watched Dan J’s very good tutorials and thought I understood
everything. But alas, that is not the case (as usual!).

I set up all of the HTML boxes, but when I add graphic elements or
new html boxes I am unable to move them within the html box
‘container’.

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

3

Just to add this to the e-mail I got earlier, (sorry for the delay I’ve been out), the box model changes your position from being “Absolute” which means that you can click and move things around to your desired position to a “Relative” state. Meaning that in “Absolute” (non-box model) you can drag and drop anything anywhere. In “Relative” (box model) you don’t have that luxury and often takes quite a bit of planning. Relative requires stacking boxes (HTML Items) and having undefined heights for expanding content using floats and clears.

As far as graphical items, in my screen-casts I create a new HTML item and then insert the graphic item in there. Then i can expand the size of the graphic but still get the float options of the “frame” container. So essentially a graphic item needs to sit in an HTML box to be then moved around within the graphic box.

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

4

I believe I understand what you guys are saying. Obviously an item is restricted within its html box. I can’t move the graphics within the html box. What I don’t get is that I’ve created html boxes for carousels and I can place the graphics anywhere within the box.

I’ll take a look and see what I’ve done wrong. I must have something mucked up.

Thanks.

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

5

I’ve never setup a carousel using a box-model. I use box-model style for entire site building and layout.

Perhaps Walt can shed some light into what’s going on.

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

6

Sometime around 8/10/08 (at 19:46 -0400) Walter Lee Davis said:

No, the reason you can’t move an inline object is because it is
inline. Its positioning is governed by the top-left (or right, if
it’s floated right) margin relative to its nearest parent element.

Exactly so: there are distinct and challenging limitations.

The ‘box-model’ approach for creating web page layouts in Freeway is
simple… apart from the fact that it is complex. Frankly, I find it
frustrating, and I rarely use it. Yes, I know there are benefits -
but there are also drawbacks too. From one angle it is almost the
creative equivalent of binding my thumbs.

I hope we see simpler and easier ways of creating these kinds of
layouts in the future.

k

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

7

This is something that gets confusing. Both inline (box-model) and
absolute children (what you’re referring to in the Carousel) are
nested content. But any absolute object is effectively removed from
the page flow. It exists as a pure geometry exercise (width, height,
X and Y relative to its parent) but does not take up any space. In
the Carousel examples, content drawn over a pane becomes a child of
that pane. But if you were to double-click into the pane and start
typing, you would see that the text would run “under” the nested
boxes, not flow around it.

What you all are referring to as the box-model is simply another word
for relative positioning. Relative-positioned objects do take up
space, which is why they will reposition themselves when the text
size changes. But relative-positioned objects need to be considered
in the universe of the rest of the page. When you change the
dimensions of one element, you have to change the dimensions of
others in order to avoid running into the neighbors. It takes planning.

Where the term box model comes from is the W3C. They refer to the box
model as being the sum of the margin, border, padding, and THEN width
of an object. They don’t make any distinction between an object that
is floated (relative positioning) or an object that is absolutely
positioned.

A 200 px square box with a 1 px border and 12 px padding and 8 px
margin would be 242 px wide. (Don’t get me started about height –
there’s a whole can of worms labeled “margin-collapse” waiting in
that tunnel.) But IE, in its cheerfully unilateral fashion decided
that the box model should mean something else. In any version of IE
below 8, and even in 8 in “Quirks Mode”, the box would be 218 px
wide. But in many cases, it would appear to have a margin of 16 px
per side. You would not be able to see this box, but you could deduce
its existence, sort of like how they found Pluto, by dint of your
entire layout crashing to the ground in a puddle of flaming goo.

Walter

On Oct 9, 2008, at 1:36 AM, george wrote:

I believe I understand what you guys are saying. Obviously an item
is restricted within its html box. I can’t move the graphics
within the html box. What I don’t get is that I’ve created html
boxes for carousels and I can place the graphics anywhere within
the box.

I’ll take a look and see what I’ve done wrong. I must have
something mucked up.

Thanks.

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

8

Thank you for all of your help. I believe I have a much better understanding of how this all works.

I was interested in the ‘box-model’ to help with IE issues, but it doesn’t seem worth it. I guess I’ll explore other options for that problem.

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

9

Well it is worth it from the stand-point of flexible content. It’s not one of those “don’t knock it till you try it” as the box-model isn’t the best option in some cases. BUT…it is useful if done properly. It just takes planning to figure it out and that can be complicated.

I believe the expanding or “duplicated” graphic part is an HTML background set in the inspector or else it’s just a color fill. Would a better video of doing box-model techniques be useful for people?

Say on repeating images, or general 2-3 column layouts?

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