[Pro] Inline layout and overlapping text

Freeway
1

Hi, I’m slowly getting the hang of inline construction, but I have one problem which I assume is fairly simple.

I have a wrapper div and within this there are 4 divs:
A header at 100%width
A menu at approx 20% width (Clear:left, Float left), main content at approx 80% width (Clear:right, Float:right)
and a footer div at 100% width.

It’s all been constructed inline (cursor > insert HTML box) and generally it’s working fine, the boxes expand downwards when the type is enlarged. My problem is with the menu box, this copy also comes out widthways and goes under the main content box.

I’m afraid nothing’s online yet, I’m just trying to get the bare bones working properly before I start with the twiddly bits.

One more thing, I’m using Trebuchet, but this is appearing in the Freeway working file as Times, but fine in preview.

Once again, any help is much appreciated.

Trev

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

2

If it is truly inline then you wont get an overlap.

But without seeing it online this is a tricky one to diagnose.

David

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

3

Thanks David, I’ll try and get something up somewhere this evening.

Trev

On 21 Jun 2012, at 17:28, DeltaDave wrote:

If it is truly inline then you wont get an overlap.

But without seeing it online this is a tricky one to diagnose.

David

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

4

In fact, here you go…

http://www.trevreav.co.uk/CSTEST/

Trev

On 21 Jun 2012, at 17:28, DeltaDave wrote:

If it is truly inline then you wont get an overlap.

But without seeing it online this is a tricky one to diagnose.

David

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

5

When you inserted your 2 HTML items in cscentrepanel did you insert them one after the other (before adding content/resizing)?

Try again and insert the 2 but select the first inserted and float it right and then the other and float it left and see if that works for you.

D

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

6

I’m having the same issue. I’ll give David’s idea a try as well.

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

7

Morning Dave, thanks for the reply, I constructed as follows (and have done again this morning - same results) I may have floated and cleared after boxes were inserted first time around, can’t remember, but not on this redo:

Draw main wrapper > insert cursor > insert html item style with Float and clear left, 100% width (the header)

Click on header > arrow right until cursor appears > insert html item > style with Float and clear left, 100px wide (the menu box)

Click on menu box > arrow right until cursor appears > insert html item > style with Float and clear right, 625px wide (the main content area)

Click on main content area > arrow right until cursor appears > insert html item > style with Float and clear left, 100% width (the footer)

and still ‘underlapping’ when the menu type is enlarged.

Trev

On 21 Jun 2012, at 18:06, DeltaDave wrote:

When you inserted your 2 HTML items in cscentrepanel did you insert them one after the other (before adding content/resizing)?

Try again and insert the 2 but select the first inserted and float it right and then the other and float it left and see if that works for you.

D

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

8

Morning Dave, thanks for the reply, I constructed as follows (and have done again this morning - same results) I may have floated and cleared after boxes were inserted first time around, can’t remember, but not on this redo:

Draw main wrapper > insert cursor > insert html item style > with Float and clear left, 100% width (the header)

Click on header > arrow right until cursor appears > insert html item > style with Float and clear left, 100px wide (the menu box)

Click on menu box > arrow right until cursor appears > insert html item > style with Float and clear right, 625px wide (the main content area)

Click on main content area > arrow right until cursor appears > insert html item > style with Float and clear left, 100% width (the footer)

and still ‘underlapping’ when the menu type is enlarged.

Trev

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

9

I’m just trying it now, Trevor, and am not seeing the problem. In fact
looks good to me.

As a matter of practice, it’s a good idea to clear all your floats at
different levels of construction, so that rows of items don’t clash. In a
simple construct like this, I would set the footer to clear:both; so the
growing content from above it pushes it down equally.

–
Ernie Simpson

On Fri, Jun 22, 2012 at 3:21 AM, Trevor Reaveley email@hiddenwrote:

Morning Dave, thanks for the reply, I constructed as follows (and have
done again this morning - same results) I may have floated and cleared
after boxes were inserted first time around, can’t remember, but not on
this redo:

Draw main wrapper > insert cursor > insert html item style with Float and
clear left, 100% width (the header)

Click on header > arrow right until cursor appears > insert html item >
style with Float and clear left, 100px wide (the menu box)

Click on menu box > arrow right until cursor appears > insert html item >
style with Float and clear right, 625px wide (the main content area)

Click on main content area > arrow right until cursor appears > insert
html item > style with Float and clear left, 100% width (the footer)

and still ‘underlapping’ when the menu type is enlarged.

Trev

On 21 Jun 2012, at 18:06, DeltaDave wrote:

