Middle column content CSS and HTML
Update: Paceville.com is now online.
Here we will need an article teaser box, online right now table with users’ thumbnails and a simple full article box.
1.) The teaser box will have an image on top, headline beneath, sub heading and abstract and finally a link to the full article. Beneath all this will be an area where we see how many comments the article has and who wrote it and when.
2.) The online right now area will contain 14 thumbnails and we will use a table to display them properly.
3.) The full article box will be a simple DIV with black background and white text.
Demo here.
Let’s start with the article teaser:
<div class="article_teaser_box">
<img src="uploads/magazine_pic.jpg"/>
<h2>Very large headline</h2>
<h5>Sub heading</h5>
<p>Abstract, this text is a little bit longer, yes it is. Let's see what it looks like if we manage to span two lines.</p>
<p><a href="">Click here!</a></p>
<table class="teaser_comments">
<tr>
<td class="num_comments"><a href="">5</a> comments</td>
<td class="author_date">By: Partygirl on 20 June 2009</td>
</tr>
</table>
</div>So we’ve got the image at the top, the large and small headline (h2 and h5), the abstract and the link.
As you can see I’ve opted for a table to display the comment and author section. The reason for that is that I’m suspecting more stuff might be added to this area in the future which will make a table a better choice than DIVs.
With that in mind we need the following CSS:
table {
width: auto;
border-collapse:collapse;
}
th,td { padding: 0.5em; }
.article_teaser_box{margin:0px 0px 10px 0px}
.article_teaser_box h1,
.article_teaser_box h2,
.article_teaser_box h3,
.article_teaser_box h4,
.article_teaser_box h5,
.article_teaser_box h6,
.article_teaser_box p{
font-family: Tahoma, sans-serif;
padding:5px 10px 10px 10px;
}
.article_teaser_box h5,
.article_teaser_box h6,
.article_teaser_box p{
font-family:Helvetica, sans-serif;
padding:0px 10px 0px 10px;
}
.teaser_comments{
border-top: 1px dotted #fff;
margin:10px 0px 0px 10px;
width: 95%;
}
.author_date{ color:#ccc; }
.teaser_comments
.author_date{
text-align: right;
}Not much to say here, note the border-top attribute responsible for drawing the dotted border on top of each comment/author area, and the width: 95% attribute which will make us have some margins to the left and right, ie the border will not stretch all the way to the edge.
Next up is the online right now table:
<div class="online_right_now">
<table>
<tr>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
</tr>
<tr>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
<td>
<a href=""><img src="uploads/online_right_now.jpg" /></a>
</td>
</tr>
</table>
</div>Note that we contain the table inside a DIV.
.online_right_now {
padding: 0px 1px 0px 1px;
background: #000;
margin-bottom: 10px;
}
.online_right_now img{border: 1px #2d3138 solid;}
.online_right_now td{padding: 5px 5px 5px 5px; }We put a thin border around the image and pad all tds.
Finally the simple, full article box:
<div class="full_article">
<h1>We put Paceville on the map!</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus.
Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus,
vel hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet,
dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan,
magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi lacus felis,
euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam. Proin pharetra,
wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium quam.
Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor urna.
Phasellus aliquet pretium quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar purus, vel hendrerit ipsum tellus at ante.
Lorum ipsum.
</p>
</div>.full_article{background: #000; padding: 10px 10px 10px 10px;}
.full_article .left, .full_article .right{padding:5px;}
.full_article .left{float:left;}
.full_article .right{float:right;}Most of the classes here will be used at the author’s discretion to position images within the text.