DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 09-19-2005, 08:56 AM   #1
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default CSS 4-cols two ways

The other day when I complained that I couldn’t seem to get a 4-column liquid layout to work, Kelvyn referred me to an article on creating 4-column layouts at the glish.com site. so I decided to give it a try.

Glish suggests using absolute positioning, and once I got the widths and percentages to add up, it worked fine, as you can see from the positioned example here. But the format is very limited, especially for text pages.

The main problem is that you cannot easily have a footer or any other object below the text columns. Well, you can, but you must declare its absolute top, and since you have no way to be certain how viewers will have their browser window and font sizes set, you have to allow a lot of extra space in case the upper text overruns the lower. It is at best a homely thing.

The funny thing, though, is then I decided to use the identical HTML and create a liquid layout with float (the very thing I could not for the life of me do the other day), and it too worked fine (see the floating example here).

Perhaps it is the simplicity of this test page that allowed it to work. With more elements and more CSS stuff, the floats might fall apart as they always have for me in the past. But I am grateful to have gotten a bit further with this, and hope maybe it might help others who struggle with CSS pages.

If you are not familiar with the Glish site, it offers good advice on CSS, including a bunch of links (some of them oldish) to other CSS-oriented sites. One of these is a useful tutorial at the Web Reference site on using CSS to recreate a 3-column table-built layout with CSS.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-19-2005, 12:37 PM   #2
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Nag nag nag. You think if you keep posting this stuff I may actually learn to replace tables with CSS? (Yeah, you're probably right. Thanks.)

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 09-19-2005, 12:50 PM   #3
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by jgr
Nag nag nag. You think if you keep posting this stuff I may actually learn to replace tables with CSS? (Yeah, you're probably right. Thanks.)
Did you ever hear the expression: “If the shoe fits, wear it!” It’s not as if I addressed the message to you, right? <g>

But mainly I was just excited. I couldn’t do a four-column CSS layout to save my life on Saturday, and by Sunday I had done one. Now whether I will be able to do it in real life is another story (do not often have a call for that). But it is progress.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-20-2005, 11:54 AM   #4
Stephen Owades
Member
 
Join Date: Feb 2005
Location: Cambridge, MA USA
Posts: 179
Default

I'm increasingly becoming annoyed at the fixed-position objects that screw up pages when I increase the type size in Firefox (control-+). On your example page, the multi-column text at the top just disappears behind the box at the bottom when the text is enlarged sufficiently. I've run into other pages where a fixed object gets in the way on the right as well.
Stephen Owades is offline   Reply With Quote
Old 09-20-2005, 12:14 PM   #5
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Stephen Owades
I'm increasingly becoming annoyed at the fixed-position objects that screw up pages when I increase the type size in Firefox (control-+). On your example page, the multi-column text at the top just disappears behind the box at the bottom when the text is enlarged sufficiently. I've run into other pages where a fixed object gets in the way on the right as well.
As I pointed out, that is the deal breaker with position absolute as far as I am concerned — except with images, maybe.

Very annoying.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-20-2005, 02:23 PM   #6
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel
Did you ever hear the expression: “If the shoe fits, wear it!” It’s not as if I addressed the message to you, right? <g>
You didn't need to! (But I am very grateful for all the links. One of these days......)

   
__________________
-- jgr
jgr is offline   Reply With Quote
Old 09-20-2005, 04:16 PM   #7
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by jgr
You didn't need to! (But I am very grateful for all the links. One of these days......)
I am still learning, and give a lot of credit to Ian Petersen, who is both stern and helpful. I would be glad to pass it on.

I do think that once you get most of the kinks worked out, you will find that CSS is good. (And then you can bat your head against the wall for MSIE compliance like the rest of us!)

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 09-20-2005, 06:08 PM   #8
jgr
Member
 
Join Date: Dec 2004
Posts: 276
Default

Quote:
Originally Posted by ktinkel
(And then you can bat your head against the wall for MSIE compliance like the rest of us!)
This is something to look forward to???

   
__________________
-- jgr

Last edited by ElyseC; 09-20-2005 at 06:44 PM. Reason: Mended broken forum quote
jgr is offline   Reply With Quote
Old 09-21-2005, 12:11 AM   #9
vavroom
Member
 
Join Date: Sep 2005
Posts: 21
Default

Take three aspiring/tylenol/drug of choice before batting your head against the wall, eh?

I am *not* looking forward to see how non-compliant v7 of Exploder is going to be... Having to keep track of making one's css work in 5.5, 6 *and* 7... <sigh>

   
__________________
Nic
Joomla core team member - Usability & Accessibility
vavroom is offline   Reply With Quote
Old 09-21-2005, 04:47 AM   #10
CherylJohnson
Member
 
CherylJohnson's Avatar
 
Join Date: Aug 2005
Location: Northeast Los Angeles (NELA to the locals), California, USA
Posts: 5
Default Tables

Judy,

You might remember me - I’m in the same boat as you: Tables seem simple and logical to me. Selectors, and floaties, and divs (oh my) make my head throb. But take a look at this from the Dreamweaver Developer Center

Note paragraph Three: "I would like to make it clear that I do not advocate you dropping the use of tables as design elements. It is a case of what suits you best....."

And get your hands on Eric Meyer’s book "Eric Meyer on CSS" (this was published in 2002, I bought it a couple years ago, just now opening it up -- which says something about my life :-))

The book has 13 hands-on tutorial projects -- 3 of those projects allow tables for layout -- table cells are given ids <td id="title"> then the cell ids are styled in the style sheet.

So I can keep my tables for global layout - and style everything else. Maybe it’s heresy, but it works for me. And then, maybe someday later on I can move to pure-CSS columns.
CherylJohnson is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Interesting ways of displaying data..? Paddybhoy Print Design 10 01-13-2007 12:09 AM
Ways to liven up multiple photo spreads? leekaye Print Design 6 07-18-2006 10:45 AM
Quark "Parts Ways" with CEO Stephen Owades General Publishing Topics 2 06-17-2005 08:07 AM


All times are GMT -8. The time now is 12:19 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.