0

I am working with some old table structure html that I am not allowed to change at the moment.

However, I wanted to add a css sprite play button on the video images using a span background image.

I am having trouble getting the play button images to line up inside of the video images with CSS. On the real site, they are all the way at the top of the page. I know that this is because of the absolute positioning.

My question is, how can I position these play button images within the specific video image.

Here is a jsfiddle with my code.

unor
  • 92,415
  • 26
  • 211
  • 360
novicePrgrmr
  • 18,647
  • 31
  • 81
  • 103
  • I know, they are hosted on a dev server so I can't fix them. They aren't relevant to the problem though because the css sprites aren't broken and that is what I am trying to position. – novicePrgrmr Oct 01 '12 at 08:29
  • @KyleSevenoaks added random images – novicePrgrmr Oct 01 '12 at 08:43
  • Ok, so you're trying to position an image sprite, yet you say it's not relevant to the problem? Good luck. – Kyle Oct 01 '12 at 08:43
  • @KyleSevenoaks I am saying that the image that the sprite is being positioned on being broken shouldn't inhibit anything. Am I wrong? – novicePrgrmr Oct 01 '12 at 08:48

1 Answers1

0

Try something like

a { display: block; position: relative; }
a span { position: absolute; left: 100px; top: 80px; }

http://jsfiddle.net/PyJXh/7/

This might not be the exact center, you need to set the correct left and top depending on your image.

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102