CSS Cookbook

Piped anchors without the pipe character, with SEO relevance

The Web 1.0 approach

HTML:
<a href="#">link</a> | <a href="#">another link</a> | <a href="#">yet more linkage</a> Result:
link | another link | yet more linkage

Synopsis

Easy, but no context given to search engines. It's a list of links, so using HTML that reflects its nature is probably better than this.

The Web 1.3.1 approach

HTML:


				<ul class="pipes">

				<li><a href="#">link 1</a></li>

				<li><a href="#">another link</a></li>

				<li><a href="#">more links</a></li>

				<li><a href="#">the last link</a></li>

				</ul>

CSS:


				.pipes, .pipes * {margin:0; padding:0; list-style:none; display:inline;}

				.pipes {display:block; margin:10px;}

				.pipes a {float:left; padding:2px 8px; border-left:1px solid #888;}

Result:

Synopsis

All the list items have an inline display to aid in removing their formatting and attacking IE6 layout issues. Each link is floated left and features a border-left to accomplish the "pipe" visual effect.

...But what about that first pipe at the beginning? Well, one way would be to create a class named "first" and plop that onto the first list-item, and use that to reset its border to nothing.

But XSL takes a lot of typing!

Same markup as prior example, added CSS in red:


				.pipes, .pipes * {margin:0; padding:0; list-style:none; display:inline;}

				.pipes {display:block; overflow:hidden; zoom:1; margin:10px;}

				.pipes a {position:relative; left:-1px; float:left; padding:2px 8px; border-left:1px solid #888;}

Synopsis

This is almost identical to the previous example. The difference: the container list is set to hide overflow, and all the links are relatively positioned one pixel to the left, effectively sweeping the first pipe under the rug (or back in the little etched wooden box before the parents get home, if that was/is your thing).

Here's an example with bigger pipes. 3 pixels wide each, so the relative left position of each link is now -3, accordingly, instead of -1.