There are many ways to write and style comments and here is a brief guide on how you can use a simple definition list with a few rows of CSS to write a list of comments.
A comment has often some information such as who the comment is written by and a postdate when the comment was written shown with the comment. The picture at the top shows how the list will look like when we’re finished. Lets have that in mind when we begin.
Lets start writing the XHTML for the definitionlist.
<dl>
<dt>Simon Kjellberg</dt>
<dd class="postdate">2008-02-19 15:45</dd>
<dd>
This is where the actual comment will be written. For now,
we just write some text as an example.
</dd>
<dt>Alexander Radsby</dt>
<dd class="postdate">2008-02-18 16:34</dd>
<dd>
This is where the actual comment will be written. For now,
we just write some text as an example.
</dd>
</dl>
If we take a look at the list that’s written in pure XHTML in a browser now, it should look something like the picture below:
Now we just need to write some CSS to style the list.
Let’s begin with the <dl>:
dl{
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
padding: 0;
width: 500px;
}
We have set a font for all the text in the list and we have set all margins and paddings to 0 to remove undesired and unexpected default values. We also want the list to have a fixed-width so we have set it to 500 pixels.
Now lets write the CSS for the <dt>-tag that will contain the commenter-name:
dl dt{
margin: 0;
padding: 0 0 5px 0;
width: 360px;
float: right;
}
We have set a padding-bottom to create a space between the name and the actual comment. We have also set a width to 360px and finally floated it right wich makes the whole <dt> to move to the right.
Now we need to deside how the postdate will be presented:
dl dd.postdate{
margin: 0;
padding: 2px 20px 10px 0;
float: left;
width: 120px;
font-size: 70%;
}
As you remember we want to show the postdate to the left and the actual comment below the commenter-name so we have added a class to the <dd> that holds the postdate so we can separate the <dd> that contains the postdate from the <dd> that contains the comment. We’ve also added a fixed-width and a padding-right to make a gap between the postdate and the commenter-name and floated it left so it will float up to the left next to the commenter-name. Notice that the total width of the <dd> that contains the postdate and the <dt> is not bigger than the total width of the list. (If it would be bigger the layout would breake apart)
Finally we need to write the CSS for the <dd> that contains the actual comment:
dl dd{
font-size: 80%;
margin: 0;
padding: 0 0 20px 0;
float: right;
width: 360px;
text-align: justify;
}
We’ve almost set the same rules to the <dd> that contains the comment as we did to the <dt>. We have set the same width to the <dd> as we did to the <dt> and also floated right so it will be presented right under the <dt>.
That’s it! Now we’re finished and if we take a look at the list in a browser it should look like the list in the image below:
Summary
<dl>
<dt>Simon Kjellberg</dt>
<dd class="postdate">2008-02-19 15:45</dd>
<dd>
This is where the actual comment will be written. For now,
we just write some text as an example.
</dd>
<dt>Alexander Radsby</dt>
<dd class="postdate">2008-02-18 16:34</dd>
<dd>
This is where the actual comment will be written. For now,
we just write some text as an example.
</dd>
</dl>
dl{
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0;
pading: 0;
width: 500px;
}
dl dt{
margin: 0;
padding: 0 0 5px 0;
width: 360px;
float: right;
}
dl dd.postdate{
margin: 0;
padding: 2px 20px 10px 0;
float: left;
width: 120px;
font-size: 70%;
}
dl dd{
font-size: 80%;
margin: 0;
padding: 0 0 20px 0;
float: right;
width: 360px;
text-align: justify;
}
I hope this example will come in handy.
/ Simon Kjellberg
Comments