[Pro] Inline Layout?

Freeway
1

Well I’m attempting to design an inline layout, because I was told I need to do that to get to the next level of website design. :slight_smile:

That’s fine with me, but what I’m having a problem with is positioning. Vertically placed items are pretty easy. It’s that darn horizontal stuff. I was tempted to use a table, but apparently tables are not very clean code wise.

So, when designing an inline layout is the goal to place everything within a container or just certain items? I would think that CSS menus, Carousels, and Showcase Elements would be a problem with this type of layout.

Also, what’s the real purpose of inline layouts and why is it good practice to use them?

Thanks!

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

2

One thing to consider when doing this is why you are doing it.

If for a CMS enabled page/site you want to make sure that all added content ‘fits’ then it may be that the whole page doesn’t need to be done this way.

Ie you might have your header, CSS menu etc (common stuff appearing at the top) as normal divs but only use an inline construction for what lies beneath - where expansion is desired/necessary.

David

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

3

Yes, it’s for a CMS retrofit and for the reasons you stated. I was hoping I wouldn’t have to mess with anything above the header area if possible, so it’s good to know that I can do that and still make this work.

If I have a web page divided horizontally into two columns, can I use an inline design for the text portion in the left column to force the page to grow and shrink as needed, but use a traditional FWP layered graphic item for the images on the right?

Also, is it really bad practice to rely on tables for some of this? I found tables a lot easier to work with in terms of getting things positioned just right.

One thing to consider when doing this is why you are doing it.

If for a CMS enabled page/site you want to make sure that all added content ‘fits’ then it may be that the whole page doesn’t need to be done this way.

Ie you might have your header, CSS menu etc (common stuff appearing at the top) as normal divs but only use an inline construction for what lies beneath - where expansion is desired/necessary.

David

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

4

On Jun 10, 2012, at 8:50 AM, RavenManiac wrote:

If I have a web page divided horizontally into two columns, can I use an inline design for the text portion in the left column to force the page to grow and shrink as needed, but use a traditional FWP layered graphic item for the images on the right?

That sounds fine. Just be sure that your left-hand stuff will always be taller than the right-hand stuff, or your footer may come up to cover (or slide under) the right-hand elements.

Also, is it really bad practice to rely on tables for some of this? I found tables a lot easier to work with in terms of getting things positioned just right.

When you Design for the Web (capital D design), you have to consider your materials, not just their glossy finish. A table has a specific semantic meaning: here are these related data, they can be categorized by either their X or Y axis, and you can compare them to one another in the context of this organization.

A visual layout, in contrast, has no such organization, yet by using a table to hold them physically in shape, you offer the possibility that such a relationship exists. A sighted person looking at your page would disagree with me, but a visually disabled person like my dear friend Beverly, or a machine, like the Google crawler, would be hopelessly confused.

Walter

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

5

Gotcha. So, please help me with this. I’m trying to place three 200 x 200 pixel boxes within a HTML container, but I can’t get the three boxes to align at the top. What am I doing wrong.

I followed along with your screencast, but the examples were inline graphic items.

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

6

I’m trying to place three 200 x 200 pixel boxes within a HTML container, but I can’t get the three boxes to align at the top.

“Float” each box to the left or right, as needed.

T.

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

7

So, with an inline layout, there’s no way to have more than two boxes at the top, one floated left, the other floated right, correct?

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

8

So, with an inline layout, there’s no way to have more than two boxes at the top, one floated left, the other floated right, correct?

Nope. You can have as many as will fit. I’m saying that if you want 3 boxes all lined-up next to one another horizontally on the, for example, left side of the page, then float each box “left”.

T.

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

9

Duplicate the box that’s is set to float left then duplicate it again.

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

10

Hey Nathan. I’m assuming that in the example you emailed me there was a reason you placed the right floated column first. Is that how you have to add the boxes?

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

11

Duplicate the box that’s is set to float left then duplicate it again.

Or insert a new one. Whatever works for you.

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

12

Right float goes before any left fl

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

13

Right float goes before any left float if you want them to align at the top in all browsers. Mozilla is terrible about this if you don’t follow this rule.

Walter

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

14

How can I do this?

When the page is not fully populated with CMS data, I want the minimum page height to be 800 pixels and my footer at the bottom of the page.

However, when the content increases the height of the page, I still want the footer at the bottom of whatever page height the page is.

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

15

You can set a min-height value to a div (Item>Extended) you may not see it in your FW preview

http://www.w3schools.com/cssref/pr_dim_min-height.asp

D

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

16

Your footer needs to be constructed inline as well as the rest of the variable content. Time for an ASCII-gram:

/--------outer box 100% wide---------
|      /-----inner box-----         |
|      |                   |         |
|      |     fixed or %    |         |
|      |      width        |         |
|      |                   |         |
|      -------------------/         |
|/------------footer----------------|
||             100%                 ||
|----------------------------------/|
------------------------------------/

The key is to have a single flexible container (100% wide, indeterminate height, overflow hidden) that holds everything below your fixed-dimension elements. Your footer is inside that box as an inline 100%-width child element.

The other inline elements above your footer will push the footer down. To get a centered layout, just set the inner box to Margin: Auto.

To get your fixed-minimum-height look, experiment with the correct min-height to apply to the inner box. You will need to use the Extended dialog to add this to the box, it’s not a normal part of the Inspector. Try min-height: 600px if the rest of your header and footer add up to 200px.

And if you want a multi-column layout inside the inner box, just add those elements as children of the inner box – don’t try to float one part left and another part right above the footer. That way lies madness.

Walter

On Jun 10, 2012, at 11:28 AM, RavenManiac wrote:

How can I do this?

When the page is not fully populated with CMS data, I want the minimum page height to be 800 pixels and my footer at the bottom of the page.

However, when the content increases the height of the page, I still want the footer at the bottom of whatever page height the page is.

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

On 10 Jun 2012, at 16:24, waltd wrote:

Right float goes before any left float if you want them to align at the top in all browsers. Mozilla is terrible about this if you don’t follow this rule.

Just a quick one Walt: are you saying that if, say, you want three or four boxes to align along the top of the containing box, they should be floated right not left? Normally, if I was doing that, I’d float them all left; is that wrong?

best wishes,

Paul Bradforth

Holiday in wonderful Cornwall:
http://www.stoneybeckcottage.co.uk

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

18

Thanks for the ASCII-gram. That explained it perfectly. Yes, that’s where I am right now—madness. LOL

How can you add HTML items as children? I thought you could only do that with graphic items?

On 10 Jun 2012, 3:46 pm, waltd wrote:

And if you want a multi-column layout inside the inner box, just add those elements as children of the inner box – don’t try to float one part left and another part right above the footer. That way lies madness.

Walter

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

19

Can’t seem to get the min-height thing working. There must be something wrong with my syntax. Here’s what I have in the Extended

Name: min-height:
Value: 800px

On 10 Jun 2012, 3:35 pm, DeltaDave wrote:

You can set a min-height value to a div (Item>Extended) you may not see it in your FW preview

http://www.w3schools.com/cssref/pr_dim_min-height.asp

D

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

20

Name: min-height:
Value: 800px

min-height

Lose the colon.

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