CSSRule: How to Gather Links in a Presentable CSS Table & Multi Images in a List Element

Thursday, May 14, 2009

How to Gather Links in a Presentable CSS Table & Multi Images in a List Element

As the Café CSS Tutorial is growing, the links to past posts are becoming unwieldy. You have to mention them in every new tutorial. I thought it'd be good to collect a comprehensive list of all the previous tutorials and their html outputs under an easy to see graphical heading. This way the reader can survey the progress through a series of clicks without having to look around. "Related Posts" is an easy to construct CSS feature:

.related {
   width: 400px;
   background:   url(http://pics.cssrule.com/pics/bluegradient.jpg) 
                        no-repeat scroll 0 0;
}

.related h4 {
  color:#305CB6;
  font-family:Georgia,Times,Times New Roman,serif;
  font-size:1.2em;
  font-weight:normal;
  letter-spacing:0.1em;
  line-height:1em;
  text-transform:uppercase;
  margin:0 0 10px 0;
  padding: 10px 0 0 22px;
}

.related ul { list-style-type: none; margin:0 0 0 25px; padding: 0; }

.related ul li {
     background: url(http://pics.cssrule.com/pics/check.gif) 
                        no-repeat scroll 0 5px ;
     display:block;
     line-height:1.4;
     padding: 0 0 0 20px;
}


.related ul a {
     color:#305CB6;
}

.related a.icon  {
    /*first position is the x-value (1px) , second position (1px) is the y-axis*/
    background: url(http://pics.cssrule.com/pics/firefox_icon.gif) 
                no-repeat scroll 1px 1px;
    padding: 0 0 0 20px;
}

Related is a 400 pixel div with the blue gradient as its background. I print out the title for the feature (Related Posts) using an h4 element which is styled in ".related h4". This rule will only effect h4 headings that are descendants of related class. The links are generic anchors in an unordered list. They are given a bright blue color with the ".related ul a" selector. "related" list items which are li's of class "related" have a red checkmark background which is pushed down by 5 pixels to line up with the text on its right. I could have used the "list-style-image" property that I just talked about in Cafe Tutorial #10 but I wanted to show an alternate method for changing list markers to an image of your choice.

".related a.icon" is a fun selector that comes to play in the first list item element. I have two anchors separated by a vertical bar. Second anchor was given the class "icon" which I styled as having the Firefox browser icon as its background. The output for the tutorial is from Firefox.

The HTML that builds the list of anchors:


<div class="related">
<h4>Related Posts</h4>
<ul>
<li><
a href="http://www.cssrule.com/cafe-tutorial-8a.html">
Cafe Tutorial 9 - Image Replacement Technique</a> | 
<a class="icon" href="http://pics.cssrule.com/pics/cafe8a.html">
</a></li>

....... cut

<li><a href="http://www.cssrule.com/cafe-html-css-tutorial-ii.html">
Cafe Tutorial 2 - Basic elements of XHTML</a> | 
<a href="http://pics.cssrule.com/pics/cafe.html">Text Soup
</a></li>

<li><a href="http://www.cssrule.com/2009/04/tutorial1.html">
Café Tutorial 1 - Starting out
</a></li>
</ul>
</div>

Blogger Instructions:The CSS goes to head section of your HTML (Layout > Edit HTML). The HTML statements stay in your post (Posting > Create Post). Please be sure to give links to your own posts to construct the list.

Output: