Notes on this design 1-27-07:

This test is a variation of the "quick rollovers" I experimented with in my previous Design Test 14. However, here I wanted to see if I could incorporate the hovers into a series of links organized as a list. The previous design only had a single image link that used the hover technique. The list above has several, and works great. For a few minutes I doubted that this was possible, since Design 14 had absolute positioning in order to make the link display as a block level element. Using absolute positioning here, however, would result in all the links displaying over each other. I managed to correct this, by not including absolute positioning and instead opting for "display:block", which also forces the links to display as a block level element.

There is no border or background color on the above links; all of the borders and background gradients are done through the use of a single background image. The links are actually wider than the buttons look: in order to achieve that "flyout" effect when the hover occurs, I have a good chunk of whitespace in the image. Below is the complete background image, explaining this better than I could. There is a red border around the image, showing the whitespace that is included:


Even with this space in the background image, I can still make the text look centered by adding in some left padding. If I ever decided to replicate this "flyout" effect without any images, then I would probably have to mess around with the padding a bit more.

Since these links are contained in a list, they degrade very nicely, and display as a simple bulleted list when all styles are removed. On the whole, I am happy with this design.

Back to Design Tests Portfolio