CODEWITHSUNDEEP
cssresponsive-design
Xavier
Xavier

Reputation: 4017

How can my sprite be responsive?

I got a sprite picture which is a breadcrumbs menu. I want to change the y position of this sprite when the mouse is hover the menu's elements. There is no problem to do it with a fixed width website, but i can't resolve this with a responsive one...

Here is the live version : http://jsfiddle.net/RtqkD/ and my CSS code :

   .services {
    height: 64px;
    width: auto;
    background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0;
    background-size: 100%;
}
.services #Et1 {
    margin-left: 60px;
}
.services #Et1, .services #Et2, .services #Et3, .services #Et4 {
    height: 65px;
}
.services li {
    float: left;
    width: 210px;
    position: relative;
    background: none;
}
.services li a {
    display: block;
    padding: 8px 7px 8px 7px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}
.services li:first-child a {
    padding-left: 10px;
}

Any tips ?

EDIT After the @Sven comment i made a more complete live version of my issue here with CSS, HTMLand Javascript: http://jsfiddle.net/RtqkD/2/

Upvotes: 3

Views: 1152

Answers (1)

Rob Sterlini
Rob Sterlini

Reputation: 342

Right, lets start with the fact that the way you're spriting that is totally unnecessary. I see why, but with some careful coding it can be gotten around.

Using the :before pseudo element, I created the triangles after each item. Now each item reacts to the hover on the anchor using CSS rather than jQuery (much neater). Browser support won't go down to IE7, but neither do most things.

Here's the fiddle: http://jsfiddle.net/robsterlini/RtqkD/5/ (EDIT sorted the padding issues http://jsfiddle.net/robsterlini/RtqkD/6/)

And here are the elements used: arrow sprite, background sprite (and if you wanted to be really tight with the sprites, you could even sprite them together, just be careful with how you do it.

Took me a little while to figure it out, so if you need any explaining then give me a shout :) Hope that helps!

Upvotes: 3

Related Questions