---
title: "Vertikaler Trennstrich ist mit im Link"
url: "https://www.typo3.net/d/100143-vertikaler-trennstrich-ist-mit-im-link"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2010-07-21"
last_reply: "2010-07-21"
replies: 1
solved: false
page: 1
pages: 1
lang: "de"
---

# Vertikaler Trennstrich ist mit im Link

TYPO3 › Menüs · 1 Antwort · gestartet 2010-07-21

## Eröffnungsbeitrag

**Tron1962** · 2010-07-21 · [Beitrag #1](https://www.typo3.net/d/100143-vertikaler-trennstrich-ist-mit-im-link/1)

Hallo!
Habe da für die meisten von Euch ein wohl eher kleines Problem, aber ich suche mir schon den ganzen Tag einen Wolf.
Es geht um ein horizontales Textmenu mit vertikalen Trennstrichen. Das Menü sieht auch gut aus, aber die Trennstriche sind mit im Link, das sieht nicht so gut aus, da ich das aufgerufene Menü unterstreiche.

Hier der Code:

```typoscript
lib.yvnavi = HMENU
lib.yvnavi  {
  entryLevel = 1
  1 = TMENU
  1 {
    noBlur = 0
    wrap = <ul>|</ul>
    NO = 1
    NO.ATagTitle.field = abstract // description // subtitle // title
    NO.allWrap = <li>|</li>
    NO.linkWrap = | |  |*| | |  |*| |
    NO.ATagBeforeWrap = 1
    NO.stdWrap.htmlSpecialChars = 1
    ACT = 1
    ACT < .NO
    ACT.allWrap = <li id="current">|</li>
    ACT.doNotLinkIt = 1
  }
}
```

Die Zeile von linkWrag sieht aber eigentlich so aus:

NO.linkWrap = |&nbsp;&nbsp;&#124;&nbsp;&nbsp; |*| |&nbsp;&nbsp;&#124;&nbsp;&nbsp; |*| |

Stehe total auf dem Schlauch und hoffe auf Eure Hilfe.

Es grüßt Euch

Sylvia

## Antworten

### [#2](https://www.typo3.net/d/100143-vertikaler-trennstrich-ist-mit-im-link/2) · etux · 2010-07-21

Eigentlich gehören die Trennstriche zwischen den Listenelementen (LI). Mit beispielsweise „optionSplit“ bei „NO.allWrap“. Dann würdest Du aber Schwierigkeiten haben, Deine Navi mit Float horizontal ein zu richten – wie soll man die Trennstriche mit floaten.
Gehen würde es dagegen, wenn Du die LI-Elementen mit „display: inline;“ formatierst, anstatt sie zu floaten.

Die Trennstriche kann man auch allein mit CSS darstellen. Geeignet wäre „border-left“ oder „border-right“ bei den Listenelementen.
Schwieriger wird es, wenn man nur zwischen den Listenelementen einen Trennstrich haben will. Also keinen Trennstrich am Anfang oder/und am Ende der Navigation. Denn der alte IE spielt da nicht mit, da er „first-child“ nicht kennt.
Für modernere Browser wurde reichen:
li {
      border-left: 1px solid #000;
}
li:first-child {
      border-left: none;
}
Wenn aber die Listenelemente mit „display: inline;“ positioniert werden, geht das mit ein wenig tricksen auch bei den alten IEs. Die Listenelemente werden (nur für den IE < 7) mit einem negativen „margin-left“ um die Breite des Trennstrichs verschoben.
* html li {
      margin-left: -1px;
}
Da der alte IE (fälschlicherweise) Teile eines Elementes abschneidet, wenn sie mit negativen Margins aus dem Elternelement (in diesem Fall aus der UL) hinaus geschoben werden, wird der „border-left“ beim ersten LI-Element unsichtbar. Ein Ersatz also für „li:first-child“. :)

---

Quelle: „Vertikaler Trennstrich ist mit im Link“, typo3.net, https://www.typo3.net/d/100143-vertikaler-trennstrich-ist-mit-im-link
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.