In my last group review on a site I'm re-designing, I made the mistake
of screen-capturing the site at its current state, pasting it into
Photoshop, and letting several people standing around my computer
throw out suggestions about ways to tweak the site visually. It was a
little nerve-racking, but actually turned out to be a challenging and
energizing experience. The end result was something that stumped my
CSS ability. Rats.
Basically, I had built the site as a horizontally-centered fixed-width
single column div that used, for the body background-image, a 1-px
height, 1024px wide repeat-y tile. Originally, I had 3 stripes in the
3 company colors created in the 1px tile going down the left side of
the page. During the review, a suggestion was made to fade out the
stripes down the left hand side of the page vertically. I did it in
Photoshop in seconds, and everyone gathered around immediately said,
ooh, yeah, we like it, do it like that and the meeting was
adjourned.
When I sat down to implement it in CSS2 I realized it couldn't be done
without having issues in one way or another... or support for two
tiled background images.
The only way I could preserve most of the original code and page
structure would be to make the background image extremely large,
because I'd need to include the entire page 1024 wide, by a height
of... oh yeah, my site is dynamic with some pages a lot taller than
others. So it'd have to be at least 1024 x 1600... an 800px height
with, i guess, a gradiation back to the solid stripes? Otherwise you'd
see the stripes start up again. So, huge background image to download
-- yuk. Non-seamless tiling -- yuk.
I tried making the side fade in separate pieces, but I couldn't get
them to position perfectly when resizing the browser window, and you
could see the edges not lining up due to the stripes - meaning, when
the div containing the gradient tile moved over the (completely faded
out background tile) the illusion is broken, even if only 1 pixel,
even if for only a moment.
The only other way I could think of to do it was put the 1px tile
background-image on body and add a div id=page surrounding
everything else in the page (a container for a second background
image), with the stripe fading out as a non-tiled left-top aligned
background image. The trouble with this is that #page only extends as
far down the page as the dynamic content inside it, and on short pages
the fading image breaks too early.
I ended up rewriting all my lovely table-less CSS2 goodness by hacking
a junky, old-school 3x3 table together with a single, tall tiling
image in column 4. I'm so ashamed. But it works (sort of, for now -
I'm on deadline.) Even this has potential breakage issues.
The current version is staged here:
http://www.stgmediacorp.com/v3/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
