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:
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 = | | |*| | | |*| |
Stehe total auf dem Schlauch und hoffe auf Eure Hilfe.
Es grüßt Euch
Sylvia
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“. 🙂