[Pro] Inline Layout?

Freeway
21

On 10 Jun 2012, at 17:02, RavenManiac wrote:

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

Just get the cursor flashing in the ‘parent’ box and go to the ‘Insert’ menu, where you can insert a number of things including HTML boxes and Graphic Items.

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

22

Can you put it in div > extended > pick the style option (not div)

Top box: min-height
Bottom box: 800px

Don’t add the colons Freeway will add those for you in the code it publishes

David

On 10 Jun 2012, at 17:15, “RavenManiac” email@hidden wrote:

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

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

23

Yes, that worked perfectly. Thank you.

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

24

When I do this, each subsequent box I add is about one line down from the next, so it has sort of a stair step effect. If I delete the space, I delete the box. What am I doing wrong?

On 10 Jun 2012, 3:11 pm, Todd wrote:

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

25

On 10 Jun 2012, at 17:58, RavenManiac wrote:

When I do this, each subsequent box I add is about one line down from the next, so it has sort of a stair step effect. If I delete the space, I delete the box. What am I doing wrong?

I think that’s a Freeway oddity—when you preview, they should look fine.

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

26

If you need to mix left- and right-floated elements, always put the right element first. If you are floating four things right up against one another, they can all be float left. Where I follow this rule most is when I float right, then float left and adjust widths to leave a space between.

Walter

On Jun 10, 2012, at 12:00 PM, Paul Bradforth wrote:

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

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

27

This worked great Walter, although constructing inline pages does the a little getting used to.

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

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

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

28

Walt

But what if you want the right floated column to appear later in the page order?

For example a right column might be an aside with less important information than the left float with a h1.

David

On 10 Jun 2012, at 19:58, Walter Lee Davis email@hidden wrote:

If you need to mix left- and right-floated elements, always put the right element first.

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

29

Wow, this thread really took off since i peeked at it last. Nice to see so
much activity and interest.

Since everyone seems to be covering the bases, I’ll just chime in with my
own reasons why you should learn to do inline layouts with Freeway Pro…

  1. You will learn valuable lessons and techniques about websmithing.
  2. You will learn valuable lessons and techniques about mastering fiddly
    code-generating software.
  3. Chicks dig it.*

*or at least they should.

Of course, it’s not like you would be denied entrance into the super secret
order of code fingers ( Warning!!! Not knowing how to do this will deny
your entry into the super secret order of code fingers!! ).

–
Ernie Simpson

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

30

Set the left element to a fixed (or percentage) width, and set its display to inline-block and its vertical-align to top. Then the float right element will go where it’s supposed to go. (You will need to use Extended for both of those.)

Walter

On Jun 10, 2012, at 3:35 PM, David Owen wrote:

But what if you want the right floated column to appear later in the page order?

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

31

On 10 Jun 2012, at 19:58, Walter Lee Davis wrote:

If you need to mix left- and right-floated elements, always put the right element first. If you are floating four things right up against one another, they can all be float left. Where I follow this rule most is when I float right, then float left and adjust widths to leave a space between.

Thanks Walt, that clears it up nicely.

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

32

I for long now stalk this list, read and reread it and usually I quicker rush into boxmodel-lists but I’d been the opinion yet better to say nothing than to say something wrong.

I’d built a tons of Full Inline Boxmodels in the past (I even unlearnt the classic drop and drag stuff) but I’d been picked up in the past to hide important informations regarding Inline BoxModel which is neither true nor desired. The fact is, that there seems to be a couple of different views on this, different methods where I can’t say “… do it that way cause it is “the” way…”

So with the first float:right before float:left one:

I never had an eye on this and I do this only if I want to have the float:right div appears before the left one in the source code hierarchy (such as the sidebar with less importance to the left and the main content div to the left). I know that this is not an argument, but I never ever had any further problems with it so I’d been probably “the lucky man” to float up to my like.

Head first on semantic and a proper naming of my elements had been much more important in the past. I am a believer of Freeway’s framework as one of the (probably “the”) most robust one in the webworld. I even started to wrap my thoughts about starting a series of screencasts dedicated to the “Inline-constructions” (even with a written concept the first time) but immediately stopped it by reading this list. The concerns dominating the benefits - so as I said in the entry:

