caption box question

Reg Wharf · Oct 10, 2012

Hi Guys,
I've added a translucent? caption box to an image on my website
but I can't get it to appear at the bottom of the image, it keeps
floating to the top no matter what padding/margins I use.
The code I'm using is:

CSS

div.background{width:560px;height:112px;background:url(feeld2.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}

HTML

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

ta in advance for any help,
cheers,
Mark

Tricky1 · Oct 10, 2012

You could try adding top: 82px to the div.transbox or whatever pixels you require depending on how far you want it down.

On my phone so can't check it but hopefully should work.

seemly · Oct 10, 2012

What happens if you try this?

Code:

div.background{width:560px;height:20px; padding-top:92px; background :url(feeld2.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#0 00;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}

Ashton · Oct 10, 2012

This: http://jsfiddle.net/HSNne/

Reg Wharf · Oct 10, 2012

seemly said:

What happens if you try this?

Code:

div.background{width:560px;height:20px; padding-top:92px; background :url(feeld2.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#0 00;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}

You know what happens-it works perfectly!
Thanks for the quick reply guys, problem solved.
Tricky, you usually do it for me but I couldn't get it to work on this
occasion (didn't know when you said top:82px whether or not you
meant padding-top or margin-top) but knowing the codemaster you
are I've probably done it wrong!
Cheers,
Mark.