Druckbare Version
Moin Moin,
ich habe in Contao (3.5.4) eine Navigation eingerichtet. Diese hat ein eigenes Icon, was per CSS eingerichtet und angezeigt wird.
Nun habe ich dem li.active Element auch ein Icon zugewiesen (ein anderes), doch stattdessen wird keines bei dem aktiven Navigationspunkt angezeigt. Was habe ich übersehen?
Ich habe bei beiden Elementen, dieselbe Einstellung in Contao im CSS angehakt und eingestellt.
Dafür müsste man den Code kennen...
Habe nur eine Vermutung: Kann es sein, dass du li.active sondern a.active ansprichst? Aus den aktiven Menüpunkten wird nämlich ein span und kein Link mehr.
Ich spreche li.active an.
Alle anderen Einstellungen (wie Schriftart, -Farbe und ähnliches) werden übernommen. Eben nur das Icon ist verschwunden, während bei den anderen Listenelemente das Icon noch da ist.
Den Code schreibe ich heute abend rein, nach Feierabend.
Dann gib uns mal einen Link zu deiner Seite oder schau selbst mit dem Developer tools (F12), was da mit dem CSS los ist.
Hier ist der Link:Zitat:
Zitat von folkfreund
http://x-viking.de/vampire.html
html - code
css - codeHTML-Code:<nav class="mod_customnav side_navi block">
<a href="vampire.html#skipNavigation90" class="invisible">Navigation überspringen</a>
<ul class="level_1" role="menubar">
<li class="active first"><span class="active first" role="menuitem">Vampire</span></li>
<li class="last"><a href="vampire-plots.html" title="Vampire Plots" class="last" role="menuitem">Vampire Plots</a></li>
</ul>
<a id="skipNavigation90" class="invisible"> </a>
</nav>
Code:.side_navi ul{display:block;margin-top:10px;margin-bottom:10px;list-style-type:disc;list-style-image:url("../../files/x-viking/images/pfeil_icon.png")}
.side_navi a{display:block;margin-top:10px;margin-bottom:10px;font:12pt Cabin Sketch;text-decoration:none;color:#40000}
.side_navi li.active{display:block;margin-top:10px;margin-bottom:10px;font:12pt Cabin Sketch;color:#400000;list-style-type:disc;list-style-image:url("../../files/x-viking/images/pfeil_icon_unten.png");Cursor:pointer}
.side_navi a:hover{display:block;margin-top:10px;margin-bottom:10px;font:12pt Cabin Sketch;font-weight:bold;Cursor:pointer}
Hallo Zaolat,
das Problem liegt darin, dass CSS list-style-image nur für ol und ul vorsieht, nicht für li.
Der angezeigte Pfeil wird nicht durch deine Zuweisung zu li sondern durch ul (darum funktioniert es):
Eine Alternative könnte es sein, die Icons per :before zu setzen (ungetestet):Code:.side_navi ul {
display: block;
margin-top: 10px;
margin-bottom: 10px;
list-style-type: disc;
list-style-image: url(../../files/x-viking/images/pfeil_icon.png);
}
Code:.side_navi ul {
display: block;
margin-top: 10px;
margin-bottom: 10px;
list-style-type: none;
}
.side_navi li:before {
content: '';
background:url('../../files/x-viking/images/pfeil_icon.png');
width: 2em; /* width of the image */;
height: 1em; /* height of the image */;
display: inline-block;
}
.side_navi li.active:before {
background:url('../../files/x-viking/images/pfeil_icon_unten.png');
}
da es nicht bei den beiden Navigationspunkten bleiben wird, hilft mir leider nicht before und after.
Ich habe auf einigen anderen Websites gesehen, wie diese eigene Icons genutzt haben und auch deren Darstellung sich änder; abhängig davon, ob es die aktive Seite ist oder nicht. Wie machen die das denn, bzw. welchen Weg gehen die?
Hallo Zaolat,
prinzipiell funktioniert es. Wenn Du dem Selektor .side_navi li.active das display:block wegnimmst, weil der Pfeil zu groß ist.
Gruß
Hella
Wieso hilft dir before nicht? Du hast zwar mehr als zwei Navigationspunkte, brauchst aber trotzdem nur zwei Icons/Bilder und zwischen active und nicht active zu unterscheiden.
Danke, das hat geholfen!Zitat:
Zitat von fusch
Nicht weil der Pfeil zu groß ist, sondern weil list-style-image nur auf Elemente wirkt welche, auf display:list-item stehen.
Ich gebe dir den Tipp die UL und LIs erstmal ganz auf margin und padding:0 zu setzen. Dann kannst du alle As und SPANs (STRONGs) so formatieren, wie du möchtest. Als erstes mit display:block. Die klicksensitive Fläche bleibt somit möglichst groß.
Die Icons kannst du dann als background-image oder über ein Pseudo-Element einrichten. Somit kannst du diese auch Pixel genau ausrichten.