ansaurus

Question

Need advice on html/css structure for indented, threaded comments

Answer 1

+3 A:

Wouldn't embedded lists work? Embedded un-ordered lists with list-style-type turned off would do that effect. Maybe I'm not understanding your question.

ie.

<ul>
<li>response1
 <ul>
 <li>response1a</li>
 <li>response1b
  <ul>
   <li>response1b1</li>
  </ul>
 </li>
</li>
</ul>

Vian Esterhuizen 2009-07-23 16:15:54

Yup, that's a list of comments. So use lists.

edeverett 2009-07-23 16:18:17

Most semantic way indeed

Gab Royer 2009-07-23 16:20:04

Using UL/LI can be a pain if your comment themselves can contain HTML lists. You'll need extra markup to distinguish between the structure lists and the content lists.

John Sheehan 2009-07-23 16:20:24

Yeah, that's a good point. My way is just the basic approach.

Vian Esterhuizen 2009-07-23 16:22:19

You just have to make separate classes then

Gab Royer 2009-07-23 16:22:27

@John - Under what circumstances would you allow users to enter HTML comments?

J. Holmes 2009-07-23 16:22:53

@J. Holmes - allowing users to enter HTML comments is common practice. Usually only allowing them to enter basic HTML like <em>,<strong> and so on.

Vian Esterhuizen 2009-07-23 16:26:10

Answer 2

+7 A:

In your HTML:

<div class="comment">
  Response1
  <div class="comment">
    Response1a
    <div class="comment">
      Response1a1
    </div>
  </div>
  <div class="comment">
    Response1b
  </div>
</div>

And in your CSS:

.comment { margin-left: 50px; }

This approach is very flexible and portable. You could also use <ul>/<li> instead of <div> (I guess it's possible to argue both in favour and against seeing threaded comments as semantically equivalent to unordered lists). The inner comment can also be wrapped in another <div> if you require it for additionaly CSS styling.

Update: I (slightly) prefer <div>s over <ul>/<li> because it simplifies your implementation.

Firstly, if you go with the list-based approach, you have to strip the default <li> style that most browsers use (a bullet point and padding). Secondly, you will probably also want to target the set of <ul>/<li>s that are specific to your threaded comments, because they should look different from other list structures. This means that even with the "semantic" approach, you have resort to classes. So in the end, what advantage do you really get, and is it worth the extra hassle?

We've been a little more careful with applying <ul> structures like this in our projects, and so far we're really happy about it. And apparently we're not the only one.

molf 2009-07-23 16:16:27

Hi molf. Why do you say this very flexible and portable? Do you believe it's more flexible and portable than the <ul>/<li> approach which most people seem to be recommending? You're the only person who has recommended a <div>/css approach so I'm curious what your reasoning is.

J. Holmes 2009-07-23 16:42:34

@J Holmes: I added an update to my answer, hopefully this clarifies your question about the slight preference that I expressed.

molf 2009-07-23 17:11:21

Thanks for explaining.

J. Holmes 2009-07-23 17:23:47

Answer 3

+2 A:

<ul> and <li> tags

Example:

<html>
<head>

</head>
<body>
    <ul>
     <li>
      comment
      <ul>
       <li>I comment you
        <ul>
         <li>oh, and I comment you!</li>
        </ul>
       </li>
      </ul>
     </li>
     <li>
      another one
      <ul>
       <li>comment about your</li>
       <li>well, another about you</li>
      </ul>
     </li>
    </ul>
</body>
</html>

usoban 2009-07-23 16:16:41

Upvoted for semantic and code

Gab Royer 2009-07-23 16:20:40

Answer 4

A:

I hacked something like that together for ManagedAssembly.com. It's not perfect, but it might give you some ideas.

John Sheehan 2009-07-23 16:18:12

Answer 5

A:

What you have is a series of nested lists with a given order so a series of nested <OL> elements would make most sense. You have give OL a left margin so that each level of nesting appears more indented than its parent.

Eifion 2009-07-23 16:18:21

Answer 6

+5 A:

The most used structure is a combination of <ul>s (unordered list) and <li>s (list item). Each post would have a list of comments, for example:

<div id="post">
    ... (post content here) ...

    <ul class="responses">
        <li>response1</li>
        <li>response2</li>
    </ul>
</div>

Then, expanding that idea, each response may have a list of responses as well. These go inside the <li> item.

<div id="post">
    ... (post content here) ...

    <ul class="responses">
        <li>
            response1
            <ul class="responses">
                <li>response1a</li>
                <li>response1b</li>
            </ul>
        </li>
        <li>response2</li>
    </ul>
</div>

This approach is fairly lightweight code-wise, and is semantically (the tags used mean the right thing) most appropriate.

To add some css onto that to make it visually appealing, you can do something like this:

ul.responses {
    padding-left: 4em;
}

ul.responses li {
    border-width: 2px 0;
    border-style: solid;
    border-color: #ccc;
}

This indents each response list, and adds a small border onto the top and bottom of each response, effectively showing the user that this response contains another list of responses to this response.

davethegr8 2009-07-23 16:19:58

ansaurus

tags:

views:

answers:

Need advice on html/css structure for indented, threaded comments

related questions