Results 1 to 6 of 6

Thread: flexible div with top & bottom images

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    79
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default flexible div with top & bottom images

    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
    HTML Code:
    <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>
    Code:
    .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;
    }
    Click image for larger version. 

Name:	Screen shot 2013-11-22 at 13.00.41.jpg 
Views:	191 
Size:	43.3 KB 
ID:	5281Click image for larger version. 

Name:	testimonial-top.jpg 
Views:	153 
Size:	2.6 KB 
ID:	5282Click image for larger version. 

Name:	testimonial-bottom.jpg 
Views:	195 
Size:	2.9 KB 
ID:	5283

    Thanks in advance for your help.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,337
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    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>

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there jhatter,

    try it like this...
    Code:
    
    <!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

  4. The Following User Says Thank You to coothead For This Useful Post:

    jhatter (11-23-2013)

  5. #4
    Join Date
    Aug 2009
    Location
    London
    Posts
    79
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    Thanks molendijk for your reply

  6. #5
    Join Date
    Aug 2009
    Location
    London
    Posts
    79
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    That solved it for me ! Thanks Coothead

  7. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    688
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default


    No problem, you're very welcome.


    coothead

Similar Threads

  1. flexible loadarea
    By papaver in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 10-31-2012, 08:34 PM
  2. Replies: 0
    Last Post: 03-20-2012, 04:13 AM
  3. Replies: 4
    Last Post: 08-16-2010, 09:41 PM
  4. Replies: 1
    Last Post: 07-17-2010, 12:25 AM
  5. Resolved Space under images? (bottom of div)
    By dillankid in forum CSS
    Replies: 7
    Last Post: 01-15-2009, 09:01 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •