SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Most flexible markup for threaded comments

    I am trying to make my threaded comments as flexible and templatable as possible. I use an ordered list with the following content per list item.
    How could i make it even more flexible for templating with css?
    I plan to give every part of the commentfooter its own span

    Code:
    <li>
    <a name="comment-1.0101"></a>
    
    <div id="comment-1.0101" class="commentbox level3"><div class="spanner">
    <div class="commentbody">Another reply to make things interesting</div>
    <div class="commentfooter"><span class="author"><a href="#comment-1.0101">Thierry said on 29 September 2007</a></span><span class="reply"> <a href="#" onclick="replyopen('1.0101'); return false;">Reply</a><a href="#" onclick="giverating('1.0101',this); return false;">+</a>0</span> </div>
    </div></div>
    </li>

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need the named anchor. You can point internal anchors at any element with an ID (e.g. div id="comment-1.0101"). .commentfooter should be as paragraph, not divs and it has an extra closing span tag in it. What's the .spanner div doing?

  3. #3
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need the named anchor.
    Thanks didn't realize that.

    commentfooter should be as paragraph, not divs and it has an extra closing span tag in it.
    I thought a div would give me more flexibility than a p


    What's the .spanner div doing?
    Cross browser compatible padding.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    I am trying to make my threaded comments as flexible and templatable as possible
    I've had similar thoughts in the past - "I will add markup to the page so that I can have more elements to play with the styling - A CSS Zen Garden approach"

    I generally see this as a bad idea now, and code with as little markup as possible.
    Code:
    - commentbox 
      - spanner ? :)
        - commentbody
          - commentfooter
            - span / span / span / span / span
          - /commentfooter
        - /commentbody
      - /spanner 
    - /commentbox
    That's a few too many hooks methinks

    My guess is that all you are needing is:
    Code:
    <li>
      <h3>Simpleton</h3>
      <p>How lovely</p>
    </li>
    And padding is perfectly compatible - no extra div is needed.

  5. #5
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is so minimalist :P

    The problem is that I will want people to be able to customize the looks of their comments nicely.

    So i don't know what the requirements will be and want to allow as much creativity with the templates as possible.

    Thats also why the spans are there, in order to allow people to associate images with the actions such as reply etc.

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like my Mum used to say: "how long's a piece of string?"

    What you've got now might provide enough styling hooks for some situations and not for others. It might provide enough hooks for a certain style for one person at a certain skill level, but not for another person who's not as experienced.

    You could add as many elements as you like to cover all imagineable permutations but you gotta draw a line somewhere and I think what you've got now is enough (by the way, my comment about the extra span tags was cos I didn't bother scrolling to the right to see there was more stuff there ).

  7. #7
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    great, glad to hear im not missing anything obvious

    would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?
    My amount of markup would allow an experienced coder to do that
    But positioning like that takes a little know how.

    So i don't know what the requirements will be and want to allow as much creativity with the templates as possible.
    I find it simpler to add to a minimalist template that to try and coerce the jungle of markup to look how I am wanting. I would prefer to add a div here or there when needed rather than force everyone to use the code heavy version.

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lajkonik86 View Post
    would the current markup allow them to switch the commentfooter and commentbody divs around? In order to show the author above the comment instead of below?
    You can do it, but who's going to be doing the styling? Are you offering preformatted templates or will people do their own CSS? Cos if they know how to create CSS to reverse the order of the elements on screen, they're going to know how to edit the HTML template anyway.

  10. #10
    SitePoint Addict
    Join Date
    Feb 2005
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok well that would be another decision, whether to allow them to edit the html templates

    complexity is as follows:
    - config settings (language, captcha, rating on or of, avatar etc.)
    - layout and design

    Im having trouble deciding whether to allow changes to the html template
    Thinking out loud:
    - it might be more complicated for the people creating the templates to edit both html and css
    - my javascript will break (can work around that though)
    - the html could contain xss attacks (so would need to check for that)
    - if they add text translation would become problematic

    Then again, not having the ability to edit the html might give flexibility problems.
    Think ill test a bit before choosing


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •