Horizontale Textnavigation mit Trennzeichen

[netzjunkie]

Hallo zusammen,

ich bekomme einfach eine horizontale Textnavigation mit Trennzeichen nicht hin.
Meine erste Navigaton habe ich mit Hilfe von SelfHTML erstellt (http://de.selfhtml.org/css/layouts/navigationsleisten.htm). Das klappt auch, alleridings möchte ich doch von der Buttonansicht weg.
Ich suche eine Navigation die so aussieht:

menu1 | menu2 | menu3 | menu4 | menu5

Ich weiß mittlerweile das es etwas mit li:after {content: " |"} und li:last-child:after {content: ""} zu tun haben soll, aber ich bekomme das leider nicht umgesetzt und benötige da Eure hIlfe wie man sowas erstellt.

Gruss
Thorsten

 

[chuvak]

Pack doch jeden Menüpunkt in eine Div-Box.
Dann jeweils Folgendes:

#div1
{
border-left: solid;
border-right: solid;
}

 

[peet123]

genau Pack das ding in divs, welche du klar definierst, was vielleicht noch interessant wäre ob du die nebeneinander oder untereinander haben willst. Wenn du sie nämlich nebeneinander haben willst, dann musst du nur den border-right machen sonst beide und beim Letzten Punkt halt noch nen eigenen Style das der garkeine Border hat.

 

[sipoh]

Ich würde bei den LI`s bleiben, also keine DIVs. A+LI reicht vollkommen aus.

 

[Maik]

Hi,

Lösungsvorschlag ohne jegliche zusätzliche DIV-Blöcke:

<ul>
    <li class="first"><a href="#">menu 1</a></li>
    <li><a href="#">menu 2</a></li>
    <li><a href="#">menu 3</a></li>
    <li><a href="#">menu 4</a></li>
    <li class="last"><a href="#">menu 5</a></li>
</ul>

ul {
margin:0;
padding:0;
list-style:none;
}
li {
float:left;
border-right:1px solid #000;
padding-right:5px;
margin-left:5px;
}
.first {
margin-left:0;
}
.last {
border-right:none;
}

mfg Maik