Fluid container with tiling background

[Nik Coughlin]

One thing that has always annoyed me, and I just design around it, is having
a tile that you want to use for your background image that doesn't
seamlessly tile, in a container that you want to be fluid. I had a go at
it, but had to use javascript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the JS?

[rf]

"Nik Coughlin" <nr******@gmail.comwrote in message
news:fi**********@aioe.org...

One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that doesn't
seamlessly tile, in a container that you want to be fluid. I had a go at
it, but had to use javascript:

http://nrkn.com/fluidTiling/

>
Question, anyone have *any* ideas about how you could do it without the
JS?

Notice that you have to "do" stuff to make this happen. More precicely you
have to *do* stuff to certain margins on browser resize. Since neither HTML
nor CSS actually *do* stuff, but merely describe how other stuff is layed
out (they are not programming, despite the L in HTML), you are IMHO out of
luck.

BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page
is made wider. These browsers fire onresize after every mouse move, not at
the end of the resize operation - a page re-layout re-paint after every
pixel and the repaint is not smart, it erases the canvas to white and then
paints the new content.

--
Richard.

[Nik Coughlin]

"rf" <[e-mail] in message
news:m4*******************@news-server.bigpond.net.au...

>
"Nik Coughlin" <nr******@gmail.comwrote in message
news:fi**********@aioe.org...

>One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that doesn't
seamlessly tile, in a container that you want to be fluid. I had a go at
it, but had to use javascript:

http://nrkn.com/fluidTiling/

>>
Question, anyone have *any* ideas about how you could do it without the
JS?

Notice that you have to "do" stuff to make this happen. More precicely you
have to *do* stuff to certain margins on browser resize. Since neither
HTML nor CSS actually *do* stuff, but merely describe how other stuff is
layed out (they are not programming, despite the L in HTML), you are IMHO
out of luck.

Yeah, I thought as much, but I also thought that maybe some jiggery pokery
magic with percentage widths, negative margins etc. might be able to hack
together into something that works. Haven't thought that approach through
far enough to know for sure but I suspect that it wouldn't be possible.

BTW it does work in IE6 and IE5.5 but with horrendous flashing as the page
is made wider. These browsers fire onresize after every mouse move, not at
the end of the resize operation - a page re-layout re-paint after every
pixel and the repaint is not smart, it erases the canvas to white and then
paints the new content.

Yuck.

[Jeremy]

Nik Coughlin wrote:

One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that
doesn't seamlessly tile, in a container that you want to be fluid. I
had a go at it, but had to use javascript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the JS?

I can think of a couple of ways to do that without Javascript, but all
of them are far less elegant than just using the JS :P

Jeremy

[dorayme]

In article <Wp*****************@newsfe24.lga>,
Jeremy <je****@pinacol.comwrote:

Nik Coughlin wrote:

One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that
doesn't seamlessly tile, in a container that you want to be fluid. I
had a go at it, but had to use javascript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the JS?

I can think of a couple of ways to do that without Javascript, but all
of them are far less elegant than just using the JS :P

What are these ways?

--
dorayme

[dorayme]

In article <IQ**************@newsfe19.lga>,
Jeremy <je****@pinacol.comwrote:

dorayme wrote:

In article <Wp*****************@newsfe24.lga>,
Jeremy <je****@pinacol.comwrote:

Nik Coughlin wrote:
One thing that has always annoyed me, and I just design around it, is
having a tile that you want to use for your background image that
doesn't seamlessly tile, in a container that you want to be fluid. I
had a go at it, but had to use javascript:

http://nrkn.com/fluidTiling/

Question, anyone have *any* ideas about how you could do it without the
JS?
I can think of a couple of ways to do that without Javascript, but all
of them are far less elegant than just using the JS :P

What are these ways?

OK, here is one (I can't resist a good CSS challenge)

http://www.duckwizard.com/ciwas/square.html

OK, looks quite clever an attempt. I guess it would be tricky to
adjust to the surrounding not overlaying the text at the bottom
(in my FF and Safari) when the font size is upped a notch or two
by the user?

It fails a bit in Safari, the right vertical col is not clean (it
is one and a bit 'question boxes' wide. So still not up to Nick's
js in simple performance. Not yet at any rate. <g>

My swim is coming up soon. Got to go.

--
dorayme

[Jeremy]

Nik Coughlin wrote:

>
Still, very cool. Breaks in some situations, but I think we have gone
beyond real world usage here anyway :) Now I'm gonna have to try and
think of another out-of-left-field way to do it...

I think a Javascript solution is your best bet; it may not look terrific
for the fraction of people with JS disabled, but the page will still
function correctly and that's the important thing.

However, there are a couple of things you could do to improve the JS
solution, particularly for IE. One thing I can think of is using a
short timeout to update the box, and canceling the timeout if it hasn't
already occurred by the next resize. That way you will avoid the
constant redrawing that causes it to look so bad in IE during the resize
(essentially making it behave like Firefox does, where it only updates
when you stop resizing).

But that's getting off topic (and you probably already know you can
improve the JS). By the way, your page works fine in IE6.

Jeremy

[Jeremy]

dorayme wrote:

>
OK, looks quite clever an attempt. I guess it would be tricky to
adjust to the surrounding not overlaying the text at the bottom
(in my FF and Safari) when the font size is upped a notch or two
by the user?

It fails a bit in Safari, the right vertical col is not clean (it
is one and a bit 'question boxes' wide. So still not up to Nick's
js in simple performance. Not yet at any rate. <g>

My swim is coming up soon. Got to go.

Yeah - text size adjustment is the least of the problems. The bigger
problem is that you have to calculate for each content box how many
floating squares you need to pad the box out enough. And then - like
you said - it will break if someone has a text size that doesn't mesh
with yours.

I tried this with 32em width and height to account for this (which
theoretically should work to some degree, as the grid boxes will always
be a multiple of 32px IF the font size is an integer) - not only was the
quantization level much too great for it to be useful, but the text size
is apparently NOT always an integral number of pixels (which surprised me).

Anyway, I don't think a CSS solution exists that would be more elegant
than a good Javascript solution. Javascript is great for adding extra
decoration features - as long as it's unobtrusive and gracefully degrades.

Jeremy