View Full Version : Problems displaying image caption div

Jan 15th, 2009, 03:36 AM
Hi guys,

I'm trying to implement a transparent image caption div over an image,
similar to the one on the top left corner of http://one.myvivvo.com/

My test page is here - http://ng.boominteractive.net/test.php?product=60

I have taken the CSS needed to display this from the site, and plugged it into my own CSS, but the bottom property 0pt is not being set from the bottom of the image div, but from its parent div instead..

Can anyone tell me what I need to do to have it display at the bottom border of the main image.


Jan 15th, 2009, 03:52 AM
Hello thelad,
Try referring to the top left corner instead of the bottom of your containing div.

Like this:

div.placeholder div.image_caption {
position: absolute;
line-height: 12px;
left: 0px;
top: 243px; /*play with those numbers to get it where you want*/
width: 203px;
text-align: left;
font-size: 11px;
color: #ffffff;
background-color: #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
z-index: 999;
opacity: 0.6;

Jan 15th, 2009, 04:06 AM
Tried that, but it still takes its starting position from the incorrect div

If i put top:100px, it moves 100px below the top of the gallery-holder frame.

I need it to be ?px from the top or bottom of the placeholder div

Jan 15th, 2009, 04:29 AM
Well, you could always just float it. I'm not any good at positioning because I make a real effort never to use it. Maybe someone else will come up with a better solution.

Jan 15th, 2009, 08:35 AM
You need to add a position:relative; for your
#content .bottom-border-box .gallery-holder .placeholder (all.css-line 924)
since the position of an absolutely positioned element is calculated with respect to the boundaries of its relatively positioned immediate parent (hope my sentence is clear :)).

Jan 15th, 2009, 03:40 PM
Let's see if I understand it.

div 1
div 2
div 3 absolutely positioned
3 is positioned to the next highest relative container. Neither 1 nor 2 are relative so 3 is positioned to the entire page. Set it to top:10px; left:10px; and it is positioned those distances from the entire page.

div 1 relative positioned
div 2
div 3 absolutely positioned
Div 3 is now positioned to container 1 as it is the next highest relative positioned thing. Set it to top:10px;left:10px; and it will be 10 down and 10 over from where ever div 1 happens to be.

div 1 relative positioned
div 2 relative positioned
div 3 absolutely positioned
Div 3 is now positioned to container 2 as it is the immediate parent with relative positioning. Set top:10px;left:10px; and it will be 10 down and 10 over from where ever div 2 happens to be.

Jan 15th, 2009, 11:18 PM
Thanks guys, abduraoofts solution of setting the required parent div to posiition:relative worked a treat......