Trying to style Add to Basket functionality similar to iTunes

HTML & CSS
1

Hey there,

I’m having trouble styling an iTunes type Add to basket/Buy button which also has social sharing functionality.

See the visual here:http://www.energycell.co.uk/html5/conundrum1.gif.

the code I currently have for the line item is:


<div class="item">
  <img src="assets/framework/product_thumb.jpg" width="112" height="112">
  <dl class="details">
    <dt><a href="#">Mountain Gorilla</a></dt>
    <dd>By: <a href="#">VanguardCinema</a></dd>
    <dd class="buy">Rent: <a href="#">$99.99</a></dd>
    <dd class="buy">Own: <a href="#">$99.99</a></dd>
  </dl>
</div>

I thought about using an unordered list instead of DL but I couldn’t figure out how to have the 2 link areas within the one list element. I also want to avoid using Javascript if at all possible, pure CSS if it can be done.

Has anyone seen anything like this before and got any ideas which is the best way?

Thanks a lot in advance…I’m a bit stuck.

2

We can’t do anything without more code :). If you have a link then please let us have it.

If you don’t, then please post full HTML and CSS at least.

Is the “over” state just not working? I’d check your CSS for any :hover pseudo classes and see if they set any backgrounds.

3

It’s OK, I’ve done it using nested UL’s