When you inserted your 2 HTML items in cscentrepanel did you insert them
one after the other (before adding content/resizing)?

Try again and insert the 2 but select the first inserted and float it
right and then the other and float it left and see if that works for you.

D

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

10

Thanks for the reply Ernie, unfortunately I’m still seeing the problem. I redid the layout 3 times yesterday and viewing locally on my Mac I got the same problem every time. I’ll take your suggestion into account next week when I’m back

Using Safari with the ‘zoom text only’ option selected, the ‘s’ of ‘Movies’ in the left menu panel disappears under the main picture. Should it make any difference if the main content box was Floated & Cleared left (to butt up to the menu box) and add the margin or padding to that side?

Also, any thoughts on the other issue of fonts? Quote: “One more thing, I’m using Trebuchet, but this is appearing in the Freeway working file as Times, but fine in preview.”

http://www.trevreav.co.uk/CSTEST/

Thanks everyone.

Trev

On 22 Jun 2012, at 18:49, Ernie Simpson wrote:

I’m just trying it now, Trevor, and am not seeing the problem. In fact
looks good to me.

As a matter of practice, it’s a good idea to clear all your floats at
different levels of construction, so that rows of items don’t clash. In a
simple construct like this, I would set the footer to clear:both; so the
growing content from above it pushes it down equally.

–
Ernie Simpson

On Fri, Jun 22, 2012 at 3:21 AM, Trevor Reaveley email@hiddenwrote:

Morning Dave, thanks for the reply, I constructed as follows (and have
done again this morning - same results) I may have floated and cleared
after boxes were inserted first time around, can’t remember, but not on
this redo:

Draw main wrapper > insert cursor > insert html item style with Float and
clear left, 100% width (the header)

Click on header > arrow right until cursor appears > insert html item >
style with Float and clear left, 100px wide (the menu box)

Click on menu box > arrow right until cursor appears > insert html item >
style with Float and clear right, 625px wide (the main content area)

Click on main content area > arrow right until cursor appears > insert
html item > style with Float and clear left, 100% width (the footer)

and still ‘underlapping’ when the menu type is enlarged.

Trev

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

11

Trevor - try this

When you create your inline layout look at the Page/Site panel set to Page view.

If your cscontentpanel is below your menubox then the text will go under

If the menubox is lower then the text will go over - as at http://www.deltadesign.co/boxproblem.html - the bottom example is your code.

The lower an item is on the page list the higher it is in the viewing order.

D

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

12

Hi Trevor -

David is right about the order. It’s like a hierarchy.

Fortunately, CSS can help, with the z-index attribute. Select your menu div
box and right click the menu to select Extended ( or menu Item>Extended… ).
Select the DIV style tab, create a new attribute ( z-index ) and set it to
a silly large number ( 50 ). Problem solved.

–
Ernie Simpson

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

13

Here is a quick example:
http://cssway.thebigerns.com/workbench/trevor_reaveley/stimpson_zindex/

Contact me off-list if you want the Freeway Pro file :slight_smile:

–
Ernie Simpson

On Sat, Jun 23, 2012 at 9:47 PM, Ernie Simpson email@hidden wrote:

Fortunately, CSS can help, with the z-index attribute. Select your menu
div box and right click the menu to select Extended ( or menu
Item>Extended… ). Select the DIV style tab, create a new attribute (
z-index ) and set it to a silly large number ( 50 ). Problem solved.

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

14

Ernie, David, thanks very much for the replies, all understood thanks, and I’ll follow your pointers concerning the heirarchy and make the menu overlaps the pic rather than expand underneath.

However, I thought the idea of the box model was that there would be no over/underlapping? What I thought would happen is that the words would split and hyphenate when they got to a very large size and just flow underneath each other. I really didn’t think it was possible with inline layout to get overlaps, but there again, I’m just starting to get my head around it.

Thanks again.

Trev

On 24 Jun 2012, at 02:47, Ernie Simpson wrote:

Hi Trevor -

David is right about the order. It’s like a hierarchy.

Fortunately, CSS can help, with the z-index attribute. Select your menu div
box and right click the menu to select Extended ( or menu Item>Extended… ).
Select the DIV style tab, create a new attribute ( z-index ) and set it to
a silly large number ( 50 ). Problem solved.

–
Ernie Simpson

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

15

Forwarding this as it doesn’t seem to have appeared again - more web/email problems with Freewaytalk?

Begin forwarded message:

Ernie, David, thanks very much for the replies, all understood thanks, and I’ll follow your pointers concerning the heirarchy and make the menu overlaps the pic rather than expand underneath.

