What I’m trying to achieve here, is to have two divs, one containing an image that has the PNG drop shadow around it and a small portion at the bottom for the caption to slide out of, and the second div will contain the caption but must also have the PNG drop shadow on that div as well.
I’m assuming that to get the caption to slide “out” of the bottom of the image from, I need to have it contained within that div. Though, I’m having trouble getting the caption div to overlay the bottom shadow of the image frame div. I can’t figure out a way to get the bottom shadow of the image frame to stay at the bottom of it and not push down past the caption.
Here’s my code so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<!-- javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<!-- style sheets -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<title>Girl Scouts Picture Frame</title>
<style>
body { background:#eee; }
#frame-wrap { margin:20px auto; padding:20px; background:#fff; overflow:visible; }
.innerbox img { margin:0; padding:0; border:0; }
.dropshadow{
float:left;
clear:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 10px 10px !important;
margin: 10px 0 10px 5px;
padding: 0px;
}
.innerbox{
position:relative;
bottom:6px;
right: 6px;
padding:0;
margin:0;
overflow:visible;
}
.inner1 { background:#aaa; }
.innerbox{
/* IE5 hack */
\\margin: 0px 0px -3px 0px;
ma\\rgin: 0px 0px 0px 0px;
}
.innerbox #bottom { background:#aaa; height:30px; margin:0; }
#bottom hr { border-color:#888; border-width:1px; margin:25px 0 0 0; padding:0; }
#caption { border-top:2px solid #888; overflow:hidden; }
#caption .innerbox { padding:15px; }
#caption p { margin:0; }
</style>
<script type="text/javascript">
$(document).ready(function() {
var capwidth = $('.inner1 img').width();
$('#caption').width(capwidth*0.9);
$('#imageframe').width(capwidth);
$('#imageframe #bottom').css('paddingLeft', capwidth*0.05).css('paddingRight', capwidth*0.05);
});
</script>
</head>
<body>
<div id="frame-wrap">
<div class="dropshadow" id="imageframe">
<div class="innerbox inner1">
<img src="image.jpg" border="none" width="800" alt="image">
<div id="bottom">
<hr>
<div class="dropshadow" id="caption">
<div class="innerbox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--innerbox-->
</div><!--caption-->
</div><!--bottom-->
</div><!--inner1-->
</div><!--imageframe-->
</div><!--frame-wrap-->
</body>
</html>
Any help is very much appreciated. 