und wieder eine listenformatierung

  • liebe forianer,

    nach stundenlangem recherchieren und probieren bleibt ihr meine letzte hoffnung.

    zwei plugins ("fold page list" und display submenus") kommen bei mir zum einsatz in der sidebar. das funktioniert blendend.

    bei der css-formatierung der navigation habe ich aber grobe probleme...

    folgende liste wird in der sidebar ausgegeben

    Code
    <div id="sidebar">
    <ul>
    <li id="pagenav">
    <h2>produkte</h2>
    <ul><li class="page_item current_page_item page_folder"><a href="ein link>blabla</a>
    <ul>
        <li class="page_item"><a href="einandererlink">bloblo</a>
        </li>
    es folgen viele weitere kinder der hauptpage

    mein css dazu schaut so aus

    so weit so gut. wenn ein kind angeklickt wird, dann ist es als einzelner listenpunkt fett und hervorgehoben. (also das attribut current_page_item rutscht dann natürlich zum jeweiligen listenpunkt)

    in der variante eins wird die überseite nicht fett (auch wenn sie angeklickt wird), in der variante zwei werden alle kinder ebenfalls fett gezeichnet, was weder erwünscht ist, noch gut aussieht.

    ich finde keine lösung, und bin daher dankbar für jede hilfe. vielleicht ist sie ja naheliegen, bin aber kein codegenie...

    danke an alle

    tiggerkater

    ps: die seite ist momentan noch bei mir lokal am rechner, daher kann ich keinen link posten.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Du benötigst da ein paar mehr CSS-Selektoren:

    Code
    #pagenav .current_page_item a{
         font-weight: bold;
         }


    Macht alle Links in current_page_item fett, also auch die der Unterlisten. Wenn du aber die Links in den Unterlisten nicht fett haben willst, dann brauchst du zusätzlich noch das:

    Code
    #pagenav .current_page_item li a{
         font-weight: normal;
         }


    Du kannst auch mit erweiterten verschachtelten Selektoren arbeiten. Ist manchmal komfortabler, wird aber evtl. nicht von allen (v.a. älteren) Briowsern unterstützt.

  • ein genie, es klappt, ich sag ja ich bin schon betriebsblind.

    kannst du mir vielleicht noch erklären marx, wieso das current_page_item bei einem Page_item dann trotzdem funktioniert, obwohl ich per css bestimme: der link in der liste mit der classe current_page_item soll "normal" sein?

    herzlichen dank marx,

    tiggerkater

  • Ääh... was funktioniert wie? Was genau willst du wissen? ;-)

    Dein Code oben sagt (Variante 2):
    Mache alle Links (a), die im Container #pagenav in einem Element mit der Klasse .current_page_item sind fett.

    Mein Zusatz dazu sagt:
    Mache alle Links (a), die im Container #pagenav in einem Element mit der Klasse .current_page_item sind - und da wiederum in einem weiteren Listenelement (li) - wieder normal, obwohl die vorhergehende Regel was andres sagt. Meine Regel ist genauer ("spezifischer") und wird deshalb auf die inneren Links angewendet.

    Mehr dazu Im CSS-Workshop unter dem Stichwort "Kaskade":
    CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 6 - Kaskaden

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!