0

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.

4
Contributors
8
Replies
9
Views
4 Years
Discussion Span
Last Post by lps
0

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>

Edited by davy_yg

0

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

0

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.

0

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.

0

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?

0

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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.