Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Accordion Toggler Schrift vertikal ausrichten

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Accordion Toggler Schrift vertikal ausrichten

    Hi Leute,
    könnt ihr mir helfen, auf dieser Seite:
    https://www.namibia2019.kubik.de/route.html

    Die Überschrift im Accordion läßt sich leider nicht mit den üblichen Mitteln vertikal beeinflussen.
    Ich hätte sie gerne zu den Flaggen ein wenig nach oben verschoben!


    Grüße
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Stell mal den toogler auf display: flex. Mit folgendem Code sieht das bei mir schon gut aus

    Code:
    .ce_accordion .toggler {
        color: #ccc;
        margin: 10px 0;
        padding: 8px 8px 8px 18px;
        background-color: #323232;
        cursor: pointer;
        font-size: 20px;
        font-size: 1.25rem;
        line-height: 2rem;
        display: flex;
        align-items: center;
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi mlweb,
    vielen Dank, darauf wäre ich nie gekommen!

    Jetzt sieht es genau so aus, wie ich mir das vorgestellt habe!

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  4. #4
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Leute,
    jetzt muß ich diesen Thread nochmal aktivieren. Die vertikale Ausrichtung der Schrift ist ja Dank mlweb super gelöst worden.
    Leider habe ich bei der Darstellung auf dem Smartphone besser gesagt bei einem schmalen Viewport das Problem, dass sich die Flaggen verkleinern, je nachden wie viele Zeilrn der Text einnimmt. Das obwohl meines Erachtens genügend Höhe im Toggler zur Verfügung stehen würde. Aber bitte schaut selbst :

    https://www.namibia2019.kubik.de/reiseberichte.html

    Ab 550px Breite schumpfen die Flaggen ungleichmäßig! Ich habe schon an diversen Paramentern geschraubt, leider ohne Erfolg!

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  5. #5
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Beschäftige dich mal näher mit Flex ;-). Da gibt es einige Möglichkeiten.

    Dir hilft hier konkret flex-shrink: 0 bei den Flaggen zu setzen.

  6. #6
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi Webstar,
    ja, da hast Du Recht, ich sollte mich mal mit flex beschäftigen!

    Ich habe jetzt mal " flex-shrink: 0" beim toggler eingegeben, aber leider ohne Erfolg. Ich weiß nicht wie ich den Flaggen das extra zuweißen kann, da sie ja als Pseudoelemente mit":before" eingebunden sind.

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  7. #7
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von kubjo Beitrag anzeigen
    Ich habe jetzt mal " flex-shrink: 0" beim toggler eingegeben, aber leider ohne Erfolg. Ich weiß nicht wie ich den Flaggen das extra zuweißen kann, da sie ja als Pseudoelemente mit":before" eingebunden sind.
    Na und? Und warum fügst du bei dem CSS mit dem Pseudoelement die Anweisung hinzu? Beim Toggler selbst hat es nichts verloren. Du willst ja, dass die Flagge nicht schrumpft.

  8. #8
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi webstar,
    sorry dass ich vielleicht auf dem Schlauch stehe! Aber das Element mit dem Pseudoelemet :before ist der Toggler! Hast Du schon mal in mein CSS reingeguckt?
    das sieht jetzt so aus:

    Code:
    .ce_accordion .toggler {
    	color:#ccc;
        margin:10px 0;
        padding:2px 4px 4px 18px;
        background-color:#323232;
        cursor: pointer;
    
      	font-size:20px;
    	font-size:1.25rem;
    	line-height: 1.2rem;
    
    	display: flex;
           flex-shrink: 0;
           align-items: center;
    }
    
    
    
    
    
    .ce_accordion .toggler:active,
    .ce_accordion .toggler:hover,
    .ce_accordion .toggler:hover::after {
        color: #000;
    	background-color:#F6AA4F;
    	transition: color 0.6s ease-in-out 0s; 
    	transition: background-color 0.6s ease-in-out 0s; 
    }
    
    
    .ce_accordion  .nam.toggler.toggler:before  {
        content: "";
        width: 72px;
        height: 48px;
        top: 0;
        left: 0;
    	margin:0 10px 0 0;
        font-size: inherit;
        background-image: url("../Themes/NAM19/Bilder/Flag_of_Namibia.png");
    	background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
    }
    
    
    .ce_accordion  .bwa.toggler.toggler:before  {
        content: "";
        width: 72px;
        height: 48px;
        top: 0;
        left: 0;
    	margin:0 10px 0 0;
        font-size: inherit;
        background-image: url("../Themes/NAM19/Bilder/Flag_of_Botswana.png");
    	background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
    }
    
    .ce_accordion  .ger.toggler.toggler:before  {
        content: "";
        width: 72px;
        height: 48px;
        top: 0;
        left: 0;
    	margin:0 10px 0 0;
        font-size: inherit;
        background-image: url("../Themes/NAM19/Bilder/Flag_of_Germany.png");
    	background-size: contain;
        background-repeat: no-repeat;
        display: inline-block;
    }

    Wo soll iich denn "flex-shrink: 0;" sonst zuweisen?


    Viele Grüße aus Ludwigsburg
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  9. #9
    Contao-Urgestein
    Registriert seit
    29.10.2009.
    Ort
    Magdeburg
    Beiträge
    2.020
    Partner-ID
    626
    User beschenken
    Wunschliste

    Standard

    Code:
    .ce_accordion .toggler:before {
      flex-shrink: 0;
    }

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Du hast @webstar nicht verstanden und das liegt sicher daran, dass Du Dich noch nicht mit Flexbox beschäftigt hast. Gute Websites zur Erklärung von Flexbox gibt es massenhaft.
    http://flexboxfroggy.com/ - z.B. schön zum üben
    https://blog.kulturbanause.de/2013/0...odell-von-css/ - mit ein paar Grundlagen
    Auch von Peter Müller gibt es Videos zum Thema

    Das flex-shrink: 0 gehört zu den Flex-Items innerhalb eines Flex-Containers (das Element was display: flex) bekommt. Die Flex-Items sind die Elemente die direkt innerhalb der Flexbox liegen (Kinder).
    In Deinem Fall soll nur die Fahne nicht verkleinert werden. Diese liegt im Pseudo-Element before. Und bei dieses Element musst Du verhindern, dass es verkleinert wird.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Hi mlweb,
    Hi webstar,
    vielen Dank für's "rauflupfen" hätte mir klar ein sollen, dass .before das bekommen muß!

    Danke für die Geduld!


    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

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
  •