Druckbare Version
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
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;
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
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
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.
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
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.Zitat:
Zitat von kubjo
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
Code:.ce_accordion .toggler:before {
flex-shrink: 0;
}
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.
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