10 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Wow, in just over one month the CSS Layout Generator has generated over 2659 not including the ones that have been deleted Smile

Simple printing styles have now been added to hide the left and right columns when printing.
I assumed most people would only want to print the main content in the center column but of course it's easy to change it to suite your needs.

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 30 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Layout Generator

Well done!

The only way to learn is to do it yourself

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 14 years 1 week ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

CSS Layout Generator

It's a nice piece of work Laughing out loud

One thought - it looks like the column widths are restricted to pixel-based dimensions - how about supporting percentages or other units, too?

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 17 years 30 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

CSS Layout Generator

Doug Livingstones 3 column layout is the best fluid design I have seen, that does not drop the RH column down below the content when resizing the browser.

Try all the other 3 column 'holy grails' and they all suffer resizing problems.

Unfortunately its does have some problems like layout does not allow % based widths for left and right columns.

It works a bit like this

The Content area is % based, but it has 2 large borders.
--------------------------------
border | content |border |
--------------------------------

The Left and right columns are then placed over the borders. As you resize the content resizes but the right column just moves in with the border.

Of course that does not mean there can not be a second layout generator Smile

Day

The only way to learn is to do it yourself

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS Layout Generator

At first I was developing a simple float layout that worked on % widths for the columns.
Most people seem to want at least one fixed width column which makes it really hard to have percentage widths for the other columns.

I may add some other popular layouts to the generator at a later date.

Sven
Sven's picture
Offline
Enthusiast
Brisbane, Australia
Last seen: 14 years 1 week ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2003-03-12
Posts: 166
Points: 0

CSS Layout Generator

If it could go over the road and buy me an orange juice, that would be good, too.

chris hester
Offline
Regular
UK
Last seen: 17 years 31 weeks ago
UK
Joined: 2003-11-07
Posts: 21
Points: 0

CSS Layout Generator

I have added the following code to a 2-column layout with header and footer generated by the program - it would be great if these tweaks were added to the results for everyone. I found them necessary to get a consistent layout in IE5, which had problems otherwise.

In the CSS for the #outer div:

border-top:0px; /* prevents ie5.0/win from 1px gap at top revealing background colour */
margin-bottom:-1px; /* prevents ie5.0/win from 1px gap at bottom revealing background colour */

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS Layout Generator

Thanks Chris,
I'll have a look into it over the next couple of days.

NikLP
Offline
newbie
Last seen: 17 years 14 weeks ago
Joined: 2004-03-08
Posts: 3
Points: 0

CSS Layout Generator

Thanks man, I forgot all about this and it just came in handy.
It appears to bug out on IE6 as well btw. POS software.

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 11 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

CSS Layout Generator

Hey Tony i took a look at the generator and found a typo. I believe "XTML" should be "XHTML" unless it was intentional Wink

I am Dan, Dan I am.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

CSS Layout Generator

Hi Fruitcake,
Thanks very much for pointing it out.
Over 32,000 layouts generated and nobody mentioned it :roll:
I wonder if like me they didn't notice.

The old copy and paste got me again, all the XHTML options were XTML.
At least it generated the correct doctype after you selected the misspelled options.

Thanks