8 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

The CSS Layout Generator has been updated after over 81000 generated layouts. There may still be a few bugs to iron out, so I will appreciate any feedback.
The layout generated, is now a simple floated column layout, which should be easier to use then the previous layout. You can now select column widths as percentage, pixel or ems as long as all the columns use the same unit of measurement.

A couple of noticeable changes or limitations may need to be explained.
Firstly the columns will not appear the same length by default. If you wish to have the columns look the same length then you have a couple of options.
You could use the Faux Column technique which uses background images to give the appearance of full length columns. The Layout should be easy to apply this technique to with the containing divs #wrapper, which contains the three columns and #twocols which contains the #rightcol and #maincol. (#maincol is the main content column).

Another option for giving the appearance of full length columns is to use background-color on the two containing divs. This will work fine as long as you know which column will be the longest. If the #maincol is longest applying the background color of #rightcol to #twocols and the background color of #leftcol to #wrapper will give the look of full equal length columns. This technique will work also with a little adjustment if the #rightcol is longest. Unfortunately you would have to make other adjustments if #leftcol is longest such as containing #leftcol and #maincol in #twocols and floating left instead of right.

Finally you could use JavaScript to set the columns to equal length if you are unsure which will be longest. Well this is known as the year of the DOM or should that now be year of AJAX.

The other major difference from the previous layout is that you can no longer set fixed width side columns and have a fluid center column. With the new layout You need to have them all fluid or all fixed width. This may not suit some designs or may require a little creative thinking but shouldn't pose any real problem. You can set min and max widths on the layout which will limit problems caused by small browser windows in most modern browser.

Overall I think the layout should be more useful to most of us and due to it's simplicity should be easier to shape/hack as required.

Please let me know if you discover any bugs or errors so they can be corrected.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 33 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Layout Generator

i had been struggling w/ the column length issue. i hadn't read your introduction of the new generator until just now, so i spent a lot of time trying to decide what was "wrong" w/ my own layout.

i look forward to trying some of your suggested fixes.

thanks for publishing such a wonderfully useful tool.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Layout Generator

Hey Tony, I'm back (gasp, where's he been?)

My full height equal height column generator tool (no images used here thankyou) will be up at Big John's site as soon as he uploads it.

Lots of bug fixes and new ideas, slimmed down code. As far as I know, it works in IE Win and MAC (not full height on the mac version coz it will only do this in quirks mode), Safari, Konqueror, Firefox and Opera.

Hopefully, it will be here (this intro page has a cool way of doing rounded corners using css with very minimal use of images, no floats used):

http://www.positioniseverything.net/pagemaker_2_7_home.html

Don't know when Big John will get it up (and the page)!

Trevor

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Layout Generator

Hi Trevor,
Nice to here from you again.
I look forward to checking out your new generator.

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 33 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Layout Generator

hello, gentlemen. for those of us less-knowing, ClevaTreva, i ask respectfully: what is this soon-to-be-published new generator going to do, as compared to the existing generator here?

i realize there must come a day when the generator is not the first thing i go for when starting a new design, but for now, i'm still learning a lot by example, and i had probably best stay that way for a while. Wink

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Layout Generator

Hi

jsabarese wrote:
what is this soon-to-be-published new generator going to do, as compared to the existing generator here?

Well, my one gives you background color for the full page height in all columns WITHOUT using images to force it. This means that this is done by use of the background css settings. Which means you can replace the color with a simple repeating background image.

In turn, that means you can do a lot of whizzy things without using tables.

This site uses tables:

http://www.absolutecross.com/tutorials/psp/metal-text

You could do something quite similar with just css.

Trevor

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 7 years 33 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

Layout Generator

uh-ha! very cool. thanks for being so thoughtful of everyone. i, for one, am certainly anxious to try it out!

evermorian_too
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2006-01-28
Posts: 1
Points: 0

Layout Generator

Quote:
The other major difference from the previous layout is that you can no longer set fixed width side columns and have a fluid center column. With the new layout You need to have them all fluid or all fixed width.

Okay. Why?

I've been searching and browsing the forums and the web for awhile and can find no explanation. Someone mentioned a vague rumor that fixed-width side columns with a fluid center column have rendering problems in some browsers. I have one such layout (fixed-width left column, fluid center/right column, header and footer) that is based on something generated with the old version of CSSCreator. It works fine in my collection of test browsers (14+ different browsers on 3 different platforms).

If there is a problem I am missing, I would like to know about it. Can you point me to a reference? If not, why did you remove the functionality in the new version of CSSCreator?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 15 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Layout Generator

Hi evermorian_too,
The old layouts were to difficult for most people to use and understand.
I found that I didn't use the old generated layouts to build websites as the template was too complicated.
The layouts I used were like the current version of the generator.

Instead of fixed width columns think in terms of min-width and max-width or use a fixed width layout.

Hope that helps