Ok on this tutorial we'll teach you how to build nested comments using CSS
at first we make a mockup
That's is you build simple nested comments ;) have fun
at first we make a mockup
then we use reset before we proceed on actual code of nested comments.
Reset.css - http://meyerweb.com/eric/tools/css/reset/
But on our stylesheet we combine the reset.css content to our main stylesheet so that we avoid so many http request.
HTML Code :
<div class="wrap">
<ul class="nested-comments">
<li>
<div class="user-comments">
<p><a href="#">UserName</a></p>
<em>August 13, 2012</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p><a href="#">Reply</a></p>
</div>
<ul class="nested-comments">
<li>
<div class="user-comments">
<p><a href="#">UserName</a></p>
<em>August 13, 2012</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p><a href="#">Reply</a></p>
</div>
<ul class="nested-comments">
<li>
<div class="user-comments">
<p><a href="#">UserName</a></p>
<em>August 13, 2012</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p><a href="#">Reply</a></p>
</div>
</li>
</ul><!-- third nested comments -->
</li>
</ul><!-- second nested comments -->
</li>
</ul><!-- main nested comments -->
<ul class="nested-comments">
<li>
<div class="user-comments">
<p><a href="#">UserName</a></p>
<em>August 13, 2012</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p><a href="#">Reply</a></p>
</div>
</li>
</ul>
</div>
CSS Code :
body {
background: #eee;
font: 11px/12px sans-serif;
}
.wrap {
width: 600px;
margin: 100px auto;
}
ul.nested-comments li {
margin-left: 50px;
}
ul.nested-comments li ul {
border-left: 1px solid #dddddd;
position: relative;
}
ul.nested-comments li ul:before {
content: '';
border-bottom: 1px solid #dddddd;
width: 20px;
position: absolute;
top: 20px;
}
div.user-comments {
background: #fff;
border: 1px solid #dddddd;
margin-bottom: 10px;
padding: 10px;
}
That's is you build simple nested comments ;) have fun
You download the demo file here : http://www.mediafire.com/?s118rrrsassrnks
