Making CSS behave like table

Hi there,

Tearing my hair out (and there’s not much left anyway) trying to get a CSS layout to behave like a good old-fashioned table.

Have a look at this site - www.realairsimulations.com - and make your browser display the HTML text bigger and smaller, keeping an eye on the text in the three boxes on the left-hand side of the page.

I think I can see how text stays within the boxes when you change the size, but I don’t get how each text box then interacts with those above and below it, pushing them higher and lower on the page. Very cunning.

I’m keen to replicate that sort of behavior without using tables, which I would have done in the past.

Any ideas very very gratefully received!

Paul


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

Hi Paul,

You have to start learning how to work with (in Freeway 4 Pro) HTML layered boxes.

Create a large HTML box, click into it go to insert > HTML item then float left/right. etc etc. After putting your content in the boxes you delete ‘all’ the box heights collapsing them all down on themselves. (You need to experiment using this method, and you will get the hang of how it works)

But maybe getting Freeway 5 is the best solution, as this is now much better handled for you, automatically :slight_smile:

David

On 22 Feb 2008, at 15:58, paulharmer wrote:

I’m keen to replicate that sort of behavior without using tables, which I would have done in the past.

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.printlineadvertising.co.uk/freeway
http://www.ineedwebhosting.co.uk

Thanks David.

I’m actually using the Freeway 5 Beta at the moment - just point me in the right direction as to how it’s handled automatically and I’ll have a crack at it.

I was doing something similar this morning in 5 for the drop-down blind menus. A mite hard to get your head around at first!

Cheers,

Paul


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

I just e-mailed you a FW4 file to you as an example - did you get it?

David

On 22 Feb 2008, at 16:35, paulharmer wrote:

Thanks David.

I’m actually using the Freeway 5 Beta at the moment - just point me in the right direction as to how it’s handled automatically and I’ll have a crack at it.

I was doing something similar this morning in 5 for the drop-down blind menus. A mite hard to get your head around at first!

Cheers,

Paul

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.printlineadvertising.co.uk/freeway
http://www.ineedwebhosting.co.uk

Here’s a link for you (or any other others) to download the file - this should point you in the right direction.

http://www.ineedwebhosting.co.uk/examples/resizeme.html

David

On 22 Feb 2008, at 16:35, paulharmer wrote:

just point me in the right direction as to how it’s handled

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.printlineadvertising.co.uk/freeway
http://www.ineedwebhosting.co.uk

Yup - got the email and am digesting right now. I’ll let you now how I get on!

Thanks for your quick help David,

Paul


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

Notice how the use of padding (or margin) centres text in boxes etc. Just expand this basic theory to create whole pages to like www.realairsimulations.com

David

On 22 Feb 2008, at 17:07, paulharmer wrote:

Yup - got the email and am digesting right now. I’ll let you now how I get on!

David Owen
Freeway Friendly Web hosting and Domains ::

http://www.printlineadvertising.co.uk/freeway
http://www.ineedwebhosting.co.uk

It’s quite an operation isn’t it? Almost defeats the point of having such elegant and simple software I fear. And it’s a nightmare when you try and go back in to edit text or images.

Might a table actually be better to achieve this?

Thoughts please!

Paul


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

Yep your right, sometime a table is easier.

You have to put a bit of thought in to it before building a whole page this way, and Its a bit fiddly to edit in Freeway. (tip: rename each box in Freeway, and use the site Palette to show items to select/edit.)

We prepare most new sites with some or all editable section, so the site must flex with extra (or less) content. This the way we produce the main page designs now instead of tables (we still use tables for tabular content).

If you were hand coding these pages, its very easy to insert stuff precisely where you need it, and Freeway suffers in this respect suffers with the graphical interface with divs collapsing with no content or having to quickly expand when copy and pasting content in.

(Is there a way of not using copy/paste to insert an inline div in FW5?).

David

On 23 Feb 2008, at 6:39 pm, paulharmer wrote:

It’s quite an operation isn’t it? Almost defeats the point of having such elegant and simple software I fear. And it’s a nightmare when you try and go back in to edit text or images.

Might a table actually be better to achieve this?

Thoughts please!

