How to separate each individual blog post?

Question

Im trying to create a blog page that has each post separate with a border around each one. A good example I can think of would be http://blog.pagodabox.com/. How every post is divided into its own style box. I tried running the loop, but I end up getting the border around the entire posts.. the code that i have so far is..

<div id="services">
        <!-- Start The Loop. -->
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


        <h2><?php the_time('F jS') ?></h2>

        <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

        <?php the_excerpt(__('(more…)')); ?>

         <?php endwhile; ?>

         <!-- Stop The Loop. -->
         <?php endif; ?>
 </div>

I was implementing the style with the #services. But once again getting the style to the entire list of the posts not individual...

Answer 1

You can do that entirely with CSS, almost no PHP coding required... try something like this:

<div id="services">
<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <?php the_content(); ?>
        </div>   
    <?php endwhile; ?>
<?php endif; ?>
</div>

... that way, each post will have it's unique ID and classes... using post_class() WordPress will add various post-related classes to the current post, such as the post type, .hentry and various others... you can then use those classes to apply specific styles to each post