Thumbnailed Previous Posts, CSS and Markup Analyzed

This is a continuation of my a list of previous posts with images article. I am going to lay out the HTML and CSS that I wrote for this new feature. You can see it if you scroll down to the very end of this page. In the HTML, I formed my structure using the picture drawing where I marked all the main blocks with their CSS names:

"Previously" div wraps the entire block and within "thumbnails" div, I have a "row1" div even though I don't need it right now since I only have a single row of images. If you have a subsequent rows of images, the row div's will come in handy. I left a "row2" div as a placeholder for a second row of images if you want to use it that way.

Each image in "row1" div is wrapped with an "a" element to make it clickable. If you click a thumbnail, the href will take you to the correct URL for that post.

<div id='previously'>
<h4>previously on css bakery</h4>
<div id='thumbnails'>
<div id='row1'>

<a href='http://www.cssrule.com/2009/02/if-cake-is-html-icing-is-css.html'>
<img alt='If the Cake is the HTML, the frosting is the CSS ' 
border='0' height='138' src='http://pics.cssrule.com/pics/col1.jpg' width='170'/>
</a>

<a href='http://www.cssrule.com/2009/03/captioning-image-in-blogger.html'>
<img alt='Semi-transparent Image Captioning ' 
border='0' height='138' src='http://pics.cssrule.com/pics/col3.jpg' width='170'/>
</a>

<a href='http://www.cssrule.com/2009/02/heavenly-buttermilk-biscuits.html'>
<img alt='Heavenly Buttermilk Biscuits' border='0' 
height='138' src='http://pics.cssrule.com/pics/col2.jpg' width='170'/>
</a>

</div> <!-- recenlty-row-1 -->

<div id='row2'>
</div>

</div> <!-- previously-thumbnails -->

"Links" div comes after thumbnails. I have two div's, "left" and "right" nestled within "links". Left and right are generic words but with descendant selectors, "#links .left" and "#links .right" they become unique in the mark-up.

Within these two div's, I embedded 5 links to past articles using a simple styled, unordered list where each "li" element is again made clickable by wrapping it in an "href" element.

<div id='links'>
<div class='left'>
<ul>
<li><a href='http://www.cssrule.com/2009/02/if-cake-is-html-icing-is-css.html'>
If HTML is the Cake, CSS is the Frosting</a></li>

<li><a href='http://www.cssrule.com/2009/03/captioning-image-in-blogger.html'>
Semi-transparent Caption for an Image</a></li>

<li><a href='http://www.cssrule.com/2009/02/heavenly-buttermilk-biscuits.html'>
Heavenly Buttermilk Biscuits</a></li>

<li><a href='http://www.cssrule.com/2009/02/css-syntax.html'>
Picture of a CSS Rule</a></li>

<li><a href='http://www.cssrule.com/2009/02/eric-meyer-smackdown.html'>
Eric Meyer Smackdown on Tables</a></li>
</ul>

</div> <!-- previously-links-left -->


<div class='right'>
<ul>
<li><a href='http://www.cssrule.com/2009/01/eliminating-search-navigation-bar-in.html'>
Removing the Navbar in Blogger</a></li>

<li><a href='http://tools.cssrule.com/'>
Entities - HTML Conversion</a></li>

<li><a href='http://www.cssrule.com/2009/03/smooth-rounded-corners-in.html'>
Smooth Rounded Corners in Photoshop</a></li>

<li><a href='http://www.cssrule.com/2009/02/how-to-add-digg-to-blogger.html'>
How to Add Digg Button to Blogger</a></li>

<li><a href='http://www.cssrule.com/2009/01/december-2008.html'>
Welcome to CSS Bakery</a></li>
</ul>
</div> <!-- previously-links-right -->

</div> <!-- left and right -->
</div> <!-- previously -->

Close all the opening div tags at the end to complete your mark-up.

For CSS styling, I centered the "previously" div which wraps around the entire feature using text-align: center.

Since I don't want to effect other h4 heading elements in my markup, I wrote the descendant h4 selector, "#main-wrapper #previously h4". The styling of this 24 pixel high, 584 pixel wide h4 element includes a dotted bottom border, uppercase transformed text no matter what you enter, some padding/margin adjustements and a few font styling entries.

The next two main blocks under "previously" are "thumbnails" and "links" divs. In "thumbnails", I display 3 small images which you can increase upto 6 even smaller images given a 584 pixel width. I would not go any larger than 6 total. The styling of the thumbnails div consists of only some spacing above and below the div and with the descendant selector "#thumbnails img", I added two pixels to the right of each image to separate the adjacent thumbnails from one another.

The 120 pixel high "links" div aligns text to the left and draws a single pixel dotted line on its bottom. I floated the two subdivisions "#links .left" and "#links .right" within the "links" div both to the left and pushed the second div, 60 pixels to the right.

The rest of the CSS is about styling the links within the "links" div. Using "#links li a" descendant selector, I wrote generic font styling for the hypertext links, and with "#links li" selector, I got rid of the standard bullet styling by setting the list style to none. Th rest of the styles are just about adjusting margins and padding to achieve the look you want.


Additional instructions for Blogger users only:
CSS styling goes to the beginning of the document which is straight-forward however in order to add the mark-up, you need to expand the widgets from under Edit HTML mode and insert the new HTML between the following:

<!-- end of the labels only code -->

      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    </b:if> <!-- dws -->
    <data:adEnd/>
  </div>


------------your HTML goes here--------------
<!-- Previously HTML -->
<div id='previously'>
<h4>previously on css bakery</h4>
<div id='thumbnails'>
<div id='row1'>

. . . . . . . . . .
. . . . . . . . . .

</ul>
</div> <!-- previously-links-right -->
</div> <!-- left and right -->
</div> <!-- previously -->
<!-- end of Previously-->
-------------end of your HTML----------------

  <!-- navigation -->
  <b:include name='nextprev'/>

  <!-- feed links -->
  <b:include name='feedLinks'/>
   <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>