Problem mit Navigation

[Tronjer]

Hier ist mal ein etwas anderes gelagertes Navigations-Problem.

Ich muss morgen ein Menü dieser Art erstellen. Wobei die farbige Hervorhebung der aktuellen Seite (blauer Button) nicht notwendig ist.



Eigentlich eine simple Angelegenheit. Problem ist allerdings, dass der Hintergrund als komplettes Image von der Grafikabteilung geliefert wird, incl. der vertikalen Linien, welche man normaler Weise als border im CSS formatiert. Das HTML wird automatisch vom Backend erzeugt und sieht etwa so aus:

<!-- Vom Backend erzeugtes HTML -->
<div id="foo">
    <ul>
        <li><a href="#">News</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Kolumnen</a></li>
        <li><a href="#">....</a></li>
    </ul>
</div>

Ich habe also eine Hintergrundgrafik, mit vertikalen Linien in unregelmäßigen Abständen, kann nichts direkt in das HTML schreiben und muss die Menüpunkte per CSS so positionieren, dass sie mittig zu den Linien stehen. Mein Gedanke ist, mit jQuery dynamisch Klassen zuzuweisen. Oder gäbe es da eine einfachere/bessere Lösung?

window.onload = function() {
    $(function(){("id foo ul li:nth-child(1)").addClass("news")};
    $(function(){("id foo ul li:nth-child(2)").addClass("artikel")};
    $(function(){("id foo ul li:nth-child(3)").addClass("kolumnen")};
}

 

[Marv]

Hi,

gar nicht so einfach. Ich hätte alternativ zu deinem javaScript versucht es mit CSS Selektoren zu lösen.

-Hier gibt es ja die Möglichkeit Elemente, dessen Attribute (hier href) einen bestimmten Wert haben, anzusprechen
Habe hier als Beispiel einen Link, dessen hyperrefence google.de ist:

#foo ul li a[href |= "http://www.google.de"] {
    width:50px;
    border-right:1px solid #000;
}

Geht natürlich nur, wenn du die hrefs kennst.
Den Versuch durch Selektorenansprachen wie li + li + li { } einzelne Elemente anzusprechen ist auch schwer, da hier das dritte und alle nachfolgenden Elemente angesprochen würden, außer:
Du schreibst diese mit erhöhung der Verknüpfungen:

#foo ul li {
    color:red;
}
#foo ul li + li {
    color:blue;
}
#foo ul li + li +li {
    color: green;
}
#foo ul li + li + li + li {
    color:fuchsia;
}

sollte sogar gehen, oder :) ?

 

[Tronjer]

Ich habe es mit reinem CSS gelöst Der Grafiker hatte die Schriftgröße genau berechnet, und im FF habe ich das auch pixelgenau platziert. Allerdings macht der IE Probleme (siehe mein anderes post). Pseudocode:

#foo ul li {
    position: relative;
    top: 200px;
    left: 100px;
    padding: 0 30px;
}

Der Abstand links und rechts ist im IE 7/8/9 nicht mit der Anzeige vom FF identisch. Schlimmer noch, im Internet Explorer ist der Inhalt des divs nach unten verschoben. Beim IE9 vielleicht 3px und im IE7/8 mehr als 10px.