Beiträge von Emess
-
-
Ich hab das komplett neu gemacht jetzt wird es auch mittig ausgerichtet,
Nur habe ich wohl trotzdem einen Fehler gemacht da die Unterschrift sich scheinbar nicht als teil von cards sieht
Falls es jemanden doch interessieren sollte kann man es unter
ansehen.
Ansonsten wurstel mich mich einfach weiter durch die Tiefen des Internet
-
Dann kann ich dem Forum ja nur noch einen guten weiteren Schlaf wünschen. Gute Ruhe und lasst es weiterhin ganz ruhig angehen.
Nix für ungut. Aber so wird wohl auch dieses Forum sterben.
Ich für mich fange dann einfach nochmal ganz von Vorne an.
-
Was verstehst du nicht?
Vielleicht hilft ein Bild. Falls du sonst noch was brauchst lass es mich wissen. Manchmal kann ich mich schriftlich schlecht ausdrücken. Scrs.jpeg
-
Hab gerade mal beim rumspielen ein Problem. Hab da einen snippet gefunden der mir gefiel und in eine Flexbox gesetzt.
Die Card habe ich mittels justify-content: center; ausrichten können Doch bekomme ich das vertikal nicht hin. Ich komme nicht zu einem Ergebnis.
Ich befürchte der gesamte Code ist eher suboptimal.
Vielleicht erbarmt sich einer meiner?
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/styleschart.css" /> <title>Test</title> </head> <body> <section id="test"> <div class="blog-wrapper"> <div class="blog-card"> <div class="card-img"> <img src="img/html.jpg" /> <h1>HTML & CSS</h1> </div> <div class="card-text"> <p> Um nicht geistig ganz einrosteten bleibe ich so gut es geht mit allen Techniken für Webdesign auf dem Damm. CMS mache ich nicht, da man mit reinem HTML und CSS immer flexibler ist. </p> </div> </div> <div class="blog-card"> <div class="card-img"> <img src="img/fischen.jpg" /> <h1>Fischen</h1> </div> <div class="card-text"> <p> Das liebe ich besonders. Mit meiner ständigen Begleiterin raus ans Wasser und die Natur genießen. Mit etwas Glück gibt es auch was in die Pfanne oder auf den Grill. Früher ging das übers gesamte Jahr. Doch heute ist das eher was für die warme Jahreszeit. </p> </div> </div> <div class="blog-card"> <div class="card-img"> <img src="img/legs.jpg" /> <h1>Kulinarisches</h1> </div> <div class="card-text"> <p> Das ist eine weitere Passion von mir. Es freut mich immer, wenn ich hochwertige Lebensmittel zu lecker Gerichten verwandeln kann. Wenn dann noch die Teller ausgeleckt werden. Dann bin ich glücklich. </p> </div> </div> </div> </section> </body> </html>
Code
Alles anzeigen* { margin: 0; padding: 0; } html, body { height: 100%; background-color: blue; } #test { min-height: 100vh; background-color: darkolivegreen; /* background-image: url(../images/bg-chart.png); */ } #test > p { font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: fff; width: 70%; } #test > h1 { font-family: Arial, Helvetica, sans-serif; color: black; } .flex-container { width: 80%; padding: 5px; margin-bottom: 3rem; display: flex; flex-direction: row; /* Default */ gap: 1em 2em; justify-content: center; align-items: center; } .blog-wrapper { padding: 15px; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; .blog-card { @include transition(0.3s); max-width: 300px; margin: 15px; background: #fff; border: gray; text-align: center; cursor: pointer; &:hover { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1); .card-img { img { opacity: 0.8; } } } .card-img { position: relative; text-align: center; background: gray; img { @include transition(0.3s); max-height: 180px; width: 100%; border-bottom: 4px solid gray; } &:before { content: ""; position: absolute; bottom: -8px; left: 50%; margin-left: -10px; width: 0; height: 0; /* border-top: solid 10px lawngreen; border-left: solid 10px transparent; border-right: solid 10px transparent; */ } h1 { position: absolute; margin: 0; font-size: 2em; bottom: 15px; width: 100%; color: #fff; font-family: Arial, Helvetica, sans-serif; } } .card-details { margin-top: 30px; font-family: Arial, Helvetica, sans-serif; color: #3c3c3c; span { padding: 0 30px; i { margin-right: 5px; } } } .card-text { padding: 30px 15px; font-family: Arial, Helvetica, sans-serif; line-height: 22px; } } } @media (max-width: 950px) { .flex-item-right, .flex-item-left { flex: 100%; justify-content: center; font-size: 1em; } .flex-container { /* flex-wrap: wrap; */ margin-bottom: 25px; flex-direction: column; } }
-
Vielen Dank mit deinem Ansatz hab ich es doch noch schnell hinbekommen.
Flexbox halt also auch seine Grenzen. Doch wo man es einsetzen kann kommt man schnell zum Ziel.
Jedenfalls noch mal Danke. So können wir wenigst unserem Willi ein gedenken,
-
Ich möchte gerne auf unserer Website einen guten Freund ehren. doch leider gelingt es mir nicht den Text das Bild umfließen zu lassen
Hier der Code:
HTML
Alles anzeigen<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Traueranzeige</title> <style> .container { display: grid; grid-template-columns: auto 2fr; gap: 5px; width: 600px; height: auto; border: 5px solid #000; overflow: hidden; } .image { width: 100px; margin: 15px; grid-row: span 2; } .text { margin-top: 0px; } .text > h2 { font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: center; margin-bottom: 2px; } .text > h3 { font-family: Arial, Helvetica, sans-serif; font-size: 0.7em; text-align: center; margin-bottom: 5px; } .text > p { font-family: Arial, Helvetica, sans-serif; font-size: small; } </style> </head> <body> <div class="container"> <img class="image" src="willi_fit.jpg" alt="Trauerbild" /> <div class="text"> <h2>Willi Ettl</h2> <h3>geb. 19.03.1948 gest. 23.03.2024</h3> <p> Im Alter von 76 Jahren ist unser guter Freund und langjähriges Mitglied, Willi Ettl, trotz bekannter Krankheit doch sehr unerwartet von uns gegangen. In über 30 Jahren, davon lange Zeit als Vereinsrechner hat er Geschichte bei den Angelfreunden-Fischbachtal geschrieben. Wir wünschen der Familie und den Angehörigen die nötige Kraft in dieser schweren Zeit. Wir werden Willi Ettl als Mensch stets in bester Erinnerung behalten und seinem Engagement für den Verein ein ehrendes Andenken bewahren. <p>Lieber Willi, danke für alles.</p> <p>Im Namen aller Mitglieder</p> <p>Die Angelfreunde Fischbachtal.</p> </p> </div> </div> </body> </html>
so sieht es aus.
Wie bekomme ich den text dazu das gesamte div einzunehmen. Also der Test soll unterhalb des Bildes auch linksbündig.
Mit Flexbox was ich bevorzugen würde bin ich mehrfach kläglich gescheitert. Das muss doch irgendwie gehen?
-
Der scheint gut zu funktionieren. dann gutes gelingen mit den Buttons.
Ich habe mir welche als html code genutzt und per und mit css gestylt
-
optimiertes Script
JavaScript
Alles anzeigenlet currentSlide = 0; function showSlide(index) { const slider = document.querySelector('.slider'); const slides = document.querySelectorAll('.slide'); const totalSlides = slides.length; if (index >= totalSlides) { currentSlide = 0; } else if (index < 0) { currentSlide = totalSlides - 1; } else { currentSlide = index; } const translateValue = -currentSlide * 100 + '%'; slider.style.transform = 'translateX(' + translateValue + ')'; } function prevSlide() { showSlide(currentSlide - 1); } function nextSlide() { showSlide(currentSlide + 1); }
das glättet den Übergang
-
So habe die Sache mit dem Slider gelöst. Das schein ja eine echte harte Nuss zu sein.
Falls mal jemand nicht wissen sollte wie das geht. Dann möchte ich hier ein Beispiel geben
1. Etwas html
HTML
Alles anzeigen<div class="slider-container"> <div class="slider"> <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 2"></div> <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div> <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div> <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div> <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div> <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div> <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div> <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div> <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div>
Etwas css
CSS
Alles anzeigen.slider-container { position: relative; max-width: 800px; margin: auto; overflow: hidden; } .slider { display: flex; transition: transform 0.5s ease-in-out; } .slide { min-width: 100%; box-sizing: border-box; } .slide img { width: 100%; height: auto; } .prev, .next { position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; font-size: 24px; color: white; cursor: pointer; user-select: none; transition: 0.6s ease; background-color: rgba(0, 0, 0, 0.8); } .prev { left: 0; } .next { right: 0; } .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.6); }
und in coperation Javascript
JavaScript
Alles anzeigenlet slideIndex = 1; let slides; function showSlides(index) { slides = document.querySelector('.slider'); if (slides) { const totalSlides = slides.children.length; // Überprüfen, ob der Index außerhalb des Bereichs liegt if (index > totalSlides) { slideIndex = 1; // Wenn ja, zurück zum Anfang } else if (index < 1) { slideIndex = totalSlides; // Wenn am Anfang, zum letzten Bild springen } else { slideIndex = index; } for (let i = 0; i < totalSlides; i++) { slides.children[i].style.display = 'none'; slides.children[i].style.opacity = 0; // Setzen Sie die Opazität auf 0 für alle Slides } slides.children[slideIndex - 1].style.display = 'block'; fade(slides.children[slideIndex - 1], 1, 1, 500); // Fade-In-Effekt mit einer Dauer von 1000 Millisekunden } else { console.log("Slider not found"); } } function plusSlides(n) { showSlides(slideIndex += n); } // Funktion für den Fade-In-Effekt function fade(element, startOpacity, endOpacity, duration) { let startTime = null; function animate(timestamp) { if (!startTime) startTime = timestamp; const progress = timestamp - startTime; const opacity = easeInOutCubic(progress, startOpacity, endOpacity - startOpacity, duration); element.style.opacity = opacity; if (progress < duration) { requestAnimationFrame(animate); } } requestAnimationFrame(animate); } // Easing-Funktion für einen weichen Start und ein weiches Ende function easeInOutCubic(t, b, c, d) { t /= d / 2; if (t < 1) return c / 2 * t * t * t + b; t -= 2; return c / 2 * (t * t * t + 2) + b; }
das jedenfalls klappt ganz gut. Ich hatte angenommen das man sowas hin und wieder gebrauchen kann. Aber zu wenig, für Anfänger dokumentiert ist
-
So habe alle Foren durchforstest und konnte den Slider reparieren Ist jetzt responsive. Bestimmt muss ich auch noch einige Media querries estellen müssen.
Doch von meinen 9 Bildern werden nur 5 angezeigt. Der fehler ist wohl, dass die bilder in neun divs liegen.
Wenn ich das in ein ul mit 9 li packe. Löst das dann das Problem?
Und wie änder ich meine css am liebsten mit Flexbox ? Und hat das Auwirkungen auf JS?
CSS
Alles anzeigen<section id="galerie"> <div class="wrapper"> <div class="slider-wrap"> <div id="slider" class="slider"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <!-- <div id="slider" class="slider"> <div class="slide"><img src="images/slider/walach1.jpg" alt="Image 1"></div> <div class="slide"><img src="images/slider/walach2.jpg" alt="Image 2"></div> <div class="slide"><img src="images/slider/walach3.jpg" alt="Image 3"></div> <div class="slide"><img src="images/slider/walach4.jpg" alt="Image 4"></div> <div class="slide"><img src="images/slider/walach5.jpg" alt="Image 5"></div> <div class="slide"><img src="images/slider/walach6.jpg" alt="Image 6"></div> <div class="slide"><img src="images/slider/walach7.jpg" alt="Image 7"></div> <div class="slide"><img src="images/slider/walach8.jpg" alt="Image 8"></div> <div class="slide"><img src="images/slider/walach9.jpg" alt="Image 9"></div> </div> --> </div> <div class="btn-wrap"> <i id="prev" class="material-icons btn">«</i> <i id="next" class="material-icons btn">»</i> </div> </div> </section>
Code
Alles anzeigen#galerie{ display: flex; height: 100vh; align-items: center; justify-content: center; background-color: aquamarine; } .wrapper{ position: relative; max-width: 800px; width: 90%; height: 56.25vw; max-height: 600px; box-shadow: 0 0 15px rgba(0,0,0,.35); } .slider-wrap{ height: 100%; width: 100%; overflow: hidden; } .slider{ position: relative; left: 0; height: 100%; width: 500%; transition: 300ms ease-in-out; } .slide { float: left; height: 100%; width: 20%; background-size: cover; } .slide:nth-child(1) { background-image: url(../images/slider/walach1.jpg); } .slide:nth-child(2) { background-image: url(../images/slider/walach2.jpg); } .slide:nth-child(3) { background-image: url(../images/slider/walach3.jpg); } .slide:nth-child(4) { background-image: url(../images/slider/walach4.jpg); } .slide:nth-child(5) { background-image: url(../images/slider/walach5.jpg); } .slide:nth-child(6) { background-image: url(../images/slider/walach6.jpg); } .slide:nth-child(7) { background-image: url(../images/slider/walach7.jpg); } .slide:nth-child(8) { background-image: url(../images/slider/walach8.jpg); } .slide:nth-child(9) { background-image: url(../images/slider/walach9.jpg); } .btn { position: absolute; top: 250px; width: 40px; height: 55px; font-size: 40px; font-weight: 700; color: #FFF; background: #2C2C2C; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background 150ms ease-in-out; } .btn:first-child { left: -.5em; } .btn:last-child { right: -.5em;} .btn:hover { background: #131313; } .btn:active { transform: scale(.97); background: #000; } @media(max-width: 950px) { .slide {background-position: center;} .btn { top: -.7em; } .btn:first-child { left: calc(50% - 1em); } .btn:last-child { left: calc(50% + 1em); } }
JavaScript
Alles anzeigenvar prev = document.getElementById('prev'); var next = document.getElementById('next'); var slider = document.getElementById('slider'); var total = 0, step = 100; prev.addEventListener('click', slide); next.addEventListener('click', slide); function slide() { if(this.getAttribute('id') == 'prev') { if(total == 0) { total = -400; slider.style.left = total + '%'; } else { total += step; slider.style.left = total + '%'; } } else { if(total == -400) { total = 0; slider.style.left = total; } else { total -= step; slider.style.left = total + '%'; } } }
Vielleicht hat ja jemand einen Link mit einem Beispiel für alte Männer oder Anfänger.
Oder kann sogar selbst ein Beispiel geben
-
Baste da ja nun schon seit Wochen rum und vieles ist geschehen und gelernt worden. Aber wenn ich den Browser zusammenschiebe, offenbaren sich meine eklatanten Bemühungen.
Dass ich für die Mobile Ansicht Media Querry bemühen muss erwarte ich. Aber beim zusammenschieben des Browsers, sieht man wies sich der Content in dem Falle die Bilder nicht responsive verhält Von der Slider-Navigation ganz zu schweigen. Wo fängt man da jetzt am besten an. Ich zeige euch mal den code und den Link wo man das Problem visull begutachten kann.
CSS
Alles anzeigen* { box-sizing: border-box; } .slider-wrapper { display: flex; justify-content: center; align-items: center; margin: 1rem; position: relative; overflow: hidden; } .slides-container { height: calc(100vh - 2rem); width: 75%; display: flex; justify-self: center; align-items: center; overflow: scroll; scroll-behavior: smooth; list-style: none; margin: 0; padding: 0; } .slides-container { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* Internet Explorer 10+ */ } /* WebKit */ .slides-container::-webkit-scrollbar { width: 0; height: 0; } .slide-arrow { position: absolute; display: flex; top: 0; bottom: 0; margin: auto; height: 4rem; background-color: white; border: none; width: 2rem; font-size: 3rem; padding: 0; cursor: pointer; opacity: 0.5; transition: opacity 100ms; } .slide-arrow:hover, .slide-arrow:focus { opacity: 1; } #slide-arrow-prev { left: 0px; padding-left: 0.25rem; border-radius: 0 2rem 2rem 0; } #slide-arrow-next { right: 0; padding-left: 0.75rem; border-radius: 2rem 0 0 2rem; } .slide { width: 80%; height: 80%; flex: 1 0 100%; display: flex; justify-content:center; align-items: center; background-color: #300d77; } .slide > img { width: 90%; height: 90%; }
HTML
Alles anzeigen<section id="galerie"> <div class="slider-wrapper"> <button class="slide-arrow" id="slide-arrow-prev"> ‹ </button> <button class="slide-arrow" id="slide-arrow-next"> › </button> <div class="slides-container" id="slides-container"> <div class="slide"><img src="images/slider/resized/walach1.jpg" alt="Image 1"></div> <div class="slide"><img src="images/slider/resized/walach2.jpg" alt="Image 2"></div> <div class="slide"><img src="images/slider/resized/walach3.jpg" alt="Image 3"></div> <div class="slide"><img src="images/slider/resized/walach4.jpg" alt="Image 4"></div> <div class="slide"><img src="images/slider/resized/walach5.jpg" alt="Image 5"></div> <div class="slide"><img src="images/slider/resized/walach6.jpg" alt="Image 6"></div> <div class="slide"><img src="images/slider/resized/walach7.jpg" alt="Image 7"></div> <div class="slide"><img src="images/slider/resized/walach8.jpg" alt="Image 8"></div> <div class="slide"><img src="images/slider/resized/walach9.jpg" alt="Image 9"></div> </div> </div> </section>
Dann mal gute Nacht
-
Danke!
Das wäre dann das 3. Konstrukt.
Ich weiß ja dass es viele Wege gibt. Den Weg nach Rom ist schon gut beschrieben, aber wo genau geht es zu Kolosseum. Das kann mir in Rom wohl jeder Römer genau erklären, doch leider ist mein römisch etwas eingerostet.
Nix für Ungut
-
Ich kann da machen was ich will? Der Slider ist am Footer festgetackert. Und wenn ich den Pics width 90% gebe, rutscht der slider ais der Mitte.
-
wow das ist ja absolut wenig code. Aber wohl etwas zu wenig.
Der Slider scrollt mit. Ist es angebracht ihn mit einem negativen z-index auf dem Container fest zu tackern oder kommt das vom Script?
Habs noch mal zur Ansicht hochgeladen
-
Hab hier einen einfachen Slider. Allerdings, wenn die neun Bilder ducrhgeklickt wurden bleiben nur Pfeile links/recht übrig dann kann ich wieder zurückklicken. Auch am Anfang muss man ein paarmal klicken bis der Slider sich besinnt.
Ich habe das script im verdacht
function keyPress(e) {
e = e || window.event;
event ist wohl wie das gesamte script veraltet
das Script
Code
Alles anzeigenconst items = document.querySelectorAll('img'); const itemCount = items.length; const nextItem = document.querySelector('.next'); const previousItem = document.querySelector('.previous'); let count = 0; function showNextItem() { items[count].classList.remove('active'); if(count < itemCount - 1) { count++; } else { count = 0; } items[count].classList.add('active'); console.log(count); } function showPreviousItem() { items[count].classList.remove('active'); if(count > 0) { count--; } else { count = itemCount - 1; } items[count].classList.add('active'); console.log(count); } function keyPress(e) { e = e || window.event; if (e.keyCode == '37') { showPreviousItem(); } else if (e.keyCode == '39') { showNextItem(); } } nextItem.addEventListener('click', showNextItem); previousItem.addEventListener('click', showPreviousItem); document.addEventListener('keydown', keyPress);
Ich kann mir da selbst nicht weiterhelfen
Anzusehen auf miflo.de
-
Ich bin hier ja Neuling. Ich möchte euch hier mal meinen Standpunkt erklären.
1. Es gibt immer mehrere Wege nach Rom
2. Niemand muss die gleiche Meinung haben wie ich.
3. Beleidigungen und persönliche Angriffe verbieten sich für mich
Ich mach das will ich alt bin und gerne PC-Mäßig fit bleiben will.
Wenn da mal ein Freibier oder ne Einladung zum Essen rauskommt ist das Nett, aber nicht das Motiv
Deshalb suche ich mir Foren wo man Nett aufgeschlossen und vom Interessierten bzw. Anfänger bis zum Profi weiter geholfen wird.
Deshalb bin ich hier und hoffe dass es hier weiterhin Nett zugeht und das Forum lebendig bleibt.
-
flex-basis: 0;
macht die ersten 3 sectionen gleich breit
und das
flex-basis: calc(100% - 4rem);
flex-shrink: 0;
soll die 4. section nach unten geschoben werde? Wo steht das
Selbst kann ich das nirgends rauslesen
-
Um euch mal alle wegen des fertigen codes auf den Boden zu bringen.
Ich bin eigentlich ein Freund von fertigem Code. Ich kann mir dann tagelang ansehen und studieren. Ist ja nicht so, dass ich den direkt reinkopiere und weitervekaufe. Ich wiil was ich gelernt habe bzw fertig bekommen habe mir zu eigen machen. Um das auch mal selbstständig zu können.
Im Übrigen hat mir dieses Code auch ne Vorstellung für mein Problem mit diesem Thread eventuell mit weniger HIlfe zurecht komme.
Also für micht gibt es da ein Für und ein wider!
Doch das gibt mir immer noch Rätsel auf
ZitatAber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?
-
Ich finde deinen Code echt super, doch ich da noch Fragen. Ich schau mir den jetzt schon seit Tagen an und hab auch mit rum gespielt.
Code
Alles anzeigenfooter { color: wheat; width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; font-family: "Arial, sans-serif"; background-color: rgb(74, 71, 71); } footer>section { flex-grow: 1; display: flex; flex-direction: column; align-items: center; flex-grow: 1; margin: 2rem; text-align: center; flex-basis: 0; } footer>section>h4 { font-size: 2rem; border-width: 1px 0 1px 0; border-style: solid; width: 100%; padding: 0.5rem 0; margin-bottom: 2rem; }
das ist das grundsätzliche Footerstyle. Doch wieso flex-direction: column;
Müsste die 4 section dann nicht untereinander stehen
Welchen vorteil hat der Html Tag address.
HTML
Alles anzeigen<section class="hours"> <h4>Öffnungszeiten</h4> <div> <p>Montag <span>17:00 - 22:00</span></p> <p>Dienstag <span>Ruhetag</span></p> <p>Mittwoch <span>17:00 - 22:00</span></p> <p>Donnerstag <span>17:00 - 22:00</span></p> <p>Freitag <span>17:00 - 22:00</span></p> <p>Samstag <span>17:00 - 22:00</span></p> <p>Sonntag <span>17:00 - 22:00</span></p> </div> </section> <section> <p> Am 3. Samstag eines Monats bleibt die Walachei geschlossen.<br> Wir bitten um euer Verständnis </p> <p>www.walachei-spachbrücken.de</p> </section> </footer>
Wieso ordnet sich die letzte section mittig unten an?
footer>section:last-of-type Das ist der unterster Flexcontainer
first-of- und last -of-type bezeichnen die beiden letzen Absätze.
Aber woher weis die letzte section dass sie unter den 3 vorigen sections anordnen soll?