text on top image

[davy_yg]

Hello,

I basically trying to place texts on top of images.

I have this in css:

#bannernavtext {margin: 200px 0 0 750px; font-color:black; z-index:0; }

#nav li { float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav.jpg') no-repeat top; z-index:-1;}

#nav li.activeSlide a { /* background: #88f */ width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik.jpg') no-repeat top; z-index:-1;}

the banner text suppose to be on top of the navigation images correct ?

In actually, I do not see them on top the images, they are bellow the images.

[JorgeM]

feel free to post the relevant code to get a better understanding of the issue.

[davy_yg]

This is the codes:

index.php

<div id="demos">
    <div id="slideshow" class="pics">
        <img src="images/banner1.jpg" width="600" height="200" />
        <img src="images/banner2.jpg" width="600" height="200" />
        <img src="images/banner3.jpg" width="600" height="200" />       
    </div>
    <ul id="nav">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>   
    </ul>
</div>

<div id="bannernavtext">

Text1<br><br>
Text2<br><br>
Text3<br><br>

</div>

[PhilEaton]

You might use absolute positioning within a relatively positioned container div. This would allow you to overlay your picture with text.

[davy_yg]

I add the position:

    #bannernavtext {position: absolute; margin: 200px 0 0 750px; font-color:black; z-index:0; }

    #nav li {position: relative; float: left; margin: 0 0 0 4px; list-style: none; background: url('images/banner nav.jpg') no-repeat top; z-index:-1;}

    #nav li.activeSlide a { /* background: #88f */ position: relative; width: 310px; margin: 0 0 0 -18px; background: url('images/banner nav klik.jpg') no-repeat top; z-index:-1;}

The text absolute and the images relative. The text still underneath the images.

[PhilEaton]

If you put them both in a div container that is relatively positioned with auto width and height to fit the picture, then absolute position the text. That might do it.

[davy_yg]

you mean how exactly? the text suppose to be on top of the navigation images.

like this:

 #container {position: relative; width: auto; height: auto;}

and place the navigation in side the container?

[davy_yg]

I just tried it and it doesn't make any difference.

[lps]

In my opinion, you never set you z-index to the image. Moreover, if it is a slider, maybe the js will made the image of z-index higher, therefore, why not setting a very high z-index to the nav?