Advice on CSS style WordPress

• SOLVED

Hello I would like to ask advice on a css issue, I would like to show a div with text in on top of another div with an image rotator in.

The attached image is what I would like to achieve, with the black text box with 'CLOSING PRICES' over the images which will be rotating underneath.

This is what I have achieved so far: popcorndesign co uk/clients/sites/worldcarbon/ (please add the .dots as necessary to the .co.uk to see the site)

Here is the code that I am using so far, if someone knows how to achieve what i'm after that would be great.


<div class="imagesliderouter">
<div class="imageslider"><?php wp_cycle(); ?>
<div class="closingprices">
<div class="closingpricestitle">Closing Prices</div>
</div>
</div>
</div>



and the css


.imagesliderouter {
width:950px;
height:252px;
position:relative;
}

.imageslider {
position:relative;
width:950px;
height:252px;
border: #00aeef 1px solid;
}

.closingprices {
background:#000;
height:230px;
width:230px;
color:#FFF;
float:right;
position:absolute;
top:10px;
right:10px;
}



Edit: I have go the text div to show, but it is underneath the image rotator, if you look closely when the images change. Thanks

Answers (5)

2011-11-25

Utkarsh Kukreti answers:

Add this to your css file.

.closingprices { z-index: 100; }

2011-11-25

Romel Apuya answers:

add the z-index: 200;
in .closingprices

.closingprices {
background:#000;
height:230px;
width:230px;
color:#FFF;
float:right;
position:absolute;
top:10px;
right:10px;
z-index: 200;
}


2011-11-25

Luis Abarca answers:

As Utkarsh Kukreti said, just add z-index to the rules on .closingprices,

A value of 3 is enough to make it float over the image, but you can add a higher value like 10, 100 or 1000.


.closingprices {
...
z-index: 5;
}


2011-11-25

juan manuel incaurgarat answers:

as they said go with z-index on .closingprices
but as you asked for an advice, id go with a higher value
lets say 9999
why?
to prevent problems in the future with jquery plugins for example
many jquery galleries (et al.) have very high z-index values and may go over yours, so go higher from now :)

2011-11-25

dan luther avergonzado answers:

It's my first time to answer here and I hope you will consider my answer , Sir Ross.


put a css property z-index on the div/layer you wanted to bring on top. Suppose you have 2 layers/divs , you want to bring layer 1 on top so you therefore your layer 1 css would be something like :

div#layer1 {z-index: 10;}

Take note that you can put any value on z-index , for instance z-index:1000.. I'm pretty sure, z-index will fix the issue.