Better to say nothing than to say something wrong.

Cheers

Thomas

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

33

HTML and CSS are very flexible, so there never is just one way to do things
(and so no wrong ways either). There are better and worse ways, and you
allude to that. Semantic structure of content should be preserved, for
example. I think it is a better way.

I understand being silent for fear of criticism, yet you were not silent
just now. Something urged you to speak up, at this moment in time. What, I
don’t know. But I would say to you, maybe it is time for you to say
something, especially if you have something to say. Don’t be quiet if you
think you have a better way. Write an article. Make a screencast. Somebody
will listen and you may be amazed.

Inline construction is just one way to build websites – and a very
difficult way for Freewayers. I’ve been doing them for several years, yet I
am interested to hear your thoughts on the subject. So find your way to
talk about it.

–
Ernie Simpson

On Tue, Jun 12, 2012 at 3:15 AM, Thomas Kimmich email@hidden wrote:

I for long now stalk this list, read and reread it and usually I quicker
rush into boxmodel-lists but I’d been the opinion yet better to say nothing
than to say something wrong.

I’d built a tons of Full Inline Boxmodels in the past (I even unlearnt the
classic drop and drag stuff) but I’d been picked up in the past to hide
important informations regarding Inline BoxModel which is neither true nor
desired. The fact is, that there seems to be a couple of different views on
this, different methods where I can’t say “… do it that way cause it is
“the” way…”

So with the first float:right before float:left one:

I never had an eye on this and I do this only if I want to have the
float:right div appears before the left one in the source code hierarchy
(such as the sidebar with less importance to the left and the main content
div to the left). I know that this is not an argument, but I never ever had
any further problems with it so I’d been probably “the lucky man” to float
up to my like.

Head first on semantic and a proper naming of my elements had been much
more important in the past. I am a believer of Freeway’s framework as one
of the (probably “the”) most robust one in the webworld. I even started to
wrap my thoughts about starting a series of screencasts dedicated to the
“Inline-constructions” (even with a written concept the first time) but
immediately stopped it by reading this list. The concerns dominating the
benefits - so as I said in the entry:

Better to say nothing than to say something wrong.

Cheers

Thomas

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

34

Write an article. Make a screencast. Somebody will listen and you may be amazed.

Think Thomas already has: http://www.kimmich-dm.de/freeway.php

And I’m amazed at all you guys.

Shame DanJ’s screencast’s are offline. I’ve been using his template / method for ages.

s

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

35

Well, I can tell you this. I’m working on my first inline construction layout, primarily because of Perch CMS integration, and I’m not having much fun. Not only am I having to learn a new website construction technique, I’m also being forced to learn code—which is something I thought Freeway would distance me from.

I really miss the drag and drop simplicity of using layers in Freeway Pro, and I find myself spending hours of valuable time trying to figure out how to do something simple. Plus, I miss the WSIWYG interface of Freeway. Because of inline construction, my web pages frequently look like a mess when viewed from within Freeway Pro. And, since most of my files are now php files, for the purposes of CMS integration, I can’t even use Freeway’s preview mode. This makes the process even more time consuming since I have to republish and re-upload the site every time I make a significant change.

I’m sure this is because all of this is very new to me, but I feel like I’ve taken several steps backwards by using the inline construction process. In fact, this experience reminds me of when I first starting building websites using table structures. Hopefully, the whole inline construction concept will begin to gel with me soon.

Anyway, a screencast would be invaluable to someone like me, who is just getting started with inline construction. :slight_smile:

On 12 Jun 2012, 7:58 am, The Big Erns wrote:

Inline construction is just one way to build websites – and a very
difficult way for Freewayers. I’ve been doing them for several years, yet I
am interested to hear your thoughts on the subject.

Ernie Simpson

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

36

I’m not having much fun. Not only am I having to learn a new website construction technique, I’m also being forced to learn code—which is something I thought Freeway would distance me from.

