Log in

View Full Version : flexible div with top & bottom images


jhatter
11-22-2013, 01:12 PM
Please can you help me achieve something similar to the screen grab image?

I would like the top of the text positioned over the top quote mark but can't work out how to do it. I would also like the text div to expand and contract depending on the amount of text that is in it and for the bottom quote mark to 'follow' this. So really I don't want to set a height for the div.

I have attached the code of my attempt

<div class="testimonial-top-image">&nbsp;</div>

<div class="testimonial-text">
Hi Damian,<br/>
Please pass on our thanks to your guys for an exceptionally good job. They were speedy, professional and absolutely charming - not one thing lost or broken and the job completed in 8 hours flat. We were very impressed and will recommend you to friends in the the future.<br/>
Kind regards, Eleanor
</div>

.testimonial-top-image {
width:316px;
height:80px;
background-image: url(images/testimonial-top.jpg);
background-repeat: no-repeat;
background-position: center bottom;
z-index:1; position:relative;}

.testimonial-text {
width:316px;
height:380px;
font-family: 'Open Sans', sans-serif;
line-height:230%;
font-weight: 400;
font-style: italic;
font-size:16px;
color: #666666;
background-image: url(images/testimonial-bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
z-index:99;
position:relative;
}
528152825283

Thanks in advance for your help.
molendijk
11-22-2013, 05:01 PM
I don't quite follow you. Why would you like the width of the image to be equal to the width of the text? Do you mean something like this?

<style>
.testimonial-text {
position:relative;
width:316px;
font-family: 'Open Sans', sans-serif;
line-height:230%;
font-style: italic;
font-size:16px;
color: #666666;
}
</style>

<div class="testimonial-text">
<img src="http://yaelwrites.com/wp-content/uploads/2013/06/quotes1.jpg" style="width:30px"; alt="">
Hi Damian,<br/>
Please pass on our thanks to your guys for an exceptionally good job. They were speedy, professional and absolutely charming - not one thing lost or broken and the job completed in 8 hours flat. We were very impressed and will recommend you to friends in the the future.<br/>
Kind regards, Eleanor
<img src="http://cdn.worldcupblog.org/italy.worldcupblog.org/files/2010/07/Right-quotation-mark.jpg" style="width: 30px" alt="">
</div>
coothead
11-22-2013, 08:15 PM
Hi there jhatter,

try it like this...


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style>
body {
background-color:#f0f0f0;
}
.testimonial-text {
width:316px;
padding:46px 0;
margin:auto;
border-radius:10px;
font-family:'Open Sans',sans-serif;
line-height:1.9;
font-weight:bold;
font-style:italic;
font-size:16px;
color:#3b564b;
background-color:#fff;
background-image:url(http://www.dynamicdrive.com/forums/attachment.php?attachmentid=5283&d=1385125827),
url(http://www.dynamicdrive.com/forums/attachment.php?attachmentid=5282&d=1385125826);
background-repeat:no-repeat;
background-position:0 bottom, 0 10px;
box-shadow:5px 5px 5px #b9b9b9;
}

.testimonial-text p {
margin:0 20px;
}
</style>

</head>
<body>

<div class="testimonial-text">
<p>Hi Damian,
</p><p>
Please pass on our thanks to your guys for an exceptionally good job.
They were speedy, professional and absolutely charming - not one thing
lost or broken and the job completed in 8 hours flat. We were very
impressed and will recommend you to friends in the the future.
</p><p>
Kind regards, Eleanor
</p>
</div>

</body>
</html>

coothead
jhatter
11-23-2013, 02:05 PM
Thanks molendijk for your reply
jhatter
11-23-2013, 02:06 PM
That solved it for me ! Thanks Coothead
coothead
11-23-2013, 02:16 PM
No problem, you're very welcome. ;)



coothead