Information
This demonstration shows basic index card information with a change of background color on hover.
The method uses just one background image and allows the index card to grow vertically with the content. You can also set the width to any size as long as it is smaller the the image width.
Using the image below you can have any width from 100 pixels, which is the width of the tab, to 300 pixels but you can increase the width of the image if you want to go wider.
This has been tested in Firefox, Opera, Mozilla, Netscape, IE7 and IE6. It should also work in Safari, Camino and Konqueror.
The single image is shown below:
Although changing the background color on hover is not a new idea and is used all over the web, and, as Mauricio Samy Silva points out, the idea to produce this demo came from Veerle's blog, it does use a totally different method of styling.
Instead of being restricted to a single width container that uses background image repositioning, this one uses a single static image with background color changes. This way you can have any color change you like and the container can be resized in both directions without the need to redo the background image.
The fact that this works in IE6 (and IE5.5 with box model corrections) by using conditional comments is a bonus that you can use if you wish.
Apolgies to Veerle if this was seen as 'taking without linking'.
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth