2 replies [Last post]
ogaac
Offline
newbie
LA
Last seen: 9 years 41 weeks ago
LA
Timezone: GMT-7
Joined: 2010-09-18
Posts: 8
Points: 11

Ok so I'm trying to use an unordered list to set up a nav bar of images. I'm doing this with one large image that contains all the small icons and their rollover states in hopes that I can hide the undesired icon for each link by adjusting X and Y positions and using a block. I'm told this is called "pixy" style rollovers.

I've managed to get all the images in the list using a block and adjusting the background position, but when I try and adjust the X and Y via CSS on the hover state nothing happens. I'm assuming this is because I am using a background image instead of a regular image, or the lack of text or something along those lines. Unfortunately I don't know how to do it another way so can someone a) tell me a better way to do it or b) tell me what I'm doing wrong.

Here's my CSS:

.container .header .socialLinks #socialLinksUl {
	background-image: none;
	text-align: right;
	float: right;
}
.container .header .socialLinks #socialLinksUl #email {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	display: block;
	height: 39px;
	float: right;
	width: 40px;
}
.container .header .socialLinks #socialLinksUl #twitter {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	float: right;
	height: 39px;
	width: 40px;
	background-position: -71px -39px;
	display: block;
}
.container .header .socialLinks #socialLinksUl #facebook {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	background-position: -40px -39px;
	display: block;
	float: right;
	height: 39px;
	width: 40px;
}
.container .header .socialLinks #socialLinksUl #linkedin {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	background-position: -106px -39px;
	display: block;
	float: right;
	height: 39px;
	width: 40px;
}
.container .header .socialLinks #socialLinksUl #linkedin a:hover {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	background-position: -106px 0px;
}

NOTE: I tried to post my HTML with tags but the tag wouldn't work for some reason, so here's the HTML with "<" replaced by ")"

(div class="socialLinks")
(ul id="socialLinksUl")
(li id="linkedin")(a href="#linkedin")(/a)(/li)
(li id="facebook")(a href="#facebook")(/a)(/li)
(li id="twitter")(a href="#twitter")(/a)(/li)
(li id="email")(a href="#email")(/a)(/li)
(!-- end navBar --)(/ul)
(/div)

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 14 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Try this instead

#socialLinksUl {
	background-image: none;
	text-align: right;
	float: right;
}
#socialLinksUl a {
	background-image: url(socialMediaIcons.png);
	background-repeat: no-repeat;
	display: block;
	height: 39px;
	float: right;
	width: 40px
}
#email a { background-position: 0 0 }
#twitter a { background-position: -71px -39px }
#facebook a { background-position: -40px -39px }
#linkedin a { background-position: -106px -39px }
#linkedin a:hover { background-position: -106px 0 }

The reason the bg-image isn't changing on hover is because you haven't applied the image to the anchor in the first place.

Everything else you had in there was unnecessary, including all the .container .header .socialLinks #socialLinksUl; there's no need to be that specific.

You haven't included hover state rules for #email, #twitter of #facebook: was that for brevity or have you just forgotten to include them?

Quote:

NOTE: I tried to post my HTML with tags but the tag wouldn't work for some reason, so here's the HTML with "<" replaced by ")"

You've used <code> tags for your CSS; you should've been able to use the same tags for your HTML.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ogaac
Offline
newbie
LA
Last seen: 9 years 41 weeks ago
LA
Timezone: GMT-7
Joined: 2010-09-18
Posts: 8
Points: 11

Wow, that's infinitely

Wow, that's infinitely easier. Thank you so much! If you couldn't tell, I'm new to CSS and appreciate both your hasty and respectful response. Thanks again!