# Horizontale Textnavigation mit Trennzeichen



## netzjunkie (10. Oktober 2009)

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 (10. Oktober 2009)

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

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


----------



## peet123 (10. Oktober 2009)

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 (10. Oktober 2009)

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


----------



## Maik (11. Oktober 2009)

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


----------

