x

CSS Template Tutorial – Coding post content


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:

rustic content

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.

comment button

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

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Template Tutorials – Coding the Basics

    July 20, 2008 / 8 Comments

    The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template

    Read
  • CSS Template Tutorial – Finishing Off

    September 16, 2007 / 34 Comments

    I will show you in this part how to finish the template off with a footer and just make our coding a little neater.

    Read
  • CSS Template Tutorial – Right column links

    September 16, 2007 / 3 Comments

    The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview.

    Read

Comments

  1. dersleri says:

    Cascading Style Sheets (CSS) web design lessons
    Css link Properties Attributes – examles

    http://css-lessons.ucoz.com/link-css-examples-1.htm
    http://css-lessons.ucoz.com/link-css-examples-2.htm

  2. serious282 says:

    Thanks for the post,

  3. kiko says:

    I completely agree

  4. alex123 says:

    Keep up the good work! 🙂

  5. serious282 says:

    Thanks for your interesting article

  6. Marta says:

    Thank you, you were really very helpful since most of the tutorials on slicing I’ve seen this far were for table based layouts.

  7. John says:

    Thanks, this tutorial were really awsum to understand slicing and css

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books