hallo,
ich habe auf meiner seite die navigation per css so definiert, dass bei a:hover die farbe sich ändert in einen rotton und der text uppercase transformiert wird. ebenso bei a:active. hierfür hab ich im css .navTreeCurrentItem benutzt.
beim maus-hover funtioniert auch alles so, wie es soll.
jetzt ist es leider so, wenn ich auf einer seite des menus bin (a:active), der texttransform ausgeführt wird, d.h.der aktive menupunkt wird großgeschrieben, die farbe ist allerdings nicht anders (rot) wie es sein soll.
keine ahnung, warum...
kann mir jemand helfen?
a:active
-
-
Durchaus. Wenn Du den Quellcode dazu mal zeigst.
-
also,
für links grundsätzlich auf der seite:a:link, a:visited {text-decoration:none;
color:#A86232; }
a:hover, a:active {text-decoration:underline;
color:#8F2323; }und für die navigation:
.navTreeItem { display: inline;
list-style: none;}
.portletNavigationTree a:link,
.portletNavigationTree a:visited {display: block;
padding: 0.2em 0.5em; }
.navTreeCurrentItem {display: block;
padding: 0.2em 0.5em;
font-style:bold;
text-transform:uppercase;
color:#8F2323;
text-decoration:none; } -
Dein Missverständnis beruht in der Funktion der Pseudoklasse :active. :active wirkt nicht, wenn Du gerade auf der Seite bist die dort verlinkt wird sondern nur wenn man mit der Maus dieses Element gerade anklickt. Siehe: http://www.css4you.de/active.html
Wenn Du willst, dass der Menüpunkt auf dem man sich befindet (ohne, dass die Maus den Link berührt oder anklickt) anders gefärbt wird, gib diesem Link eine Klasse.
HTML
CSS
Codea:link, a:visited {text-decoration:none; color:#A86232; } a:hover, a.aktiv:link, a.aktiv:visited {text-decoration:underline; color:#8F2323; }Da Du nicht den HTML-Code gezeigt hast, kann ich natürlich nur vermuten, dass es daran liegt. Denn der Zusammenhang zu .navTreeCurrentItem erschließt sich mir nicht.
-
ok,
aber ich frag mich dann, wieso der texttransform über meinen css-code mittels definition von .navTreeCurrentItem funktioniert?
den html-code hab ich nicht gezeigt, weil plone den doch generiert.gibts in plone denn eine klasse, die für diese funktion steht? ich dachte nämlich, dass .navTreeCurrentItem dafür da ist...
-
Relevant ist der HTML-Code der in deinem Browser ankommt. Nicht der Quellcode der als Grundlage für die Generierung genutzt wird. Also zeig den Link zur betreffenden Seite oder den HTML-Code den Du in deinem Browser siehst. Ansonsten kann man nur raten was "navTreeCurrentItem" nun für eine Bedeutung hat.
-
die seite ist lokal, aber das ist, würde ich sagen der relevante teil des html-codes:
<table id="portal-columns">
<tbody>
<tr>
<td id="portal-column-one">
<div class="visualPadding">
<div id="portletwrapper-706c6f6e652e6c656674636f6c756d6e0a636f6e746578740a2f72617763656e7465720a6e617669676174696f6e" class="portletWrapper kssattr-portlethash-706c6f6e652e6c656674636f6c756d6e0a636f6e746578740a2f72617763656e7465720a6e617669676174696f6e">
<dl class="portlet portletNavigationTree">
<dt class="portletHeader">
<span class="portletTopLeft"></span>
<a href="https://www.forum-hilfe.de/view-source:ht…aktuell/sitemap" class="tile">Untermenu</a>
<span class="portletTopRight"></span>
</dt>
<dd class="portletItem lastItem">
<ul class="navTree navTreeLevel0">
<li class="navTreeItem visualNoMarker section-artikel1">
<a href="https://www.forum-hilfe.de/view-source:ht…ktuell/artikel1" class="state-published contenttype-news-item" title="">
<span>Artikel1</span>
</a>
</li>
<li class="navTreeItem visualNoMarker navTreeCurrentNode section-artikel2">
<a href="https://www.forum-hilfe.de/view-source:ht…ktuell/artikel2" class="state-published navTreeCurrentItem navTreeCurrentNode contenttype-news-item" title="">
<span>Artikel2</span>
</a>
</li>
<li class="navTreeItem visualNoMarker section-artikel3">
<a href="https://www.forum-hilfe.de/view-source:ht…ktuell/artikel3" class="state-published contenttype-news-item" title="">
<span>Artikel3</span>
</a>
</li>
</ul>
<span class="portletBottomLeft"></span>
<span class="portletBottomRight"></span>
</dd>
</dl>
</div> -
Hallo,
ich nehme mal an das du diese Frage Cross-Gepostet hast, da threadi, scheinbar Ahnung von CSS und HTML aber nicht von Plone hat.
Ich würde dir empfehlen die Frage mit einem Blick in Firebug zu klären. Da Plone eine Menge an Stylesheets mitbringt kann man sich nicht sicher sein welche Regel greift wenn man nicht die Reinfolge sieht. Da in der base.css von Plone eine Frage für das navTreeCurrentItem definiert ist, müsste man es mit !important überschreiben.
Schauen und wenn es dann nicht klar ist nochmal mit den Informationen aus Firebug melden.
Gruss Pumukel
-
Zitat
das muß dann aus versehen passiert sein...also, über den firebug finde ich bei betreffendem aktivierten menupunkt:
<a class="state-published navTreeCurrentItem navTreeCurrentNode contenttype-news-item"
bedeutet das, daß plone diese regeln in eben der reihenfolge anwendet? und ich mittels !important den befehl vorne an stelle?
jedenfalls funktioniert es, danke schonmals für den tip.ok, hab grad rausgefunden, daß unter
.state-published {color: &dtml-linkColor; !important;}
die link-farbe vorgezogen wird, das erklärt auch, warum der texttransform ausgeführt wird... -
CSS-Regeln werden in der Reihenfolge abgearbeitet in der sie in der CSS-Datei stehen. Die Reihenfolge der Klassen im HTML-Code spielt keine Rolle. Und das interpretiert nicht Plone sondern dein Browser, daher ist der Firebug durchaus hilfreich.