[CSS] Streepjes tussen menu-items (ul, li)

[Anoniem: 101208]

index.html

HTML:

<ul>
  <li>Home</li>
  <li>Login</li>
  <li>Register</li>
</ul>

Hoe maak ik van dit menu, zo'n menu:

code:

Home | Login | Register

... zonder de HTML te veranderen!
Is dit uberhaupt mogelijk?

[ Voor 16% gewijzigd door Anoniem: 101208 op 25-12-2004 16:41 ]

[Megamind]

Volgens mij kan dat niet, want LI staat voor LIST, UL voor Underordered List, die tag is bedoeld voor een opsomming...

[Scott]

Als je de volgende CSS code neemt, kun je iets maken dat er erg veel op lijkt:

Cascading Stylesheet:

li {

display: inline;
list-style-type: none;
border-right: 1px solid #000;
margin: 0;

}

[-Lars-]

Megamind schreef op zaterdag 25 december 2004 @ 16:42:
Volgens mij kan dat niet, want LI staat voor LIST, UL voor Underordered List, die tag is bedoeld voor een opsomming...

Een menu is een opsomming van links, waarvan elk onderdeel een list-item is. Semantisch is het inderdaad niet je-van-het, maar voorlopig het beste dan er beschikbaar is om een menu goed te omschrijven in (X)HTML.
Er komt een menu-element in XHTML 2, toch?

Verder ga ik mee met ScottB, alleen krijg je nu:

code:

Home | Login | Register |

Dus, nog een extra |. De oplossing daarvoor? Je zou voor het laatste item nog een appart id geven, en dan:

Cascading Stylesheet:

#laatste
{
border: 0;
}

[ Voor 10% gewijzigd door -Lars- op 25-12-2004 16:58 ]

[Anoniem: 101208]

Ok bedankt.

In CSS2 komt er toch een first-child pseudo-element selector? Dan lukt het daarmee wel.

[Blaise]

Dit lijkt er nog meer op (zonder | teveel)

Cascading Stylesheet:

ul{
    font:normal 12px/10px verdana,sans-serif;
    height:12px;
    overflow:hidden;
    padding:0;
    margin:0;
    list-style-type:none;
}

li{
    float:left;
    height:14px;
    border-left:1px solid black;
    padding:0 10px;
    margin:0 0 0 -2px;
}

Getest in Firefox1, Opera 7,54 en IE6.

[ Voor 3% gewijzigd door Blaise op 26-12-2004 00:12 ]

[Anoniem: 4275]

Zie hier voor vele voorbeelden, en een beetje zoeken op google zou geen kwaad kunnen...

[Anoniem: 97824]

mozilla.org gebruikt het (zoek een pagina met class="snav"). Met :before en :after en wat gekloot met pseudo-classes moet het lukken. Als het echter ook in IE moet werken kun je gaan hacken met een background image en een ID of CLASS attribuutje op minimaal 1 van de elementjes.