Free CSS Templates

In this part we will code the article background and the comments button. For the design we are using for the tutorial the content on the left is a post in wordpress. The content of each post is going to be held in a div with a background at the top. There is also a div tag inside that one with the background at the bottom. The comment button will then be added into the end of the inner article div into its own div.

Coding the article CSS

This part is going to be simple so it probably won’t be very long. Simply slice the background pattern at the top of the article like so:

The coding is actually quite complicated because the inner div used. Basically you have the article div. This is the holder for artfoot and has the background at the top. The line-height attribute just spaces the lines a bit more. The art foot is therefore inside the article div and has the borders and paddings applied to it. The margin bottom is also added so when you have numerous posts there is a gap between them.

.article{
width:500px;
background:#F5EEE0 url(images/topbg_26.gif) top repeat-x;
line-height:20px;
}
.artfoot{
width:479px;
margin-bottom:30px;

text-align:left;
padding-top:5px;
padding-left:10px;
padding-right:10px;
border-left:1px solid #CBA964;
border-right:1px solid #CBA964;
background:url(images/artfoot_30.gif) repeat-x bottom;
border-bottom:3px solid #CBA964;
}

You should place the XHTML for the article and artfoot divs after the closing tag for holder. When you add text inside the artfoot div you should have <p> before each paragraph and </p> at the end.

<div class="article">
<div class="artfoot">
<p>This is an example paragraph . </p>
<div class="infobar"> Comments (5)</div> </div>
</div>

Coding the comments button

As you can see from the above code I have put the comments button into an info bar div. So lets first define the CSS for the infobar then change the coding for the actual comments button. The coding for the infobar should be simple. Some padding at the bottom, full width, padding to the right and text aligned to the right. The coding of the infobar is just to get the comments button in the right place.

.infobar{
width:438px;
padding-right:40px;
text-align:right;
padding-bottom:10px;
}

Note: Since the artfoot has a 1px border on either side and 10px padding on either side the width available for the infobar is a maximum of 500 - (2+20) = 478px.

That should be all the coding we need for the info bar. The actual comments link is going to be more difficult. I am going to make it easier by making the button a fixed width meaning we just need to slice the button background and no need for repeats.

CSS for comments link

I have referred to the comments link as a button as it appears like a button. Please don’t confuse this with a form button. It is simply a link with CSS used to define the background image and area for the link. The coding for this is actually pretty complicated. I decided to make it a list so other links could be added as well such as read more. If you want me to explain it please post a comment. Otherwise you can just use my code and try to adapt it if you need to:

.infobar ul{
list-style:none;
text-align:right;
margin:0;
}
.infobar ul li{
width:109px;
height:24px;
padding-top:2px;
background:no-repeat top center url(images/button_33.gif);
text-align:center;
color:#F4EDDF;
float:right;
font-weight:bold;
font-size:11px;
font-family:Verdana;
}
.infobar ul li a:link, .infobar ul li a:visited, .infobar ul li a:hover{
display:block;
text-decoration:none;
color:#F4EDDF;
}

The XHTML has therefore also changed and a clear has been added since the li items are floated to the right. You should end up with XHTML like:

<div class="article">
<div class="artfoot">
<p>Example paragraph in a post </p>
<div class="infobar"> <ul><li><a href="#">Comments (5)</a></li></ul><div class="clear"></div></div>
</div>
</div>

You should now have completed the left column. All that is left to do is the links on the right and a really simple footer.

Step 7- Right Column Navigation

Bookmark It