CSS to get multiple text boxes over image in various locations - html

Question

Here's my challenge: I have an image of a real property that will be loaded at random in a DIV 200 pixels wide. Accordingly the image will be resized to 200 pixels width and variable height (kept proportional). I have four separate captions that need to go onto the image:
Title
Price
Location
Surface
They need to be positioned respectively on the top center, bottom left, bottom left and bottom right of the picture. So I would have something like:
--------------------------------
| Title |
| |
| |
|Price |
|Location Surface|
--------------------------------
I know that I can overlay text to an image by putting the div in relative position and the text in absolute position, but I only seem to be able to set one position for all text divs below, no matter how many classes I use.
Any advice??
EDIT: Found the solution. For reference, here is the code generated:
<div id="stampRandom">
<img class="stampImg" src="myphoto.jpg">
<div class="title"><span>Title</span></div>
<div class="prix"><span>Location</span><span><br><b>Price</b></span></div>
<div class="surf"><span><b>Surface</span></b></span></div>
</div>
And the CSS:
#stampRandom {
position: relative;
top: 0px;
left: 0px;
width: 200px;
color: #FFF;
font-size: 80%;
}
#stampRandom {
position: relative;
top: 0;
left: 0;
width:200px;
color: #ffffff;
/* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; */
font-size:80%;
}
#stampRandom img {
top:0px;
left:0px;
width:200px;
}
#stampRandom div {
position: absolute;
width: 200px;
}
#stampRandom div span {
background: rgb(0, 0, 0); /* fallback color */
background: rgba(50, 50, 50, 0.7);
}
.title {
top:2px;
width:100%;
text-align:center;
}
.prix {
bottom:0px;
left:0px;
}
.surf {
bottom:0px;
right:0px;
text-align:right;
}
Thanks to all who helped out! I was blocked big time and my code needed a major redo. Fresh shot in the arm!

Answer 1

http://jsfiddle.net/h51xLdzg/
<style>
.img-cont{position:relative;width:200px;}
.img-cont div{position:absolute; background:red}
.img-title{top:0px;width:100%;text-align:center;}
.img-price{bottom:0px; left:0px;}
.img-surf{bottom:0px; right:0px;text-align:right;}
</style>
<div class="img-cont">
<img src="/MyImage.jpg" width="200"/>
<div class="img-title">
Title
</div>
<div class="img-price">
Price Location
</div>
<div class="img-surf">
Surface
</div>
</div>
Think this will help you

Answer 2

I made a quick example of how you can accomplish this. It's not perfect but it works. If you need some other help or different approach let me know
http://jsfiddle.net/hg9r7/134/
<div class="imageWrapper">
<img src="http://dummyimage.com/250x200" alt="1" width="250" height="200" />
<div class="top">TOP</div>
<div class="bot">BOT</div>
<div class="botleft">BOTLEFT</div>
<div class="botright">BOTRIGHT</div>
</div>
CSS example for bottom and bottom left text:
.bot{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:50%;
margin-left:-50px;
bottom:0;
}
.botleft{
position:absolute;
background:red;
text-align:center;
margin:0 auto;
width:100px;
left:0;
bottom:0;
}