No one has fun building an inline the first time in FW. No one. It’s infuriating. And to add to the confusion of learning a new technique FW’s design model was never intended to support this construction method probably because at the time of FW’s genesis it either didn’t exist or was so obscure a technique that only the geekiest of geeks knew how to do it. FW was conceived and built for table- and layer-based design. This is the reason the RPL action came into existence, because building an inline manually with FW is more difficult than it needs to be and the RPL goes a long way to smoothing over the rough spots.

That said, I’m always amazed when people speak of building sites as though design and code are mutually exclusive. They are forever tied to one another. Opposite sides of the same coin. How can anyone realistically expect to build anything but the most basic of sites without having to, at some point, deal with code on some level? And as web technology/techniques evolve and clients want “more” it requires from all of us a deeper understanding of the medium we choose to work in and when the tools we use fail to evolve at the same pace as the things we create with those tools it makes our job even more difficult.

Ernie’s correct, there are always multiple ways to do something and while an inline design may not always be necessary it is more often than not the best option for a myriad of reasons.

Todd

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

37

Anyway, a screencast would be invaluable to someone like me, who is just getting started with inline construction. :slight_smile:

I can without any doubt see and feel your pain. I have had the luck of visual guidance and even with that I struggled with each step and had to ever and ever watch it. Freeway once gave you the possibility to start into a completely new world - but you should not stuck in that cause Freeway has to offer you much more.

Learning Inline stuff is in fact a changing of attitude towards webpage design in a massive and multiple way:

  • Planing the design (even sketching)
  • Using PS or similar instead of FW graphic stuff features
  • Having a deeper look into code stuff
  • Layers in web such as in PS are a myth (or not?)
  • item134 and style552 is past life

But there are even good news:

After you jumped the basic hurdles, I promise you having so much fun with the robust framework you created. You learn to simplify things without any loss of magic and polished webpages and you will once safe all the lost time you are currently investing.

Doing cool screencasts like them we used to have in the past are anyway nearly impossible to do (at least for me) and they are so time-consuming cause you have to prepare a lot, you have to test and you finally have to produce it (filming, ripping, converting, uploading …). But anyway I try to do something (but I’m fear that you are already a pro if I’m ready to go :-).

Cheers

Thomas

Cheers

Thomas

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

38

Thomas, I wish I would have found your screencast sooner. Thanks for taking the time to do that. It helped me immensely.

http://kimmich-dm.de/screencasts/screen2-inline.php

However, here’s my only problem. After I’ve inserted (4) HTML items, per your instructions, and after I have selected each item to float left, each box (after the first one) drops down approximately 1 line. When I preview the boxes they display fine. I believe somebody may have mentioned that this is a bug in Freeway Pro, but it’s really annoying. I’m currently using Freeway Pro 5.6.4 (6412) with Mac OS X 10.7.4.

If it is a bug, perhaps Joe can let us know when the next Freeway Pro update may be hitting their website.

If it’s not a bug, how do I fix this?

Thanks again Thomas!

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

39

Gentlemen, I truly appreciate all of your comments, helpful advice, and sticktoitiveness (yes, that is a real word). While I may have sounded like I was venting earlier (I was), it’s all part of trying to make myself a better website designer, which, quite frankly, would not have been possible without all of your posts.

So with that said, I’m raising an imaginary Heineken® to each of you for helping me accomplish that goal. :slight_smile:

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

40

It’s a design-view visual feedback bug, as you noted. Softpress have never once promised a delivery time for a bug fix, and I wouldn’t expect them to start now. If you can train your eyes to ignore this for now, you will be pleased not to have to do it forever when they do figure out a way to get around it. Click over to preview, note how it will render in a browser, then get back to your layout.

Walter

On Jun 12, 2012, at 10:44 AM, RavenManiac wrote:

However, here’s my only problem. After I’ve inserted (4) HTML items, per your instructions, and after I have selected each item to float left, each box (after the first one) drops down approximately 1 line. When I preview the boxes they display fine. I believe somebody may have mentioned that this is a bug in Freeway Pro, but it’s really annoying. I’m currently using Freeway Pro 5.6.4 (6412) with Mac OS X 10.7.4.

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