Re: [WSG] liquid faux columns
From: "Ted Drake" <[EMAIL PROTECTED]> Hi All I'm working on a project in its initial stages and thought about using a simple background image to create flexible columns. Here's a sketch: Hi Ted, It's probably a toss of the dice in determining if fewer users have images or javascript disabled, and since this is not a mission critical behavior, a scripted solution might be advantageous - if not more flexible: http://www.projectseven.com/tutorials/css/pvii_columns/ Hope it helps (and hope it doesn't start a holy war :-) Al Sparber PVII http://www.projectseven.com "Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday". ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] liquid faux columns
Ted Drake wrote: > Hi Terry, > The last layout is a bit off in firefox 1.5beta for me. > Well, maybe a bit more than a bit. The righ div is overlapping the > center. Thanks Hi Ted, I know, I do mention it on the page. But it's not a problem with the layout, it's a Gecko bug [1]. I don't rush on last builts ;) it's Alex Robinson who warned me about it. [1] https://bugzilla.mozilla.org/show_bug.cgi?id=312777 Thierry | www.TJKDesign.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help **
Re: [WSG] liquid faux columns
Hi Ted,
Here is an example:
http://www.maxdesign.com.au/presentation/liquid-layouts/background.htm
HTH
Russ
> Sounds simple enough? However, I'd like the columns to be flexible. So, my
> first thought was to create two background images, one for the right and one
> for the left and apply them to the div and another element. But that doesn't
> sound like the best idea, I still need them to vary their distances. Here's
> my next idea: create a single background image of a line. Apply it as the
> background with a style like this:
> #targeted-div {background: url(line.gif} 33% 0 repeat-y;}
> and just for simplicity
> #inner-div {background: url(line.gif} 66% 0 repeat-y;}
>
> I'd try this out right now, but I'm editor less at this moment.
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] liquid faux columns
Hi Terry,
The last layout is a bit off in firefox 1.5beta for me.
Well, maybe a bit more than a bit. The righ div is overlapping the center.
Thanks
ted
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Thierry Koblentz
Sent: Wednesday, October 19, 2005 5:12 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] liquid faux columns
Ted Drake wrote:
> Sounds simple enough? However, I'd like the columns to be flexible.
> So, my first thought was to create two background images, one for the
> right and one for the left and apply them to the div and another
> element. But that doesn't sound like the best idea, I still need them
> to vary their distances. Here's my next idea: create a single
> background image of a line. Apply it as the background with a style
> like this: #targeted-div {background: url(line.gif} 33% 0 repeat-y;}
> and just for simplicity
> #inner-div {background: url(line.gif} 66% 0 repeat-y;}
>
> I'd try this out right now, but I'm editor less at this moment.
>
> Has anyone tried something like this? Do you have any suggestions?
> Wouldn't it be nice if we could use the new CSS properties for
> multiple backgrounds?
Hi Ted,
Due to "poupular demand" ;), I've implemented faux-columns techniques on a
few "liquid" layouts here:
http://www.tjkdesign.com/articles/liquid.asp (see thumbnails at the bottom
of the document).
% values match, which mean 20% of an image will be positionned in relation
to the same percentage for the element (background).
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
Re: [WSG] liquid faux columns
Ted Drake wrote:
> Sounds simple enough? However, I'd like the columns to be flexible.
> So, my first thought was to create two background images, one for the
> right and one for the left and apply them to the div and another
> element. But that doesn't sound like the best idea, I still need them
> to vary their distances. Here's my next idea: create a single
> background image of a line. Apply it as the background with a style
> like this: #targeted-div {background: url(line.gif} 33% 0 repeat-y;}
> and just for simplicity
> #inner-div {background: url(line.gif} 66% 0 repeat-y;}
>
> I'd try this out right now, but I'm editor less at this moment.
>
> Has anyone tried something like this? Do you have any suggestions?
> Wouldn't it be nice if we could use the new CSS properties for
> multiple backgrounds?
Hi Ted,
Due to "poupular demand" ;), I've implemented faux-columns techniques on a
few "liquid" layouts here:
http://www.tjkdesign.com/articles/liquid.asp (see thumbnails at the bottom
of the document).
% values match, which mean 20% of an image will be positionned in relation
to the same percentage for the element (background).
Thierry | www.TJKDesign.com
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
RE: [WSG] liquid faux columns
Hi Ted,
I haven't tried it out, but at WE05 in one of the presentations there was
images given a percentage width for fluididity. Check it out:
http://we05.com/podcast/ Russ Weakley's one.
I guess you could apply it to backgrounds too??? I've been meaning to
try it myself.
But yes, it will be LOVELY when we can have multiple backgrounds!!
Rachel
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of Ted Drake
Sent: Thursday, 20 October 2005 12:02 p.m.
To: wsg@webstandardsgroup.org
Subject: [WSG] liquid faux columns
Hi All
I'm working on a project in its initial stages and thought about using a
simple background image to create flexible columns. Here's a sketch:
| |
| |
| |
| |
Sounds simple enough? However, I'd like the columns to be flexible. So, my
first thought was to create two background images, one for the right and one
for the left and apply them to the div and another element. But that doesn't
sound like the best idea, I still need them to vary their distances. Here's
my next idea: create a single background image of a line. Apply it as the
background with a style like this:
#targeted-div {background: url(line.gif} 33% 0 repeat-y;}
and just for simplicity
#inner-div {background: url(line.gif} 66% 0 repeat-y;}
I'd try this out right now, but I'm editor less at this moment.
Has anyone tried something like this? Do you have any suggestions? Wouldn't
it be nice if we could use the new CSS properties for multiple backgrounds?
Thanks
Ted
www.tdrake.net
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
**