However, I thought the idea of the box model was that there would be no over/underlapping? What I thought would happen is that the words would split and hyphenate when they got to a very large size and just flow underneath each other. I really didn’t think it was possible with inline layout to get overlaps, but there again, I’m just starting to get my head around it.

Thanks again.

Trev

On 24 Jun 2012, at 02:47, Ernie Simpson wrote:

Hi Trevor -

David is right about the order. It’s like a hierarchy.

Fortunately, CSS can help, with the z-index attribute. Select your menu div
box and right click the menu to select Extended ( or menu Item>Extended… ).
Select the DIV style tab, create a new attribute ( z-index ) and set it to
a silly large number ( 50 ). Problem solved.

–
Ernie Simpson

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

16

Glad to be helpful :slight_smile:

I think you mean Inline Layout, as the Box Model refers to something
different.

HTML and CSS are by their nature, layered. Always. I don’t think there is
a way, ever, to make two objects occupy *the same *layer… Inline layouts
may seem that way, but in reality they are just an artifice of the way
Freeway Pro behaves.

Imagine all the objects on your page – headers, paragraphs, images, written
individually on index cards… sorted back to front. You can see this in
FWP’s left-hand navigation menu when set to Page view or Show Items.
That order, top to bottom is the stacking order of your page elements back
to front. Mostly.

I say “mostly” because as I showed you, you can use CSS to change the
visual order of things using the z-index attribute.

–
Ernie Simpson

On Mon, Jun 25, 2012 at 2:50 AM, Trevor Reaveley email@hiddenwrote:

Ernie, David, thanks very much for the replies, all understood thanks, and
I’ll follow your pointers concerning the heirarchy and make the menu
overlaps the pic rather than expand underneath.

However, I thought the idea of the box model was that there would be no
over/underlapping? What I thought would happen is that the words would
split and hyphenate when they got to a very large size and just flow
underneath each other. I really didn’t think it was possible with inline
layout to get overlaps, but there again, I’m just starting to get my head
around it.

Thanks again.

Trev

On 24 Jun 2012, at 02:47, Ernie Simpson wrote:

Hi Trevor -

David is right about the order. It’s like a hierarchy.

Fortunately, CSS can help, with the z-index attribute. Select your menu
div
box and right click the menu to select Extended ( or menu Item>Extended…
).
Select the DIV style tab, create a new attribute ( z-index ) and set it
to
a silly large number ( 50 ). Problem solved.

–
Ernie Simpson

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

17

Yes, inline layout, my apologies.

And thanks for that explanation. I’m slowly getting my head around things now. My mistake was in thinking that once the menu box came up against the main content box it would just stop, and the words would split. But it all sort of makes sense now.
Forever learning.

Trev

On 25 Jun 2012, at 14:31, Ernie Simpson wrote:

Glad to be helpful :slight_smile:

I think you mean Inline Layout, as the Box Model refers to something
different.

HTML and CSS are by their nature, layered. Always. I don’t think there is
a way, ever, to make two objects occupy *the same *layer… Inline layouts
may seem that way, but in reality they are just an artifice of the way
Freeway Pro behaves.

Imagine all the objects on your page – headers, paragraphs, images, written
individually on index cards… sorted back to front. You can see this in
FWP’s left-hand navigation menu when set to Page view or Show Items.
That order, top to bottom is the stacking order of your page elements back
to front. Mostly.

I say “mostly” because as I showed you, you can use CSS to change the
visual order of things using the z-index attribute.

–
Ernie Simpson

On Mon, Jun 25, 2012 at 2:50 AM, Trevor Reaveley email@hiddenwrote:

Ernie, David, thanks very much for the replies, all understood thanks, and
I’ll follow your pointers concerning the heirarchy and make the menu
overlaps the pic rather than expand underneath.

However, I thought the idea of the box model was that there would be no
over/underlapping? What I thought would happen is that the words would
split and hyphenate when they got to a very large size and just flow
underneath each other. I really didn’t think it was possible with inline
layout to get overlaps, but there again, I’m just starting to get my head
around it.

Thanks again.

Trev

On 24 Jun 2012, at 02:47, Ernie Simpson wrote:

Hi Trevor -

David is right about the order. It’s like a hierarchy.

Fortunately, CSS can help, with the z-index attribute. Select your menu
div
box and right click the menu to select Extended ( or menu Item>Extended…
).
Select the DIV style tab, create a new attribute ( z-index ) and set it
to
a silly large number ( 50 ). Problem solved.

–
Ernie Simpson

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