Published in CSS on Wednesday, March 31st, 2004
This is the first entry for what will be the 'Cool Tricks with CSS' category of this blog.
Though not really a trick, this first example, from Dunstan Orhcard's blog, hilites a case of great attention to detail, the kind that can make your clients look good, which of course is part of what they are paying you for!
One of the drawbacks of liquid design is that, at a certain screen width, a design will collapse, as there is simply not enough screen space to deal with the amount of content available.
Check out the boxes in this example. The two upper boxes use floats for positioning, while the two on the bottom use 'position' for positioning. When you resize your screen width, some potentially bad things can happen to your layout. Do you have a contingency plan in hand to deal with this?
What to do? Well, in a world of tradeoffs, a decision has to be made as to how to deal with this situation.
Now head on over to Dunstan's blog with a 'modern' browser (i.e. not Internet Explorer). Now, try resizing the window, down to about 300 pixels. See how the right hand column hides behind the left column? Cool huh?
Dunstan has made a tradeoff here - he's decided that the blog entries are more important than his blog roll and other links once the user is down to a screenwidth of < 500 pixels. Seems fair to me, and he comes out looking good in the process.
Looking again at this example, the two lower boxes demonstrate the same behavior. The trick is to position the boxes, and apply a z-index along with a background color on the left box, so that when the boxes begin to overlap, the right box slides behind the left one.
Have a look at the source code for the example to see how it is done.
This attention to detail is part of what makes Dunstans blog so darn good. I mean, who is going to resize down to 300 pixels anyway?
Well, for whatever reason, I did, and Dunstan came out looking pretty good in my eyes - great attention to detail, that kept the crucial information displayed even at 300px wide!
Do this for your clients, and maybe you'll leave their users thinking the same thing about them.
Well, you guessed it, IE does not support min-width, a crucial element for this to work. I would suggest, however, keeping an eye on Dean Edwards' IE7, for if he can sort out min/max width for IE, this method would become available for a much larger audience than it is now.
In any case this method can be applied using a set width as well, not as elegant or functional, but it solves the overlapping column situation quite nicely just the same.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Actually, you can make IE handle max-width, min-width and so on. Check out Svend Tofte's site
http://www.svendtofte.com/code/max_width_in_ie/
Hey Tom! Thanks for the tip.
I had read that a while back, and have yet to try and use it. Some people had reported some trouble with it (can't remember where, maybe css-discuss list?) or maybe even WebmasterWorld.
Worth a shot though, min/max width would be very useful...
think i've got min-width working... ;-)
Nice!
That's perfectioning at it's best. I never get around to that stage, unfortunately.
I like Dunstan's weblog not because is looks great (it kinda gets boring after a week or two), but the technical aspects of it. The banner, the extra "click here to post your message" anchor, the archive page, the 404 error page... It all fits nicely, and helps you as a user to find the information that you seek
My ICT teacher would love to see Dunstan's weblog! ;) He treats his copy of "Don't make me think" like the bible. Pity me...
Hey Stefan, nice to see you stop by!
I too love Dunstan's blog for the ease-of-use. Don't make me think and the little details like moving your personal info below the textarea box once you've 'hugged the cookie monster'. All good stuff.
Speaking of 'don't make me think', I used that phrase once on one of our recent clients and it has since changed his outlook on things web related.