Re: [WSG] Table-Free Design
Hi John, Some step-by-step tutorials that may be of help to you: 3 column layout with fixed edge columns: http://css.maxdesign.com.au/selectutorial/tutorial_intro.htm 3 column liquid layout: http://www.maxdesign.com.au/presentation/liquid/ 3 column semi-liquid layout: http://css.maxdesign.com.au/floatutorial/tutorial0915.htm 2 column semi-liquid layout http://css.maxdesign.com.au/floatutorial/tutorial0801.htm 2 columns with colour: http://nemesis1.f2o.org/articles 2 columns fixed width: http://www.maxdesign.com.au/presentation/process/ HTH Russ If I want to find solid building blocks for a table-free layout, where should I start? I mean, I know there are hundreds of websites, but the recommendations of this group ought to be particularly useful. The thing is, I want a lot! In terms of the page, I'm simply looking for * banner * three-column flexible layout for the main content * footer but I'm hoping that the page doesn't exhibit any strange behaviours when the page gets too small/content gets too bit, like DIVs overlapping each other or disappearing to the bottom of the page, and I'm even hoping that the layout can be content-first, nav-second in the source. I was also hoping that the CSS can be relatively straightforward and not consist of 147 nested @import statements full of high-pass/low-pass filters and box model hack code etc. Am I asking too much? I won't be trying to support Netscape 4, if that helps... jh ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Table-Free Design
John, There is a great list of categorised CSS 3 Column layouts available at the CSS Discuss Wiki: http://css-discuss.incutio.com/?page=ThreeColumnLayouts Original Message From: [EMAIL PROTECTED] To: [EMAIL PROTECTED] Subject: RE: [WSG] Table-Free Design Date: Mon, 16 Aug 2004 15:39:49 +1000 If I want to find solid building blocks for a table-free layout, where should I start? I mean, I know there are hundreds of websites, but the recommendations of this group ought to be particularly useful. The thing is, I want a lot! In terms of the page, I'm simply looking for * banner * three-column flexible layout for the main content * footer but I'm hoping that the page doesn't exhibit any strange behaviours when the page gets too small/content gets too bit, like DIVs overlapping each other or disappearing to the bottom of the page, and I'm even hoping that the layout can be content-first, nav-second in the source. I was also hoping that the CSS can be relatively straightforward and not consist of 147 nested @import statements full of high-pass/low-pass filters and box model hack code etc. Am I asking too much? I won't be trying to support Netscape 4, if that helps... jh ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Regards, David McDonald Web Designer http://www.davidmcdonald.org ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table-Free Design
John, If I want to find solid building blocks for a table-free layout, where should I start? I mean, I know there are hundreds of websites, but the recommendations of this group ought to be particularly useful. The thing is, I want a lot! In terms of the page, I'm simply looking for * banner * three-column flexible layout for the main content * footer but I'm hoping that the page doesn't exhibit any strange behaviours when the page gets too small/content gets too bit, like DIVs overlapping each other or disappearing to the bottom of the page, and I'm even hoping that the layout can be content-first, nav-second in the source. You can definitely do some of that, but there are trade offs. sooner or later all such layouts will overlap or break. I was also hoping that the CSS can be relatively straightforward and not consist of 147 nested @import statements full of high-pass/low-pass filters and box model hack code etc. it's not all that necessary. I find the Tantek BM hack is really only necessary when you are obsessed with widths, down to the pixel level. Am I asking too much? I won't be trying to support Netscape 4, if that helps... Heaps ;-) I'm sure others will point out some great resources like http://positioniseverything.net/ http://www.bluerobot.com/ (getting long in tooth) and many others. Try Style master though. It's got a multi column layout wizard, and a fair number of two and three column layout templates you can reuse royalty and attribution free. http://www.westciv.com/style_master/ HTH john John Allsopp :: westciv :: http://www.westciv.com/ software, courses, resources for a standards based web :: style master blog :: http://westciv.typepad.com/dog_or_higher/ :: WebEssentials Sept 2004 Sydney Australia :: http://www.we04.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table-Free Design
Okay. When I wanted to learn I went straight to the guru Dave Shea.
He gave me the best 2 resources:
1. Eric Meyer on CSS You can find this book here:
http://www.amazon.com/exec/obidos/tg/detail/-/073571245X/
qid=1071555113/sr=1-1/ref=sr_1_1/102-5606242-1912942?v=glances=books
2. http://www.dezwozhere.com/links.html
This is a page of links for all things CSS. I'm on it all the time.
Wow what a resource.
This page took me to the beginning place that I learned it all. Go
through this tutorial and you'll be doing exactly what you just asked
in a matter of hours:
http://www.wpdfd.com/editorial/basics/index.html (CSS from the ground
up) and specifically steps 7 - 9. The chances are you'll now the first
few steps already. I did when I went through it, but it was a good
refresher and it explains some good typography tips.
I hope these help.
Also read these group discussions everyday and don't be afraid to ask
anything on subject. Also listen to Hugh Todd. He knows his stuff.
He saved me in a crunch!
Shane Helm
{ sonzeDesignStudio
On Aug 15, 2004, at 11:39 PM, John Horner wrote:
If I want to find solid building blocks for a table-free layout, where
should I start?
I mean, I know there are hundreds of websites, but the recommendations
of this group ought to be particularly useful.
The thing is, I want a lot! In terms of the page, I'm simply looking
for
* banner
* three-column flexible layout for the main content
* footer
but I'm hoping that the page doesn't exhibit any strange behaviours
when the page gets too small/content gets too bit, like DIVs
overlapping each other or disappearing to the bottom of the page, and
I'm even hoping that the layout can be content-first, nav-second in
the source.
I was also hoping that the CSS can be relatively straightforward and
not consist of 147 nested @import statements full of
high-pass/low-pass filters and box model hack code etc.
Am I asking too much? I won't be trying to support Netscape 4, if that
helps...
jh
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Table-Free Design
Thanks everyone for your help so far. I'm getting very interested in the work of Big John and Holly at http://positioniseverything.net/ and Alex at http://www.fu2k.org/alex/css/ which I certainly wasn't familiar with. Their code is as light on the hacks as possible, but also fully flexible and Netscape 4 compatible, which seems miraculous, considering. Have You Validated Your Code? John Horner(+612 / 02) 9333 2110 Senior Developer, ABC Online http://www.abc.net.au/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table-Free Design
Hi John, You could also try out the css layout generator http://www.csscreator.com/version2/pagelayout.php Tony http://www.csscreator.com/ http://www.multiwebspace.com/ John Horner wrote: If I want to find solid building blocks for a table-free layout, where should I start? I mean, I know there are hundreds of websites, but the recommendations of this group ought to be particularly useful. The thing is, I want a lot! In terms of the page, I'm simply looking for * banner * three-column flexible layout for the main content * footer but I'm hoping that the page doesn't exhibit any strange behaviours when the page gets too small/content gets too bit, like DIVs overlapping each other or disappearing to the bottom of the page, and I'm even hoping that the layout can be content-first, nav-second in the source. I was also hoping that the CSS can be relatively straightforward and not consist of 147 nested @import statements full of high-pass/low-pass filters and box model hack code etc. Am I asking too much? I won't be trying to support Netscape 4, if that helps... jh ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table-Free Design + Big John
Hi John and the rest of the group I started working with CSS about 4 months ago and have recently launched 2 sites using full CSS . http://www.northernopportunities.bc.ca http://www.spcrs.ca The reason I posted was that Big John worked with me on the Northern Opportunities site and it has done very well since we launched it 15 days ago. The code is very clean and John definitely knows what he is doing. I am still working on cleaning up and replacing some javascript we used but the site works well and I wouldn't have been able to do it without John's guidance. His site was a great resource and you will find he is careful with the hacks and assisted me in designing workarounds that still achieved the end result. As far as tables go, we have a few on some of the program pages for tabular data that is being replaced with PDF's in coming weeks. What I am most proud of is the layout and colors we setup using the ID / Class in the body tag ( on the Northern Opportunities site ). Beautiful for templating on a larger site (the N.O. website is 288+ pages). Cheers Gordon Currie President/CEO Eldoren Design ps. Zeldman's book and the website alistapart.com really helped me as well. Dan Cedarholm's new book is HIGHLY recommended for new CSS folks. At 07:32 AM 8/15/2004, you wrote: Thanks everyone for your help so far. I'm getting very interested in the work of Big John and Holly at http://positioniseverything.net/ and Alex at http://www.fu2k.org/alex/css/ which I certainly wasn't familiar with. Their code is as light on the hacks as possible, but also fully flexible and Netscape 4 compatible, which seems miraculous, considering. Have You Validated Your Code? John Horner(+612 / 02) 9333 2110 Senior Developer, ABC Online http://www.abc.net.au/ - Eldoren Design (a division of Eldoren Consulting Inc.) Web Site Design, Internet Marketing http://www.eldoren.com Email: [EMAIL PROTECTED]Voice 250-784-8383 ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table-Free Design
The Layout Reservoir - BlueRobot http://www.bluerobot.com/web/layouts/ -- Neerav Bhatt http://www.bhatt.id.au Web Development IT consultancy Mobile: +61 (0)403 8000 27 http://www.bhatt.id.au/blog/ - Ramblings Thoughts http://www.bookcrossing.com/mybookshelf/neerav John Horner wrote: If I want to find solid building blocks for a table-free layout, where should I start? I mean, I know there are hundreds of websites, but the recommendations of this group ought to be particularly useful. The thing is, I want a lot! In terms of the page, I'm simply looking for * banner * three-column flexible layout for the main content * footer but I'm hoping that the page doesn't exhibit any strange behaviours when the page gets too small/content gets too bit, like DIVs overlapping each other or disappearing to the bottom of the page, and I'm even hoping that the layout can be content-first, nav-second in the source. I was also hoping that the CSS can be relatively straightforward and not consist of 147 nested @import statements full of high-pass/low-pass filters and box model hack code etc. Am I asking too much? I won't be trying to support Netscape 4, if that helps... jh ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
