Hi again, I am not able to figure out how to position some text on top of a photo (don't want to use the photo as a background image).
On this page: http://www.grassrootsfitness.com/ The graphic with the drums that has the orange text "trial class week" is the part I am working on. I want the photo to be horizontally alined with the other photos. The orange HTML text needs to be positioned towards the bottom of the graphic. (to mimic the look of the other graphics, that have text in the image itself) I used 2 divs: one for the graphic, and one for the text that sits on it. Both have a z-index. I thought that if I used "top: 40px" for the text, it would push the text down 40px from the top of the photo. but it is pushing down the photo instead. What am I doing wrong here? I am using inline styles just for dev purposes; will put that in a stylesheet when i get the layout right. The stuff in the curly braces is dynamically inserted content. This is the HTML in question: <div id="home-promo1" class="home-promo left rt-gutter"> <div class="title_overlay" style="position: relative; z-index: 10; top: 40px; left: 10px;"><h2 class="programs-title"><a href="{promo_1_link}">{promo_1_title}</a></h2></div> <div class="photo_under" style="position: relative; z-index: 1;"><a href="{promo_1_link}"><img src="{promo_1_image}" width="220" height="108" border="0" alt="{promo_1_title}" class="home-promo-img" /></a></div> <p>{promo_1_text}<br /> </p> </div> <!-- #home-promo1 --> Thanks! Rory -------------------------- Rory Bernstein : Web Developer http://www.rorybernstein.com ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
