[css-d] changing backgrounds in list items
Hello, I have a list with a backgound that appears when I hover over it: #navlist ul li a:hover { background: url(image1.png); background-repeat: no-repeat; } I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
To be honest you could try and place ID's on each LI item and put backgrounds on them your trying to create a roll over menu correct? Regards PWP - Original Message - From: vwf [EMAIL PROTECTED] To: css-d@lists.css-discuss.org Sent: Wednesday, September 13, 2006 7:58 PM Subject: [css-d] changing backgrounds in list items Hello, I have a list with a backgound that appears when I hover over it: #navlist ul li a:hover { background: url(image1.png); background-repeat: no-repeat; } I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
On 13/09/2006 10:58, vwf wrote: I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? I'd just add an ID or class (but more probably ID) to each of the list items or anchor elements. So something like: .nav li a { background-repeat: no-repeat; background-align: 0 0; ... other common styles... } .nav li a#home { background-image: url(images/home.png); } etc. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
Sorry, need to fix my code sample: .nav li a:hover { background-repeat: no-repeat; background-align: 0 0; ... other common styles... } .nav li a#home:hover { background-image: url(images/home.png); } __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] changing backgrounds in list items
On 13/09/2006 10:58, vwf wrote: I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
Depends if 2 items in your list will have the same background then you would use a class (think of a class as a group) if every item in your list each has seperate then you would use ID (think of an ID and an individual name) use ID if its 1 use CLASS if its greater then 1 to be considered on the one page (used more then once on the one page) Regards PWP - Original Message - From: vwf [EMAIL PROTECTED] To: Sent: Wednesday, September 13, 2006 9:08 PM Subject: [css-d] changing backgrounds in list items On 13/09/2006 10:58, vwf wrote: I have a list of 6 items, and I want to associate a different image with each of the 6 items. Is there a smart/correct way to do this? Does someone know an example that has this implemented? Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? ID's should be used to uniquely identify elements in your page, classes are for groups of elements that share similar properties. If your list is only used once on the page then ID's would be the best thing to use. Use classes if your list is replicated within each page. Hope this helps. Alex. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] changing backgrounds in list items
If I remember correctly CSS3 has a spec for identifying different items in a list in various ways but seeing as noone really implements 3 yet you probably don't have a heuristically clean way of doing this. Matt Ludbrook EMIC associates Engineering, Maintenance, and Inventory Consultancy +44 7940 854119 (Mobile) +44 23 92 610437 (Direct) www.emicassociates.co.uk -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Bienz Sent: 13 September 2006 12:15 To: vwf; css-d@lists.css-discuss.org Subject: Re: [css-d] changing backgrounds in list items Thank you all for the various suggestions. It seems that the straight-forward approach is the way to go: simply add extra classes or id's for each of the elements. I implemented it, and it works perfectly. One question: why would I prefer 'id' over 'class' selectors? ID's should be used to uniquely identify elements in your page, classes are for groups of elements that share similar properties. If your list is only used once on the page then ID's would be the best thing to use. Use classes if your list is replicated within each page. Hope this helps. Alex. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.3/446 - Release Date: 12/09/2006 -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.1.405 / Virus Database: 268.12.3/446 - Release Date: 12/09/2006 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/