Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: CSS li.active mit eigenem Symbol

  1. #1
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard CSS li.active mit eigenem Symbol

    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.

  2. #2
    Contao-Fan
    Registriert seit
    03.01.2012.
    Beiträge
    809

    Standard

    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.

  3. #3
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard

    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.

  4. #4
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    Dann gib uns mal einen Link zu deiner Seite oder schau selbst mit dem Developer tools (F12), was da mit dem CSS los ist.

  5. #5
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard

    Zitat Zitat von folkfreund Beitrag anzeigen
    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:

    http://x-viking.de/vampire.html

  6. #6
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard

    html - code
    HTML-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">&nbsp;</a>
    
    </nav>
    css - code
    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}

  7. #7
    Contao-Urgestein Avatar von folkfreund
    Registriert seit
    09.04.2010.
    Beiträge
    1.928

    Standard

    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):
    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);
    }
    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: 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');
    }

  8. #8
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard

    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?

  9. #9
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Mitglied des Contao User Treffen München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  10. #10
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  11. #11
    Contao-Nutzer
    Registriert seit
    25.01.2014.
    Beiträge
    72

    Standard

    Zitat Zitat von fusch Beitrag anzeigen
    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
    Danke, das hat geholfen!

  12. #12
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •