CSS fix

Freeway
1

I’m styling a menu in a markup item with some CSS - it’s a div container with simple

  • items.

    But this markup has the effect of pushing everything else on the page out of alignment, probably because the CSS is ‘cascading’ into the rest of the design.

    I recall someone from Softpress giving me a fix before for this, something like adding a ‘clear’ statement or something at the bottom of the relevant CSS - but I can’t remember exactly what the fix was!

    Any CSS gurus?..

    Hugh

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

2

Can you post a link? Clear only helps when there are floats around.

Walter

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

3

I haven’t got the page live anywhere yet, Walter, just building locally on the Mac.

If I make the markup item a layer (and use layer positioning etc) the other items behave ok.

So there must be something in the CSS which is cascading into the rest of the design if it’s within a single layer.

For your info the menu css is:


#navcontainer { width: 160px; }

#navcontainer ul
{
margin-left: 0;
padding-left: 0;
padding-top:0px;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
}

#navcontainer a
{
display: block;
padding: 4px 0 4px 6px;
width: 160px;
background-color: #777;
border-bottom: 3px solid #fff;
}

#navcontainer a:link, #navlist a:visited
{
color: #fff;
text-decoration: none;
}

#navcontainer a:hover
{
background-color: #d7001a;
color: #fff;
}

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

4

All fine so far, but what the container box is makes a big difference how this will be treated. You have a #navcontainer, presumably that’s a DIV, and DIVs without any extra help are block level elements. Any other normal block-level element gets out of their way all the way across the page.

If you want this nav element to be at the left of the page, then you need to make room for it somehow. If the content to the right of it will guaranteed always be taller than the nav, then the simplest thing is to set opposing floats on the content and the navigation elements. Make the content come first in source order, and give it float right. Make the navigation come later in source order (always great for SEO, get the content up top in source order where it belongs) and set float left. If you work the widths out correctly, you will get a nice gutter in the middle and the page will just work.

Using floats like this then starts a sort of “arms race” with floating, though. If you have set a background color on the content area that is different than the body of the page, you’re going to end up having to float the page container or insert a deliberate “float-breaker” element after your two floated elements and before the close of your page container. Otherwise, because floated elements don’t reserve any space for themselves, the page body will close up to be the height of its largest non-floated child. This may mean it closes up to no height and seems to disappear.

Walter

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

5

I guess I’m mixing metaphors here…because I’m not building a CSS page layout. It’s old school Freeway tables designed in the normal way of putting stuff where you want it. I wanted a vertical menu on the left, but using a freeway table is far too complex so just dropped some css code into a markup and positioned it on the left.

Which is probably not the way to do it!

??

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

6

When you say a Freeway table, do you mean the magical table that
Freeway makes for you when you are in table layout mode, or do you
mean the table drawn with the table tool?

Walter

On Nov 5, 2010, at 9:27 AM, hugh wrote:

I guess I’m mixing metaphors here…because I’m not building a CSS
page layout. It’s old school Freeway tables designed in the normal
way of putting stuff where you want it. I wanted a vertical menu on
the left, but using a freeway table is far too complex so just
dropped some css code into a markup and positioned it on the left.

Which is probably not the way to do it!

??

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

7

‘The magical table’…?? Which one is that?

If you can imagine a fairly basic Freeway (3.1) layout, there’s a graphic item at the top in the middle, a 6 cell table beneath it, three graphic boxes to the right of the table, and the markup item (our menu) to the left of the table.

The markup item seems to be influencing the ‘spacing’ of the other graphic items or the text inside a table cell.

Delete the markup item, or make it a layer, and the other items behave as you want them to as per the Freeway layout.

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

8

Ah, well just as Morpheus told Neo that the Matrix was “the world that
has been pulled down over your eyes, to hide the real world”; the
magical table in Freeway is how everything you draw on the page isn’t
inexorably drawn up into the top-left corner of the browser window, as
if by a giant magnet.

If you are using Freeway with its CSS Layout feature off, then
everything you draw on the page – even a table drawn with the table
tool – becomes a part of a larger table that Freeway manages for you,
and doesn’t let you edit directly.

If you use the table tool for layout purposes, then you’re trying too
hard.

If you are using the table tool to lay out tabular data, like
assigning labels to form elements in a contact form, or team members’
names and positions and jersey numbers in a grid, then you’re using
the table tool for what it was intended. That larger invisible layout
table will be there anyway, so drawing a table for layout purposes is
gilding the lily.

When you draw your markup item on the page, you are creating a new
table cell in this master layout table. When you insert a markup item
inline within a table cell or another HTML box, you are creating a
paragraph (which wraps around the inline markup item) and whatever was
inside the markup item becomes content within that paragraph. In the
case of the code you posted earlier, the result is invalid, because a
DIV cannot be the child of a paragraph. But if you have drawn your
markup item on the page, then a DIV can certainly be a child of a TD,
so that’s not your problem there.

What may be happening is that your TD is too small for the DIV plus UL
that sit inside it. When the content of a TD grows, the TD will flex
larger to hold that content. But in the case of the magical layout
table, whatever distorts one cell of the table will also distort any
other cells in the same row of that table. So if you have something on
the left that grows tall, whatever is to the right of that will also
have to grow taller to compensate.

When you make the markup item a layer, it floats above the layout
table, and no longer influences it in any way. This means that the
content of the markup item may grow and overlap content below it, but
it will never push that content out of the way. This is actually
something you want, much of the time, because no two browsers render
type exactly the same way. A table layout will naturally flex and
allow all the words to be read, not hide some of them underneath rigid
positioned images.

Walter

On Nov 5, 2010, at 2:26 PM, hugh wrote:

‘The magical table’…?? Which one is that?

If you can imagine a fairly basic Freeway (3.1) layout, there’s a
graphic item at the top in the middle, a 6 cell table beneath it,
three graphic boxes to the right of the table, and the markup item
(our menu) to the left of the table.

The markup item seems to be influencing the ‘spacing’ of the other
graphic items or the text inside a table cell.

Delete the markup item, or make it a layer, and the other items
behave as you want them to as per the Freeway layout.

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