homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Sprite images not combining
rollover pure css
dems




msg:4015120
 6:30 pm on Oct 28, 2009 (gmt 0)

I am going on about 8 hrs straight trying to get this to work! I am not sure what I am missing...Probably need to just walk away but Im obsessed!

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]

 

dems




msg:4015132
 6:54 pm on Oct 28, 2009 (gmt 0)

Forgot to mention that my html in the body looks like this:

<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]

caribguy




msg:4015135
 6:57 pm on Oct 28, 2009 (gmt 0)

Try with absolute positioning?

#*$! 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

swa66




msg:4015148
 7:18 pm on Oct 28, 2009 (gmt 0)

Last I checked accessibility rules tell us not to put one link directly after another in the html. Seems to confuse some.

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.

dems




msg:4015516
 11:12 am on Oct 29, 2009 (gmt 0)

SOLVED
Thanks for the input guys!
Meant to put html in a list, just trying to get it up to see if it works before fine tuning :) Thank you though, I have now added the list.
I have also tidied up the css, I know it was horrendous.

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]

simonuk




msg:4019099
 4:59 pm on Nov 4, 2009 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved