Can't manage this first attempt at using navigational image sprites at all. Here's the HTML:

<ul id="buttons">
    <li id="quote"><a href="#1"></a></li>
    <li id="testimonial"><a href="#2"></a></li>
    </ul>

Here's the CSS so far:

#buttons {
    width: 215px; height: 300px;
    background: url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png);
    margin: 0 auto; padding: 0;
    position: relative;}
#buttons li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
#buttons li, #buttons a {
    height: 150px; display: block;}
#quote {left: 0; width: 215px;}
#quote a:hover {
    background: transparent url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png)
    215px 0px no-repeat;}
#testimonial {top: 150px; width: 215px;}
#testimonial a:hover {
    background: transparent url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png)
    -215px -150px no-repeat;}

The image is at http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png

I just want a simple hover/rollover effect. What the hell am I doing wrong!?

Leon

  • and change the title so i dont only see: wordpress website in my title bar ;) Menno Geelen over 5 years ago

1 answer

1
point
   #buttons {
    width: 215px; height: 150px;
    background: url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png);
    margin: 0 auto; padding: 0;
    position: relative;}
#buttons li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
#buttons li, #buttons a {
    height: 150px; display: block;}
#quote {left: 0; width: 215px;}
#quote a:hover {
    background: transparent url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png)
    215px 0px no-repeat;}
#testimonial {top: 150px; width: 215px;}
#testimonial a:hover {
    background: transparent url(http://www.reverbstudios.ie/wp-content/uploads/page-buttons.png)
    -215px -0px no-repeat;}
Answered over 5 years ago by Barry O'Shaughnessy