Create a pipe separator through CSS
Tuesday, September 9, 2008 It often see a number of links distributed horizontally separated by a pipe "|", the graphic symbol dell'asticella vertical. Moreover, if you have good writing HTML, you find that this series of links - apparently horizontal - others are not betting that lists UL or OL The result is that instead of writing:
It would be better to use:
But add the pipe as a dirty code so clean. We can use an alternative edge, through the code:
- ul li (
- ; list-style: none;
- ; float: left;
- 12px; padding: 0 12px 0 12px;
- border-right: 1px solid # 666;
- )
Getting:
We can see two problems: the first link has the padding on the left and the last link has the pipe to his right, not what looks good! So that can be used :first-child :last-child of CSS2, graphical format for our list. Using the following style sheet on the HTML code shown before:
- ul li (
- ; list-style: none;
- ; float: left;
- 12px; padding: 0 12px 0 12px;
- border: 1px solid # 666;
- )
- / * Remove the padding from the "first son", the first LI * /
- ul li: first-child (
- ; padding: 0 12px 0 0;
- )
- / * Remove the board "last child", LI * /
- ul li: last-child (
- 0 0 12px; padding: 0 0 0 12px;
- ; border: none;
- )
Thereby obtaining a better result:
Of course, as often happens, attention to the compatibility with various browsers, especially Internet Explorer.
Variant to float
Even better, if you want to avoid the float use this code:
- ul li (
- ; list-style: none;
- ; display: inline;
- 12px; padding: 0 12px 0 12px;
- border-right: 1px solid # 666;
- )
- ul li: first-child (
- ; padding: 0 12px 0 0;
- )
- ul li: last-child (
- 0 0 12px; padding: 0 0 0 12px;
- ; border: none;
- )
Same result, at least on FireFox 
Julius said:
Why, according to your point of view, the syntax
<a href = "# 1" .....is worse
<A href = "....?In terms of coding, I do not see any obvious advantage, or rather, I see it, but relatively insignificant and integrated anyway. I am avoiding something?
Giovambattista Fazioli said:
@ Julius: quality of code we tend to write the HTML not looking after the final chart appearance. It follows that a "list" of links, being just a list, should be listed as
UL LIThen, horizontal or vertical display, it should be - indeed - the task of CSS style sheet. But there is nothing wrong with writing a sequence of Link as a series of TAGAThe issue is that eliminating the stylesheets as is the page? Using a sequence of TAGAseparated by pipe, they will be so visible even in the absence of style sheet. Using instead a listUL LIpage will still look nice and readable even without style sheet.