Re: [css-d] help with absolute positioning?

[Camilo Kawerín]

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 works fine for me:


<div *style="position: relative;"* id="home-promo1" class="home-promo left
rt-gutter">

            <div class="title_overlay" style="*position: absolute; *z-index:
10; top: 40px; left: 10px;"><h2 class="programs-title"><a
href="/programs/trial_class_week">Trial Class Week</a></h2></div>

            <div class="photo_under" *style=""*><a
href="/programs/trial_class_week"><img height="108" border="0" width="220"
src="http://everydayathletestudio.com/images/channels/Drums_web2.jpg";
alt="Trial Class Week" class="home-promo-img"/></a></div>

        <p/><p>
    TRIAL WEEK December 13th - December 19th!</p>
<br/>
        </div>

-- 
Camilo Kawerín
kawerin.com.ar
______________________________________________________________________
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/