How do I make comments posted to my site formatted to be separate from one another?

Question

I'm working on some code for my blog that displays comments. This is the code that outputs comments from the database:

$i = 0;
while ($i < $num) {
$name = mysql_result($result,$num - $i,"name");
$dream = mysql_result($result,$num - $i,"dream");


echo "$name<br>$dream<br>";

$i++;
}

I'm currently using CSS to apply a style to the entire div in which this bit of php resides. This lets me format all the comments posted, but I want to format each comment individually though uniformly. For example, I can use CSS to put a border around all the comments, but what I want is the same border around each comment to separate the comments. Any ideas? Help is appreciated.

Answer 1

Put each comment into a div

echo "<div class='comment'>$name<br>$dream</div>";

or, semantically nicer, wrap everything into an <ul> and have each comment be a <li>:

echo "<li>$name<br>$dream</li>";

and address each li like so:

ul.comments li { border: ..... }

Answer 2

echo '<div class="comment">' . "$name<br/>$dream<br/></div>";

Then in your CSS you can use

.comment {
    /* CSS rules for comments */
}

And I like Pekka's idea:

<ul class="comments">
    <?php
    $i = 0;
    while ($i < $num) 
    {
        $name = mysql_result($result,$num - $i,"name");
        $dream = mysql_result($result,$num - $i,"dream");
        ?>
        <li>
            <ul>
                <li><?php echo $name; ?></li>
                <li><?php echo $dream; ?></li>
            </ul>
        </li>
        <?php
        ++$i;
    }
    ?>
</ul>

And then in your CSS (and you can add even more classes for each name, dream, etc)

ul.comments {
    /* CSS rulse for a nice background etc for the whole group of comments */
}
ul.comments ul {
    /* CSS rules for each comment */
}
ul.comments ul li {
    /* CSS rules for each subsection of a comment
       You could make separate classes for these too */
}

Answer 3

Just use divs and classes.

For instance, output something like:

<div class="comment">
  <div class="author">John</div>
  <div class="commentBody">This is a comment!</div>
</div>

In this way you can style separately the whole comment (class comment), the author name (class author) and the comment itself (class commentBody)

You could also use a <li> instead of <div>s.

Answer 4

As a suggestion, you could zebra-stripe the comments instead of placing a border around each of them. Your PHP would need to add a conditional using a modulus(2), to add a css class even/odd. And your CSS would look like this:

ul.comments li.even {
    background-color:white;
}

ul.comments li.odd {
    background-color:lightBlue;
}