You are reading...

January 2nd

Get it? No?

Moving on. This is how I lined up the cat with the category name or category icon.

First the mark-up

<p class="category"><span></span> <a href="/webdev" class="webdev">webdev</a>
</p></div>

In WordPress

<p class="category"><span></span> <?php foreach((get_the_category()) as $category)
{ echo '<a title="' . $category->cat_name . '" href="category/' . $category->
category_nicename . '/" class="' . $category->category_nicename . '">'
. $category->cat_name . '</a>';} ?> </p></div>

I tried to add keep the word “filed under” in the span tag for accessibility reasons but alas, there was an IE issue with that. Here’s the css for the “webdev” category.

#content .category a {
display:inline-block;
margin:0 0 0 5px;
vertical-align:middle;
}

#content .category {
text-transform:uppercase;
letter-spacing:1px;
margin:5px 0;
}

#content .category span {
display:inline-block;
height:42px;
background:url(images/category.png) no-repeat;
width:56px;
vertical-align:middle;
}

#content .webdev {
text-indent:-9999px;
background:url(images/cat_webdev.png) no-repeat;
width:107px;
height:21px;
}

Simply put, I made the “cat” and the “category icon” elements inline-blocks and had them vertically align together in the middle.

Of course, you could always use floats instead of inline-block. But I think they are a pain in the ass. Because floated elements cannot be vertically aligned, I would have to adjust the padding for each icon depending its height.

display:inline-block ftw once again.

Go home