SitePoint Sponsor |
|
User Tag List
Results 1 to 11 of 11
-
Sep 25, 2007, 08:05 #1
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Image background changing if it's a link
Hi guys,
I've currently got a few images being displayed in a simple list, and want it so that if it's a link, it'll change the background location of that image, however I'm not having much luck.
Here's my current CSS code:
Code CSS:.managers_icons li{ background: url('../img/managers_info.png') no-repeat 0 -18px; float: left; margin: 0 5px; width: 18px; height: 18px; } .managers_icons li a{ display: block; height: 18px; background-position: 0 0; } .e_info{background-position: 0 0;} .e_notes{background-position: 0 -18px;} .e_pdr{background-position: 0 -36px;}
For some reason the background position that's set where I initially define the background image (.managers_icons li) works just fine, and any changes made there is reflectec accordingly.
Anything after that just doesn't change the background image at all, which is really odd. I know it's taking the other attributes on fine because for example if I change .managers info li a to have 5px padding, it's added to any listed element that's linked. Likewise the bottom ones where it's defined seperately, adding padding for example is fine, but the background image won't change.
fwiw, here's my HTML code too:
Code HTML4Strict:<ul class="managers_icons"> <li class="e_info"><a href="#">Employee Information</a></li> <li class="e_notes">Employee Notes</li> <li class="e_pdr">Employee e-PDR Information</li> </ul>
And finally, the image:
And help would be ace, thanks.
-
Sep 25, 2007, 08:30 #2
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry if this doesn't work as I haven't tested it but the reason why you're having problems is because you're initially applying the image to the <li> and positioning it correctly but then wrongly expecting the <a> to trigger the :hover and also expecting the background-image from the <li> to be passed onto the <a> which won't work
As I've mentioned, I've not tested this code, but I suspect you're after something like this:
CSS
Code:.managers_icons li { float: left; margin: 0 5px; list-style-type: none; } .managers_icons span { float: left; min-height: 18px; background-color: #FFF; } .managers_icons li a { background: url(../img/managers_info.png) no-repeat 0 -18px; height: 18px; display: block; padding-left: 20px; } .e_info a:hover {background-position: 0px 0px !important;} .e_notes a {background-position: -18px -18px !important;} .e_notes a:hover {background-position: -18px 0px !important;} .e_pdr a {background-position: -36px -18px !important;} .e_pdr a:hover {background-position: -36px 0px !important;}
Code:<ul class="managers_icons"> <li class="e_info"><a href="#"><span>Employee Information</span></a></li> <li class="e_notes"><a href="#"><span>Employee Notes</span></a></li> <li class="e_pdr"><a href="#"><span>Employee e-PDR Information</span></a></li> </ul>
Last edited by DaveWoods; Sep 25, 2007 at 09:00. Reason: Tested code and corrected...
-
Sep 26, 2007, 01:32 #3
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Huge thanks for the reply, certainly an improvement from my code, however a couple of things:
1)I need them displayed inline and for some reason, using that ^ no matter where I add the inline attribute it isn't working
2) I need links to view the different image as opposed to actual hovering, so if the item is linked, it'll use the top row (darker) and if it isn't linked it'll use the bottom row (lighter) to appear as if it's inactive.
Once again huge thanks, I'm going to have a mess around with the code now and hope I don't break it too much, any other help would be great though, cheers
Edit: Manged to resolve #1 by adding a width to li a, which if I was going on a hover system would be spot on, but I just need to work out how to do it so that ones without links appear inactive now.
-
Sep 26, 2007, 02:04 #4
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Everything seems to be working, except for the a attribute on the end, not sure what I'm doing wrong.
Code CSS:.e_info {background-position: 0px -18px !important;} .e_info a {background-position: 0px 0px !important;} .e_notes {background-position: -18px -18px !important;} .e_notes a {background-position: -18px 0px !important;} .e_pdr {background-position: -36px -18px !important;} .e_pdr a {background-position: -36px 0px !important;}
Even if I change it to a:hover or whatever, it isn't working at all :/
-
Sep 26, 2007, 02:14 #5
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry, misunderstood your problem. Try the following code.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Icon example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .managers_icons li { float: left; margin: 0 5px; list-style-type: none; } .managers_icons span { float: left; min-height: 18px; background-color: #FFF; } .managers_icons li{ background: url(../img/managers_info.png) no-repeat 0 -18px; height: 18px; display: block; padding-left: 20px; } .managers_icons li a { background: url(../img/managers_info.png) no-repeat 0px 0px; height: 18px; float: left; padding-left: 20px; margin-left: -20px; cursor: pointer; } .e_info {background-position: 0px -18px !important; } .e_notes {background-position: -18px -18px !important;} .e_pdr {background-position: -36px -18px !important;} .e_info a {background-position: 0px 0px !important;} .e_notes a {background-position: -18px 0px !important;} .e_pdr a {background-position: -36px 0px !important;} </style> </head> <body> <ul class="managers_icons"> <li class="e_info"><a href="#"><span>Employee Information</span></a></li> <li class="e_notes"><span>Employee Notes</span></li> <li class="e_pdr"><span>Employee e-PDR Information</span></li> </ul> </body> </html>
Hope that helps?
-
Sep 26, 2007, 02:24 #6
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Huge thanks for the code again, really appreciate it, was just about to post that I managed to resolve the problem though, I moved the background-image from li a to li and didn't realise that it wouldn't apply to both when setting the background of the linked elements, if that makes sense.
Either way, it's working now ^So many thanks again for the help!
-
Sep 26, 2007, 02:30 #7
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
-edit: ignore, sorry-
-
Sep 26, 2007, 02:56 #8
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Not sure what I'm ignoring? Does you code not work, is mine not doing what you expect etc?
-
Sep 26, 2007, 03:09 #9
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Sorry, I did a post saying "Argh! It's not working in IE" or similar, then I realised it was actually my HTML that was screwed, and not the CSS
Thanks again, it's all fine now!
-
Sep 26, 2007, 03:42 #10
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
aah, makes sense now, I hadn't seen the original post
my code was tested in IE6+, Firefox, Opera and Safari so shouldn't have been any problems
-
Sep 26, 2007, 04:14 #11
- Join Date
- Jun 2007
- Posts
- 396
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Awesome, thank you once again
Bookmarks