Question

I have placed the corresponding code at http://cssdesk.com/QSwDG

The sprite (referenced as ‘circle.png’ in the code) is at:
http://i54.tinypic.com/34jas79.png

Objectives:
– To get the list items inline while maintaining the 60×60 size of each.
– To have the lower part of the sprite apear when each link is hovered over: A circle should appear around the link.
– To vertically centre the text within each 60 x 60 container.

I know I can create separate images for each of the links and achieve the desired visual outcome but I want to see if the above is possible.

Thanks

Answer 1

@caseyc

For horizontally and vertical centralization, try it:

li{
  float:left;
  width:60px;
  height:60px;
  border:1px dotted green;
  display:block;
  text-decoration:none;
  display:table;
}

a.roll{
  vertical-align:middle;
  display:table-cell;
  text-align:center
}

Now, make the background property on “a.roll”.

Cleber.