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/
