Geek Answers Handbook

Need advice on html / css structure for indentation, comments

I want to have a comment section in my application that looks like this:

response1 response1a response1b response1b1 response2 response2a response2b response2c response2c1 response2c1a response2c1a1 response2c1a1 response2c1a1a response2c1a1a1

I believe this is called streaming comments. You have probably seen this format on many online discussion sites such as reddit.

I am wondering how to implement this in an HTML application?

What type of html / css combination will have the greatest value to allow this type of indentation defined by the application?

+4
source share
6 answers

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 can also use <ul>/<li> instead of <div> (I think you can argue both in favor and against viewing comments with a stream as semantically equivalent to unordered lists). An internal comment can also be enclosed in another <div> if you need its extra CSS style.

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

First, if you use a list-based approach, you should strip the default <li> style used by most browsers (bullet and padding). Secondly, you probably also want to target the <ul>/<li> set <ul>/<li> to your streaming comments, because they must be different from other list structures. This means that even with a "semantic" approach, you resort to classes. So, in the end, what advantage do you really get, and is it worth the hassle?

We were a little more careful with the use of <ul> structures like this in our projects, and so far we are really happy about that. And, apparently, we are not only one .

+12
source

The most commonly used structure is a combination of <ul> s (unordered list) and <li> s (list element). Each post has 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 this idea, each answer can also have a list of answers. They go inside the <li> paragraph.

 <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 quite easy in code and semantically (used tags mean the right thing).

To add CSS code 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 discards each answer list and adds a small border at the top and bottom of each answer, effectively showing the user that this answer contains a different list of answers to this answer.

+5
source

Will rooted lists work? Embedded unordered lists with list type turned off will do this. Perhaps I do not understand your question.

t

 <ul> <li>response1 <ul> <li>response1a</li> <li>response1b <ul> <li>response1b1</li> </ul> </li> </li> </ul>
+3
source

<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>
+2
source

I hacked something similar together for ManagedAssembly.com. This is not ideal, but it may give you some ideas.

+1
source

You have a series of nested lists with a given order, so a series of nested <OL> elements will make sense. You give OL the left margin so that each nesting level looks more indented than its parent.

0
source

More articles:


All Articles