Frage zu 2 Level Navigation

  • Hallo zusammen,

    ich habe den Auftrag bekommen eine neue Homepage mit Plone für ein Projekt zu gestalten. Bin noch ein Anfänger in der großen Plone-Welt. ;)

    Habe erfolgreich die 2 -Level-Navigation in die Seite eingebaut (gemäß Anleitung http://plone.org/documentation/…tion-in-plone-3). Im CSS hab ich es so eingegeben, dass der Name gerade besuchte Seite "fett" angezeigt wird. Im ersten Level klappt das auch, aber wenn ich es für die zweite Ebene angebe, dann werden alle Unterordner "fett" angezeigt und nicht nur der gerade angezeigte.

    Habe schon versucht dieses Problem zu googlen, leider ohne Erfolg. :(

    Um das Problem zu lösen müsste ich wohl die sections.pt umschreiben oder?

    Für Eure Hilfe und Anregungen bin ich sehr dankbar. :)

    VG,

    luckystar3

  • Hallo,

    kannst du bitte deine CSS Anweisung einmal posten, Plone hängt normalerweise eine Klasse alle current_item an die aktuelle Seite in der Navigation an. Wenn der Musterselector in CSS jetzt zu grob ist, werden alle Unterelemente natürlich auch Fett.

    Gruss Pumukel

    Die beste Informationsquelle sind Leute, die versprochen haben, nichts weiterzuerzählen.

    Marcel Mart
    frz. Schriftsteller

  • Hallo Pumuckel,

    hier meine CSS Anweisung:

    /* The global section tabs. */
    #portal-globalnav {
    margin: 0 0 0em 0;
    position: relative;
    }
    #portal-globalnav ul {
    margin: 0;
    padding: 0em;
    border: 0;
    list-style-type: none;
    }
    #portal-globalnav li {
    margin: 0;
    padding: 0 0 0.6em 0;
    border: 0;
    display: inline;
    }
    #portal-globalnav li ul {
    display: block;
    visibility: hidden;
    position: absolute;
    left: 0;
    }
    #portal-globalnav li.selected ul, #portal-globalnav li:hover ul, #portal-globalnav li.over ul {
    visibility: visible;
    }
    #portal-globalnav li.selected ul {
    z-index: 10;
    top: 2em;
    }
    #portal-globalnav li:hover ul, #portal-globalnav li.over ul {
    z-index: 99;
    margin-top: 0em;
    margin-bottom: -1em;

    }

    #portal-globalnav {
    height: 0.8em;
    font-size: 12px;
    font-weight: normal;
    color: #999999;
    background: #FFFFFF;
    border-top: 1em solid #666666;
    padding: 0em 0em;
    }
    #portal-globalnav a {
    color: #999999;
    text-decoration: none;
    padding: 0 10px .6em 10px;
    }
    #portal-globalnav ul {
    color: #999999;
    background-color: #FFFFFF;
    }
    #portal-globalnav li {
    border-right: none;
    }
    #portal-globalnav li ul {
    font-weight: normal;
    line-height: 2em;
    }
    #portal-globalnav li ul li {
    border-right: none;
    font-weight: normal;
    }
    #portal-globalnav li ul a {
    color: #999999;
    font-weight: normal;
    }
    #portal-globalnav li ul a:hover {
    text-decoration: none;
    }
    #portal-globalnav li.selected {
    color: #999999;
    font-weight: bold;
    background-color: #FFFFFF;
    }
    #portal-globalnav li.selected a {
    color: #999999;
    }

    #portal-globalnav li:hover, #portal-globalnav li.over {
    color: #999999;
    font-weight: bold;
    background-color: #FFFFFF;
    }
    #portal-globalnav li:hover ul, #portal-globalnav li.over ul {
    background-color: #FFFFFF;
    }
    #portal-globalnav li:hover a, #portal-globalnav li.over a {
    color: #999999;
    }
    #portal-globalnav li a:hover {
    text-decoration: none;
    }
    #portal-globalnav .selected a:hover {
    height: 0.3em;
    background: #FFFFFF;
    color: #999999;
    font-weight: bold;
    }


    Und danke schon Mal für deine schnelle Antwort. :)

    Grüße
    luckystar3

  • Hallo,

    wenn ich das auf die schnelle richtig sehe, ist diese Auszeichnung Schuld, dass alles Fett wird:

    #portal-globalnav li.selected {
    color: #999999;
    font-weight: bold;
    background-color: #FFFFFF;
    }

    Meine Vermutung ist, dass die Subnavigation Kindelement von diesem li.selected ist, und damit per Default Fett. jetzt ist die Frage wie man es lösen kann, sind alle Kindelemente (XML-Syntax) a elemente oder ul oder auch normaler Text?
    Wenn alle die Fett dargestellt werden sollen a elemente sind ist es einfach

    #portal_nav li.selected * {
    font-weight: normal;
    }

    #portal_nav li.selected > a {
    font-weight: bold;
    }

    Hier ist Firebug die größe Hilfe für dich um das Problem zu finden.

    Gruss Pumukel

    Die beste Informationsquelle sind Leute, die versprochen haben, nichts weiterzuerzählen.

    Marcel Mart
    frz. Schriftsteller

  • Guten Morgen,

    die Kindelemente sind ul, deshalb greift die Lösung für die a Elemente leider nicht.

    Gibt es noch einen anderen Weg der dir einfallen würde? Bin für jeden Vorschlag offen. :)

    Einen schönen Tag und sonnige Grüße
    luckystar3

  • Hallo luckystar3,

    entweder stehe ich jetzt auf dem Schlauch, mein CSS sollte jetzt alle Kindelemente wieder auf normal statt Fett zurück geschaltet haben und nur direkte kind a fett.

    Gib mal bitte einen HTML Auszug der Generierten Navigation, dann kann man es vielleicht sehen.

    Gruss Pumukel

    Die beste Informationsquelle sind Leute, die versprochen haben, nichts weiterzuerzählen.

    Marcel Mart
    frz. Schriftsteller

  • Hallo Pumuckel,

    tut mir Leid das ich erst heute anwortet, war aber die letzten Tage nicht auf der Arbeit und konnte dir somit nicht den HTML Auszug schicken. Dies hole ich hiermit nach ;)

    <ul id="portal-globalnav">
    <tal:tabs tal:repeat="tab view/portal_tabs"><li tal:attributes="id string:portaltab-${tab/id};
    class python:view.selected_portal_tab==tab['id'] and 'selected' or 'plain'"
    ><a href=""
    tal:content="tab/name"
    tal:attributes="href tab/url;
    title tab/description|nothing">
    Tab Name
    </a>
    <tal:block omit-tag=""
    tal:define="subnav tab/subtab;">
    <tal:block omit-tag="" tal:condition="subnav">
    <ul class="nn-twolevel-subnav">
    <tal:tabs tal:repeat="subtab subnav">
    <li tal:attributes="id string:portaltab-${subtab/id};">
    <a href="" class="" tal:attributes="href subtab/url;" accesskey="accesskeys-tabs" i18n:attributes="accesskey">
    <tal:block omit-tag="" i18n:translate="" >
    <span tal:replace="subtab/name">Tab Name</span>
    </tal:block>
    </a>
    </li>
    </tal:tabs>
    </ul>
    </tal:block>
    </tal:block>
    </li></tal:tabs>
    </ul>

    Ich hoffe das hilft dir weiter.

    Viele sonnige Grüße
    luckystar3

  • Hallo luckystar3,

    leider war es nicht das was ich wollte, aber man sieht trotzdem schon was.
    Der Template-code der das HTML-Generiert und der generierte HTML-Code sind beim debuggen doch was verschiedenes.

    mein CSS sollte eigentlich funktionieren und nur den link (a) fett darstellen und die ul und kindelemente davon normale Schrift, jetzt kann natürlich die Reihenfolge der CSS anweisungen eine Rolle spielen. Wenn du kannst schau dir das bitte mit Firebug an und dann siehst du welche CSS Regel wo greift.

    Ansonsten versuch bitte nochmal genau zu beschrieben wie es aussehen soll und wie es jetzt aussieht, oder gib uns einen Link auf die Seite ggf. per pm.

    Gruss Pumukel

    Die beste Informationsquelle sind Leute, die versprochen haben, nichts weiterzuerzählen.

    Marcel Mart
    frz. Schriftsteller

  • Hallo Punuckel,

    nachdem ich die Navigation gelöscht und alles nochmal geschrieben habe, hat es mit deinem Tipp für den CSS-Code auch geklappt. *Hüpf**Freude*

    Vielen, vielen Dank das du immer so schnell und nett auf meine Frage/Beiträge geantwortet hast. Echt spitze dieses Forum.

    Viele Grüße,
    luckystar3