Ramblings of a web mercenary.
The demo below demonstrates the CSS Filmstrip technique, as applied to a hyperlink. The four images in the “filmstrip” represent the hyperlink’s four states: link, visited, hover, active. The dashed line represents the width and height of the hyperlink, and therefore the visible part of the filmstrip image. The dot on the bottom left allows you to simulate a clearing of browser history, in order to reset the hyperlink to its “link” state.
One of the most basic and useful layouts to know how to create is the two column layout. There is a way to create it that is both easy to understand, but also cross-browser compatible. Rather than go on in depth as to how to do it, I have opted to show a small flash animation that demonstrates each step, with the code that makes it happen.
In the example below, hover over the boxes to get the id of the div it represents. You can also click on the dots to go to a specific step of the process, and see the CSS code associated with it. I hope that it helps some of you to visualize what is actually happening when you create an “opposing floats” two column layout. If you understand how it works on a more deeper level, then you will find debugging it becomes much easier.