How to Decorate This Div?

Hello everyone. I’m feeling so irritated to make this div during long time…

Already, I’ve made Testimonial friends and first image with comment successfully, But when I’m going to place second image and comment then I found an issue like below

Since I’m a webdesign newbie, So I need your proper help to complete it.

Please…

We can’t work solely off an image, you do realize this yes? :slight_smile: .

Code or website please.

1 Like

It looks like you haven’t cleared or contained your floats from your drawings.

There are hundreds of ways to do this but for IE8+ I would do it like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
    text-align:center
}
.testimonials {
    margin:0;
    padding:0;
    list-style:none;
    max-width:800px;
    margin:auto;
    background:#f9f9f9;
    padding:5px;
    display:table;
}
.testimonials li {
    display:table-row;
}
.tc {
    display:table-cell;
    vertical-align:top;
    padding:10px;
    border-bottom:1px dotted #000;
}
.txt {
    vertical-align:middle;
}
.testimonials li img {
    border-radius:10px;
    display:block;
}
</style>
</head>

<body>
<h1>Testimonials (ie8+)</h1>
<ul class="testimonials">
        <li>
                <div class="tc"><img src="http://placehold.it/100x80"></div>
                <p class="tc txt"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes here </p>
        </li>
        <li>
                <div class="tc"><img src="http://placehold.it/100x80"></div>
                <p class="tc txt"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum </p>
        </li>
        <li>
                <div class="tc"><img src="http://placehold.it/100x80"></div>
                <p class="tc txt"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispu </p>
        </li>
</ul>
</body>
</html>

For older browsers you could use floats instead.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
h1 {
    text-align:center
}
.testimonials {
    margin:0;
    padding:0;
    list-style:none;
    max-width:800px;
    margin:auto;
    background:#f9f9f9;
    padding:5px;
}
.testimonials li {
    clear:both;/* clear previous floats*/
    padding:10px 0 10px 70px;/* space for image */
    border-bottom:1px dotted #000;
    zoom:1.0;/* remove if IE7 support not required*/
}
.testimonials li:after {/* contain floats*/
    content:"";
    display:table;
    clear:both;
}
.testimonials li img {
    float:left;
    margin-left:-60px;
    border-radius:10px;
}
</style>
</head>

<body>
<h1>Testimonials</h1>
<ul class="testimonials">
        <li><img src="http://placehold.it/50x50"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes here </li>
        <li><img src="http://placehold.it/50x50"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes here </li>
        <li><img src="http://placehold.it/50x50"> Lorem ispum text goes here Lorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes hereLorem ispum text goes here </li>
</ul>
</body>
</html>
1 Like

Many Thanks PaulOB. Mainly I’ve made my Testimonials in footer section like this

I’ve taken your LIST TAG idea. It is working now, successfully. But another issue is that, Please look at my 3rd picture and comment I applied dark effect bottom of them. It is looking like they are going to cut away.

Could you please say something about this effect?

It’s usually made with overlaying div with semi-transparent gradient image in background

Something like this perhaps?

1 Like

Thanks megazoid , If possible then show …a detailed statement that make me clear about it…

i made quick example for you: http://jsfiddle.net/Lu3jpgtd/

1 Like

Nice demo :smile:

It may be worth adding pointer-events:none to the overlay so that links can be clicked in the faded section. (I know support is sparse for pointer events but as its just an enhancement here its worth adding).

:smile: See I’m smiling, Because I’ve done. Everyone here in this forum so helpful. RyanReese , PaulOB, and You megazoid nice to see all of you friends. Once again thanks so much.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.