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


I have a comment section in my app that looks like this:

  response1 Response 1A response 1B response 1B1 reaction 2 reaction 2 reaction 2 reaction 2C reaction 2C1 reaction 2C1A response 2C1A1 response 2C1A1 response 2C1A1A response 2c 1A1A1 I believe it is called threaded annotations. You might have seen this format on many online discussion sites like  reddit   

Am I thinking about how to implement it in my app's HTML?

What kind of html / css combination will give the most sense to allow such an application - in the defined HTML code = "comment" & gt; Response 1 & lt; Div class = "comment" & gt; Response1a & lt; Div class = "comment" & gt; Response1a1 & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "comment" & gt; Response 1b & lt; / Div & gt; & Lt; / Div & gt;

and in your CSS:

  .comment {margin-left: 50px; }  

This approach is very flexible and portable. & lt; Div & gt; Instead of you can & lt; Ul & gt; / & Lt; Li & gt; (I think it is possible to argue on both sides against meaningful view of threaded observations in the form of logic) equal to unreserved list.


Update: I (internal) another & lt; Div & gt; Internal comments can be wrapped in . & lt; Div & gt; s over & lt; Ul & gt; / & Lt; Li & gt; Because it simplifies your implementation.

First of all, if you go with a list-based approach, you can see the default & lt; Li & gt; The style must be stripped which is used by most browsers (a bullet point and padding). Secondly, you could possibly and lt; Ul & gt; / & Lt; Li & gt; s, which are specific for your threaded annotations, because they should look different Other list structures mean that with the "meaning" approach, you In the end, what do you really benefit, and whether it is worth the extra hassle?

We use & lt; Ul & gt; With a little more careful with implementing the structures it is in our projects, and till now we are really happy about it. And apparently we are not.


Comments

Popular posts from this blog

c# - ListView onScroll event -

PHP - get image from byte array -

Linux Terminal Problem with Non-Canonical Terminal I/O app -