Well, my general unfamiliarity with CSS is on full display in this topic, but basically I'm lost on how I might approach this. Currently, I'm using tables to do this, but I would like to move toward CSS (especially since the previous approach has problems in Firefox).
Essentially, here is what I want to do:
The major dilemma is the fact that those are actually two images, placed side-by-side, in order to discourage lazier people from just taking the pictures. Unfortunately, I'm at a loss as to how I would do this in CSS, especially since the general size of the two images will vary tremendously from page to page.
Currently, here is the html:
Maguma Concept Art
Other
Concept Art from this Film
And here is the CSS (which is just for the general look of the middle and bottom elements):
.dvd {color: #ffffff; text-align:center; font-weight:bold; background-image: url(http://www.tohokingdom.com/images/dvd_bg.gif)}
.cw {text-align:center; background-color: #ffffff}
If anyone could help me out, I would be very, very appreciative.
Thanks for your time.