cssvault - inspiring creativity

When designers with no HTML knowledge come up with unorthodox layouts, the one slicing the design gets burdened with the task of keeping the HTML version faithful to the original design without breaking the layout, often at the cost of one’s sanity. The task is sometimes complicated by other factors such as maintaining ease of updating the content (whether it be via manual entry or CMS), accessibility requirements, usability, JavaScript / AJAX, browser rendering quirks, idiotic clients, hard to please bosses, etc etc.

Many of us has shared this experience in one form or another. The beauty of the experience is that lightbulb moment where you suddenly figure it out and after 4 hours you now have a working, hand-coded, tableless CSS you can be proud of. Turns out it wasn’t so impossible, after all!

There are many ways to fix impossible CSS layouts:

1. Background image trick - background images coupled with positioning tricks can be utilized to give the illusion that an element is where it’s supposed to be.
2. Positioning - relative and absolute positioning when used correctly with the proper nesting can place an element almost anywhere you need it to.
3. Transparent images - transparent GIF’s and PNG’s can be used to simulate layers just like in Photoshop. There is still a lot of stigma against PNG due to the lack of alpha transparency support in IE6, but this is easily fixed using IE PNG Fix, which requires very little effort and almost no modification to the HTML code.
4. Z-index - the CSS z-index is a tiny gem that helps tame multi-layered CSS, ordering them the way it should be.
5. Image editing - when all else fails, there is nothing easier than editing the image to make it CSS friendly. A common issue that benefits from editing are designs with non-repeatable background patterns. Usually, fading the pattern to the background color would solve this issue.

Personally, I have yet to encounter a design that cannot be encoded into HTML. I invite you all to share your experience. Got an impossible CSS design to layout? Let us take a look at it. It might not be as hard as you think.

Share

This entry was posted on Wednesday, May 14th, 2008 at 5:54 pm and is filed under AJAX, Accessibility, CSS, CSS3, Coding, Design, Development, Howto, Reference, Tricks, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.