HOME | DD

Description
I needed a compact features section for a journal design I'm working on and I like how this turned out so I thought I'd share it.

Live version: here .

Feel free to use it and customize the colours/borders etc. so it works with your designs, but please leave the "by *Vayde " bit in or credit me in some way.

I provided a little explanation in the deviation on what you need to do to change the features, but the best way is to just examine the code and see what's going on.

I would recommend that you steal the transparent 2x2 pixel .PNG and host it at your own location just in case the one at my photobucket goes down, this will only cause the thumbnails to stop functioning as links in any case and wouldn't be too catastrophic.

Valid CSS 2.0 and XHTML 1.0 Strict.

P.S. This will not work in Internet Explorer, (Tested in Mozilla Firefox v3.0.1.). If you don't have Firefox yet then here's another incentive [link]

UPDATE - 17/08/08: Sorry about the confusion as to how to obtain the code. You can now download the code from this location, the .zip folder contains a .html file and .css file for viewing and editing purposes only (they are not linked and the .html file is not set up to work in a browser).

I recommend opening these files in a plain text editor such as notepad++ . Please be aware that you will need to remove the comments from both the html and css when implementing the code in your journal, and also remove the whitespace from the html (easy with something like this .)

Description
I needed a compact features section for a journal design I'm working on and I like how this turned out so I thought I'd share it.

Live version: here .

Feel free to use it and customize the colours/borders etc. so it works with your designs, but please leave the "by *Vayde " bit in or credit me in some way.

I provided a little explanation in the deviation on what you need to do to change the features, but the best way is to just examine the code and see what's going on.

I would recommend that you steal the transparent 2x2 pixel .PNG and host it at your own location just in case the one at my photobucket goes down, this will only cause the thumbnails to stop functioning as links in any case and wouldn't be too catastrophic.

Valid CSS 2.0 and XHTML 1.0 Strict.

P.S. This will not work in Internet Explorer, (Tested in Mozilla Firefox v3.0.1.). If you don't have Firefox yet then here's another incentive [link]

UPDATE - 17/08/08: Sorry about the confusion as to how to obtain the code. You can now download the code from this location, the .zip folder contains a .html file and .css file for viewing and editing purposes only (they are not linked and the .html file is not set up to work in a browser).

I recommend opening these files in a plain text editor such as notepad++ . Please be aware that you will need to remove the comments from both the html and css when implementing the code in your journal, and also remove the whitespace from the html (easy with something like this .)