Paul

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

On 24 Feb 2008, at 15:16, David Owen wrote:

(Is there a way of not using copy/paste to insert an inline div in
FW5?).

Sure: click in a box and go Insert>Graphic Item or HTML item.

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

Yes I know that :slight_smile:

I was mean when thing get more complex. Try that in a box that has collapsed to zero height. You’ve got to select, add some height, then click inside to copy and paste or Insert > HTML item. Try that in a whole page with series of divs within divs with no height and it get to it starts to get fiddly with the Freeway graphical Interface. Hopefully Softpress can find a way to smooth that process to help build pages like http:// www.realairsimulations.com

On 24 Feb 2008, at 4:24 pm, Paul Bradforth wrote:

Sure: click in a box and go Insert>Graphic Item or HTML item.

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

It’s not a panacea, but using the Site panel in Page mode, you can
select any element on the page. A press of the Return key will select
the element, and temporarily bring it to the top of the stack (if
any), ready for editing.

Walter

On Feb 24, 2008, at 1:44 PM, David Owen wrote:

Yes I know that :slight_smile:

I was mean when thing get more complex. Try that in a box that has
collapsed to zero height. You’ve got to select, add some height,
then click inside to copy and paste or Insert > HTML item. Try
that in a whole page with series of divs within divs with no height
and it get to it starts to get fiddly with the Freeway graphical
Interface. Hopefully Softpress can find a way to smooth that
process to help build pages like http:// www.realairsimulations.com

On 24 Feb 2008, at 4:24 pm, Paul Bradforth wrote:

Sure: click in a box and go Insert>Graphic Item or HTML item.

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway


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

On 24 Feb 2008, at 18:44, David Owen wrote:

Yes I know that :slight_smile:

I was mean when thing get more complex. Try that in a box that has
collapsed to zero height.

I take your point, but it’s still possible: using the ‘Page’ view
(items) in the sidebar panel, select the DIV by name and hit return
and you’re in.

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

Thanks - That’s precisely the bit I’d missed (been looking for in my original comment)… ‘hit return’ and you’re in. :slight_smile:

On 24 Feb 2008, at 7:37 pm, Paul Bradforth wrote:

select the DIV by name and hit return and you’re in.

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

Can’t believe I did not notice hitting return took into editing a box after using Freeway for so long!!.

Did you know… Just checked the FW5 demo, and you can hit return on a blank page - and enter text directly on the page!!

On 24 Feb 2008, at 7:37 pm, Paul Bradforth wrote:

select the DIV by name and hit return

and you’re in.

David Owen ::
Freeway Friendly Web Hosting and Domains
http://www.PrintlineAdvertising.co.uk/freeway

Slowly getting there with this expanding layout stuff! As I said earlier, it’s not the expanding box itself that’s caused the problems, it’s making it push everything below it down without clashes and overlaps. Hitting return is a major step to select zero-height divs - didn’t know about that inspector/return option either!

It’s amazing how many really experienced Mac users don’t know about apple>tab to cycle between apps either :wink: so it’s great to learn new stuff.

Still think there’s some work for Softpress to do to allow us to make sites like my original example - www.realairsimulations.com - easily in Freeway. maybe it’s asking too much, but with everything using CSS layers now it would be great if they could come up with a tool here. Maybe something that even looks like a table layout tool but outputs inline divs instead? I’m certainly not an expert here, so I’ll stop while ahead.

Just love the way that Realair looks and functions though, with the flexible layout, very subtle graphic elements to top and tail the text boxes, small shadows etc - a very web2 experience!

Paul

Paul


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

Sometime around 24/2/08 (at 16:05 -0500) paulharmer said:

It’s amazing how many really experienced Mac users don’t know about
apple>tab to cycle between apps either :wink: so it’s great to learn new
stuff.

Mmm, isn’t it just!

Command-tab, and hold command and type Q while an app’s icon is in
focus to quit that app. Then keep tabbing with the command key still
held down. Or hold command and hit H to hide the app that’s currently
in focus. Command-shift-tab to cycle through in the other direction.

Command-~ (tilde) will cycle through an application’s windows in a
very similar way, in most apps anyway.

k


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