the art of lying just beyond the edge of respectability

Styling redundant blog elements with CSS (part 1)

Posted February 20, 2010 in Web Design | Comments 0

A couple of visitors asked me about the category lists and search fields featured on this website. I take for granted the CSS styles I apply across a multitude of websites I've designed. In this post I will outline how I style common features found on most modern websites: category lists and search fields. This portion of the tutorial will cover styling our category list, along with an easy jQuery function to create some style changes on our odd-numbered <li> elements.Source code available at the bottom of the post.

The Category Listing

Let's start with the category list (the CSS outlined below can also be applied to archive date listings and blog roll outputs as well). For my output lists, I leverage my CMS (in this case Expression engine) to deliver my data using the <ul> tag. Many blog engines from WordPress to Textpattern feature similar output options when working with blog data. The results of the category styles are pictured below. We will be adding some simple jquery to stripe our list-items for added definition.

The HTML Markup:

The Styles

h2{
 margin-bottom:5px;
 padding:0;
 border:1px solid #dddddd;
 width:258px;
 height:35px;
 font-family:"arial black", Gadget, sans-serif;
 font-size:13px;
 line-height:35px;
 letter-spacing:1px;
 color:#fff;
}

The styles above define our h2 header. For the purpose of this design, our targeted width is 300 pixels. We have given the <h2> a margin-bottom of 5px to separate it from the elements beneath it, and reset the <h2> default padding to 0. We have also defined a border around the entire <h2> element, and forced a width of 258 pixels. This is important because the width of our <h2> element will become increased when we apply another class below. Our height is defined at 35 pixels and a font family has been declared along with a size, a line height, letter spacing and color choice.

h2.cats{
 padding-left:40px;
 background:url("images/category_bg.gif") 0 0 no-repeat;
}

By defining a class called "cats" (for categories), we can add to the base styles we have already given our <h2> element. The class defines a left-padding of 40 pixels. This provides enough space for our text to clear the image we define as our background. Now regarding the padding, we need to consider that because the padding of this class is 40 pixels, it will be added to the total width of our base <h2> style. Meaning: 40 pixels left-padding + 258 pixel <h2> width = 298 pixels for our total defined width of the <h2>.

However, remember we said our target was to make the width 300 pixels? Well that border we declared in the <h2> base style is one pixel wide. It wraps the entire element (including the left and right sides). Therefore our 298 <h2> pixel width + 1 pixel left and right border = 300 pixels. Wha-bam!

The <ul> CSS starts as follows:

ul#categories{
 list-style:none; 
 width:298px;
 margin:0 0 10px 0; 
 padding:0;
 border-top:1px solid #dddddd;
 border-left:1px solid #dddddd; 
 border-right:1px solid #dddddd;
 border-bottom:0 none;
}

The CSS we've just produced will eliminate the default list-style (the unordered list's native bullet element), set our list width at 298 pixels, and add a comfortable 10 pixel margin to bottom of the <ul> element. We then zero out the default padding for the unordered list, and apply a 1 pixel thick border to the top, left and right sides of the list. Because we have defined our list at 298 pixels wide the 1 pixel border to both the left and the right sides of our list will now give us a total width of 300 pixels. We have left the bottom border of the <ul>set to zero, and that is because the <li> element will handle that below:

ul#categories li{
 width:298px;
 height:24px; 
 line-height:24px; 
 font-size:10px; 
 text-indent:5px;
 border-bottom:1px solid #dddddd; 
 font-family:arial, helvetica, sans-serif;
}

The CSS we've just defined for our <li> elements will force the list items at 298 pixels wide (we are using the width defined from our parent <ul> style to arrive at this value). The 24 pixel height provides some comfortable vertical space for our list item to exist inside. The line-height of 24 pixels lets us vertically center our list item text. The font size is arbitrary, and I have selected 10 pixels for a clean small display. Now lets look at the text-indent. We have set it to 5 pixels. This is largely ignored style, but in the context of our <li> it will substitute for applying left-padding to the list items. This is helpful because it will eliminate the need to re-calculate the list item width, unlike applying any left or right padding. I've selected 5 pixels for the indent value because I think that it comfortably nudges the list items away from the left edge just slightly, for a bit of visual appeal. Finally we have set our list items with a bottom-border of 1 pixels thick. Remember that because we have already declared our <ul> with a top, left and right border of the exact same parameters - this declaration will cap off the bottom list-item element. We now have a fully boxed list-item.

ul#categories li a{
 text-decoration:none; 
 display:block; 
 width:298px; 
 height:24px;
}

The first line of our <a> style simply removes the default HTML underline. We then declare the <a> element as block - this allows the entire href to become actively clickable. Next our width is maintained at 298 pixels. It is important that you keep the width defined in your <a> element the same size as your <li> We don't want the href to break out of the parent <li> or <ul>. Finally we maintain a height of 24 pixels. Just like the width, the height should remain consistent between the <li> and the <a> styles. Lastly, we will apply the :hover state.

ul#categories li a:hover{
 background:#ebcac8;
 color:#000;
}

This last block of code is pretty straight-forward. We define a new background color, and then change the list-item font color so we can see it against the new background color.

ul#categories li.stripe{
 background:#e9e9e9;
}

This final css class we need to create will generate a new background color for our odd-numbered list items. The jQuery will apply this class dynamically when our document loads as we will see below.

Some Simple jQuery

To create some definition between our list items, we will be adding a very simple jQuery function to the head of our document. This function combined with our css class "odd", will create a stripe effect on the odd numbered <li> items in our category list using the .stripe class we have just created.

In the head of our document we make a call to the latest jQuery library. In the second script call we set up jQuery's standard .ready(function(){ });

Inside of the jQuery ready function we need to identify which DOM element we are targeting. We supply jQuery with our "#category" div id from our style and then further identity that within that id we want to act upon the <li> element. Immediately following the li we add a colon and write "even". We are in essence saying to jQuery that we want to pull all of the even numbered li elements from within the category div id.

But why even? We mentioned our class with the name ".stripe" would apply to the odd numbered list-items didn't we? Well the reason for choosing "even" is because Javascript is zero-based in numbering. Like an array, Javascript numbers elements starting with zero [0, 1, 2, 3, 4, etc.].

Technically if we added odd to our jQuery statement above, the first li element would be indexed at 0. Since CSS is not zero-based, and there is no zero <li> element the second <li> item would be identified. If it seems confusing, just try and supply odd when you test your own code. It makes sense when you see the distinction in practice.

The final portion of the jQuery's code calls the "addClass" attribute to the <li> elements inside of our category id. We set the "addClass" to call our css style ".stripe". Thats it. You have successfully striped the odd numbered <li> elements in your unordered list. Now when you add new list-items, your dynamic stripes will continue to be applied without the need to intervene further with your markup.

Part 2 of this tutorial covers how the search form is styled.

The Source Code

View Source Code

Share This Post

             

Comments

No comments posted

Comment on this entry