Forum Moderators: not2easy
Created a sprite then added instructions in my css and in html, the rollover effect works but the images are being published separately rather than in a single menu. Please excuse my description, probably easier to see.
<snip>
All I am after is a menu with 4 buttons (the menu is in the form of a remote control and the rollover images are just the remote buttons depressed but as you can see, rather than being on a single remote, it duplicated the remote for each menu item.
I have set background position to -388px (height of remote) in my css but still not working- anyone have this problem also and found out how to fix?
My css looks like this:
a.buttonhome {
background:url(images/menu.png) repeat 0px 0px;
width: 197px;
height: 388px;
display: block;
}a.buttonhome span {
display: none;
}
a.buttonhome:hover {
background: url(images/menu.png) repeat -197px 0px;
}
a.buttonabout {
background:url(images/menu.png) repeat 0px 0px;
width: 197px;
height: 388px;
display: block;
}
a.buttonabout span {
display: none;
}
a.buttonabout:hover {
background: url(images/menu.png) repeat -394px 0px;
}
a.buttonservices {
background:url(images/menu.png) repeat 0px 0px;
width: 197px;
height: 388px;
display: block;
}
a.buttonservices span {
display: none;
}
a.buttonservices:hover {
background: url(images/menu.png) repeat -591px 0px;
}
a.buttonprojects {
background:url(images/menu.png) repeat 0px 0px;
width: 197px;
height: 388px;
display: block;
}
a.buttonprojects span {
display: none;
}
a.buttonprojects:hover {
background: url(images/menu.png) repeat -788px 0px;
}
THank you!
[edited by: swa66 at 6:32 pm (utc) on Oct. 28, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
<a href="#" class="buttonhome">
</a><a href="about.html" class="buttonabout">
</a><a href="services.html" class="buttonservices">
</a><a href="projects.html" class="buttonprojects">
</a>
to see live <snip>
[edited by: swa66 at 8:46 pm (utc) on Oct. 28, 2009]
[edit reason] No specifics that lead to your site, it's all considered promotional and not allowed. [/edit]
#*$! has a sprite tutorial that I always fall back on when doing this kind of stuff.
Edit: oops, didn't know it was a bad word
Easiest is to put them in a list in the html anyway.
Your CSS references a <span> in the links ? is it there or not ?
Accessibility and links with no anchor text: you're going to score bad.
But you don't need the spans, there are plenty of ways to do text replacement without superfluous html elements.
You seem to indicate having trouble controlling where your links end up ?
Right now using nothing but display block they'll end up one under the other.
I've no idea how you do want them to end up.
Tip: when doing this first remove the sprite images and replace it with different solid background colors on each element. Make sure these elements end up where you need them *before* you try to put sprites in them as it's far easier with solid colors to verify the buttons are where you need them.
Anyways, I did correct the problem in the end, if this can help anyone else with sprites, my problem was I didnt treat my menu (it is a large graphic) as a whole with sliced areas (which were the "windows" to the menu selection or rather coordinates in my css, but rather used the whole graphic over and over again for each menu link so obviously it repeated the graphic. Sorry this is really hard to explain without showing an image. Anyways, here is what I did in the end:
CSS:
a.about, a.services, a.projects {
width: 197px;
height: 36px;
display:block;
background:url(../images/menu.png);
overflow:hidden;
}
a.home {
width: 197px;
height: 93px;
display:block;
background:url(../images/menu.png);
overflow:hidden;
background-position: 0 0;
}
a.about {background-position: 0 -93px;}
a.services {background-position: 0 -129px;}
a.projects {background-position: 0 -165px;}
a.home:hover {background-position: -197px -1px;}
a.about:hover {background-position: -394px -94px;}
a.services:hover {background-position: -591px -130px;}
a.projects:hover {background-position: -788px -166px;}
HTML:
<ul>
<li><a href="#" class="home"></a></li>
<li><a href="about.html" class="about"></a></li>
<li><a href="services.html" class="services"></a></li>
<li><a href="projects.html" class="projects"></a></li>
</ul>
[edited by: dems at 11:37 am (utc) on Oct. 29, 2009]
Last I checked accessibility rules tell us not to put one link directly after another in the html. Seems to confuse some.
I am fairly certain that the accessibility rules changed and links following each other are now allowed without the need to separate them. When they changed the recommendations I found a link listing all the main changes and I am certain this was on there. I've spent the last 10 minutes trying to find the link and if I do find it I'll post it here.
