For my first web design/css tutorial, I wanted to talk about a problem that I had, and how I solved it. This is pretty simple stuff, but it took me a while to grasp the idea, so I thought I’d share it with the half-dozen of you who do this sort of work.
Below is a screen capture of a footer of a blog I’m designing for a client. Typically, I like to include the navigation redundantly at the bottom of a page so that, rather than scrolling back to the header, a user can jump to wherever they want to go next. You’ll see this kind of basic redundant navigation in a lot of places.
The little line between links is called a pipe, and as a separator, it is pretty common. It’s just a simple little visual element to help delineate between the nav items. The trouble comes in when you want to use these in combination with dynamically generated code from WordPress.
The List Code
First off, navigations should pretty much always be a list in html. That’s what lists are for, and styling them is great and easy. And, coincidentally, WordPress returns a call for pages with list code. So the HTML for this list of links looks like this:
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Fiction">Fiction</a></li>
<li><a href="#" title="Other Writing">Other Writing</a></li>
<li><a href="#" title="About Rudi">About Rudi</a></li
</ul>
I stripped out some classes that WordPress adds automatically, as I don’t need them here. All of the above is contained in a div with an id of #footer. So, note that nowhere in that code is the pipe iteself. That’s because I am adding the pipe with CSS. You can add characters with CSS, you ask? Yep!
The CSS
#footer ul {list-style-type:none; position:absolute;
left:300px; top:27px; font-size:16px;}
#footer ul li {display:inline; color:#e3bd8e;}
#footer ul li:after {content:" |";}
So what’s going on here? First of all, I am using Eric Meyer’s CSS Reset above this, so all of that default padding and styling on a list has been stripped. This means the only styling that happens is the styling you want, and it creates a baseline between browsers. It really makes my job easier.
So we’re styling the list itself to have no bullets, and we’re positioning it absolutely within the container. You don’t have to do that, but I just found it easier for my needs in this particular footer. Next, I wanted the list all on one line, so I added display:inline. Finally, I’m using the pseudo class :after and the property content to insert a space and the pipe after each item on the list. Say my client wants these items separated instead by an asterisk? Easy enough to change across the entire site with that one line.
Pseudo classes aren’t something I often use, so the next thing I wanted to do tripped me up. The code above will add a pipe after each li tag, but I don’t want one on the last one. There’s no reason for it. How in the world do I do that? I know how to use the :last-child pseudo class, but it alone wouldn’t let me remove the pipe. Turns out, you can and should chain together pesudo classes
#footer ul li:last-child:after {content:" ";}
I probably could have set that to content:none as well, now that I think about it. But a plain space in my case works just fine.
So there you have it. The moral of the story? Chain pseudo classes together to get what you want. Any questions?
Related Links:
