Forum Moderators: not2easy

Message Too Old, No Replies

ad box class img display problem

image display problem

         

bid4abook

10:39 pm on May 29, 2010 (gmt 0)

10+ Year Member



Hi,
I am hoping someone can help me. I am using multiple adboxs on my site and wish to place images in each adbox behind some text. I have tried using the z-index property but the images will not render behind the text. The code I am using is as follows:

css

.adbox {
padding: 2px 10px 2px 5px;
margin: 0 px 5px 0;
border: 1px dotted #B1B1B1;
background-color: #ffffff;
}
.leftimg {
float: left;
margin-right: 5px;
}

Which displays the img in the top left hand corner of the adbox. I really want the images to display behind the text, what is the answer?

Any help is appreciated.

alt131

11:42 am on May 30, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi bid4abook,

z-index will only be applied to elements with a position other than static. Float will not "stack" the text on top of the image - it will float the image to the left (as you are describing), without changing the "stack order" of the elements themselves.

There are several ways to achieve this. One is what you tried - using z-index to "stack" the text "on top" of the image:
css
div.adbox {position:relative; width:100px; height:50px;}
.adbox p {position:absolute; z-index:99; top:0; left:0;}
HTML
<div class="adbox">
<img src ="myimage.jpg" width="100" height="50" >
<p>my text</p>
</div>

Another option is to set the background image as a background. That technique makes more sense as it sounds like what you actually want to do:
css
div.adbox2 { background: url(myimage.jpg) no-repeat; width:100px; height:50px; }
.adbox2 p {text-align:center; padding:1em 0;}
HTML
<div class="adbox2">
<p>my text</p>
</div>

bid4abook

5:28 pm on May 30, 2010 (gmt 0)

10+ Year Member



alt131,
Thanks option two works perfectly, many thanks. Regards bid4abook.