Ich verstehe das jetzt so, dass bei schmaler werdendem Bildschirm zunächst die mittlere Card zentriert in die zweite Zeile rutscht?
Dann musst du mittels der CSS-Anweisung order beim Entstehen der zweiten Zeile die Reihenfolge der Cards entsprechend ändern, so dass die mittlere Card als letztes angezeigt wird. Dann rutscht sie als erstes nach unten.
Es tut mir leid, aber ich verstehe dein Problem nicht.
Wenn ein Text andere Elemente (meist Bilder) umfließen soll, funktioniert das weder mit Flexbox noch mit CSS-Grid. Die sind ausschließlich dafür gedacht, Elemente, die sich in einer Zeile befinden, nebeneinander darzustellen.
Damit Text (in deinem Fall) ein Bild umfließen kann, ist in CSS float vorgesehen. Das gibt es bereits seit den ersten CSS-Versionen. Um es korrekt zu verwenden muss einiges bedacht werden, wobei die Anwendung in der Praxis dann nicht schwierig ist.
Infos zu float findest du zum Beispiel unter:
Ich habe mal ein Beispiel auf deiner Grundlage erstellt. Da mir dein Bild nicht vorlag musste ich ein anders verwenden. Folge: Da dein Bild eine andere Größe hat musst du eventuell einige Größenangaben anpassen. Aber erst mal ersetzen und dann Änderungen vornehmen. Im CSS-Teil des Quelltextes habe ich Einträge von dir, die stören, auskommentiert und fehlende Angaben hinzugefügt:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Float</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
max-width: 1200px;
margin: 0rem auto 0rem auto;
}
figure {
text-align: center;
min-width: 1px;
max-width: 100%;
min-height: 1px;
margin: 0rem;
display: inline-block;
}
img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0px;
}
.container {
/*display: grid;*/
/*grid-template-columns: auto 2fr;*/
/*gap: 5px;*/
line-height: 1.4;
width: 500px;
height: auto;
padding: 0 15px;
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;
}
.container > figure {
float: left;
max-width: 95px;
padding: 20px 15px 1px 0px;
}
</style>
</head>
<body>
<header>
<h1>Float - Beispiel</h1>
</header>
<main>
<body>
<div class="container">
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Cary_Grant_2_Allan_Warren.jpg" alt="Willi Ettl - Porträtbild">
</figure>
<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>
<p>Lieber Willi, danke für alles.</p>
<p>Im Namen aller Mitglieder</p>
<p>Die Angelfreunde Fischbachtal.</p>
</div>
</div>
</main>
<footer>
<p>Originaldiskussion: <a href="https://www.html-seminar.de/forum/thread/10563-text-soll-sich-im-div-wo-m%C3%B6glich-die-volle-breite-nehmen/">https://www.html-seminar.de/</a></p>
</footer>
</body>
</html>Zitatgibt es die Eigenschaften ... an alle kinder weiter.
Nein. Weder bei Flexbox noch bei CSS-Grid wird etwas vererbt. Es werden nur die CSS-Anweisungen ausgeführt, die du selbst angegeben hast.
Versuch es mal mit
align-self: start;in dem CSS für die h1-Überschrift.
ZitatOb das richtig war ist fraglich.
Das ist falsch. Mit der Anweisung machst du die h1-Überschrift zu einem Flex-Container und kannst deren Inhalt mit Flex-Anweisungen ausrichten, nicht aber die Überschrift selbst.
Wie willst du die Überschrift ausrichten?
ZitatWas ist an "justify-content: left;" falsch?
Das habe ich geschrieben:
ZitatDas funktioniert aber bei bei Flex- oder Grid-Containern.
Das h1-Element ist weder ein Flex- noch ein Grid-Container. Deshalb hat die CSS-Anweisung keine Auswirkung.
Natürlich funktioniert das. Du benutzt das CSS falsch. Außerdem solltest du mehr auf Tipfehler / Rechtschreibfehler achten.
Auf deiner Beispielseite schreibst du
justify-content: left;Das funktioniert aber bei bei Flex- oder Grid-Containern. Zumindest beim Firefox geben das auch die Entwicklerwerkzeuge aus.
Ich weiß auch nicht was ich von
#my-new.sectionhalten soll.
ZitatWas für eine Bedeutung das header-Element hat hängt allein von seiner Stellung im HTML-Quelltext ab.
Da habe ich mich ungeschickt ausgedrückt. Besser ist wohl: Auf welches Element sich das header-Element bezieht hängt von seiner Stellung im HTML-Quelltext ab.
Ein main-Element ist für eine korrekte HTML-Seite nicht erforderlich. Das kannst du also auch weglassen.
Eine id ändert an einem HTML-Element überhaupt nichts. Damit kannst du einem header-Element also auch keine bestimmte Bedeutung geben. Was für eine Bedeutung das header-Element hat hängt allein von seiner Stellung im HTML-Quelltext ab.
Innerhalb des main-Elements bezieht es sich auf das main-Element. Wenn du in deinem Beispiel das main-Element weglässt bezieht es sich auf die gesamte Webseite. Entsprechend sollte auch jeweils der Inhalt sein.
Wenn das header-Element bislang für die gesamte Webseite gedacht war hättest du es als direktes Kind vom body-Element in den Quelltext einfügen müssen. Wo es als direktes Kind vom body-Element steht spielt wiederum keine Rolle. Die Bezeichnung "header" sagt nicht aus, dass es sich oben im Quelltext befinden muss, sondern welche Informationen es enthält.
Ein Online-Beispiel wäre sinnvoll. So können wir nur raten.
Ich fange mal an: Die Pfadangabe oder der Dateiname stimmen nicht.
ZitatNun ja auf einem Ipad sieht die Seite sch... also bescheiden aus.
Was meinst du damit? Das sich die Grafik verzerrt? Das liegt nicht am Browser sondern an deinen CSS-Angaben.
Eine lange Auflistung kenne ich nicht. Schau dir mal folgende Seite an:
Du musst dich da etwas durchklicken, ich finde die Seite etwas unübersichtlich. Ein direktes Beispiel
Oder dein 1F44D:
Wenn du die Bezeichnung hast und wissen willst welches Zeichen dahintersteckt kannst du die Bezeichnung also direkt in die Adressleiste deines Browsers eingeben.
Suche dir interessante Wikipedia-Artikel und erstelle die mit aktuellem HTML und CSS responsive neu. Auf Wikipedia kommen alle üblichen HTML-Elemente vor und du hast realistische Textvorlagen.
Oder auch mit etwas übersichtlicherem HTML:
HTML:
<ul class="check3">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class="check4">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>CSS:
.check3 li {
list-style-type: "✔";
}
.check4 li {
list-style-type: "\1F44D";
}Ohne den Quelltext (HTML und CSS) sowie die Bilder können wir dir nur ganz allgemein helfen und auch nicht ausprobieren, ob unsere Lösungen funktionieren.
Ich würde zwei Möglichkeiten ausprobieren:
a) Die Bilder zu Blockelementen machen und ihnen ein max-width mit auf den Weg geben
oder
b) eine geeignete Einheit wie vw verwenden.
Eventuell ist auch CSS-Grid geeigneter als Flexbox.
Entweder wurde das Bild nicht hochgeladen oder die Pfad-/Dateiangabe ist falsch.
Einen Order "Bilder" kannst du mit "images" nicht erreichen.
Um dir helfen zu können benötigen wir entweder
a) einen Link zu der Seite
oder
b) den Quelltext aller HTML- und CSS-Dateien sowie die Bilder.
So kann man nur mehr raten als vermuten, dass die vorhandene CSS-Angabe zu dem aktuellen Hintergrundbild angepasst werden kann.
Zitatweil ich mich nicht ständig in Foren neu anmelden möchte, kommt ein Löschen des Cache nur als Notlösung in Frage.
Meiner Kenntnis nach hat das Löschen des Caches nichts mit dem Anmelden bei Foren zu tun. Meine Forenanmeldungen waren nie weg wenn ich den Cache geleert habe, egal von welchem Browser.
Zum Testen habe ich von den gebräuchlichen Browsern (Firefox, Chrome, Opera, ...) immer Versionen ohne Änderung der Einstellungen oder zusätzlich installierten Apps.
Da hatte und hat Chome nie Probleme mit dem Cache. Wenn ich geänderte Seiten erneut aufrufe werden die Änderungen direkt angzeigt.
Wenn das bei dir nicht der Fall ist kann das unterschiedliche Ursachen haben. Zum Beispiel
- Du hast Einstellungen geändert und das vielleicht vergessen, weil das aus Versehen geschehen ist.
- Eine von dir installierte App hat Einstellungen geändert, vielleicht weil sie nicht sauber installiert ist.
- Du hast dir (eventuell trotz Schutzmaßnahmen) Schadsoftware eingefangen
- Wenn du Windows benutzt kann die Registry defekt sein
- Cookies können Probleme bereiten
und, und, und ...
Ohne an deinem Rechner zu sitzen kann man da nur raten. In Suchmaschinen wirst du ja schon nach dem Problem gesucht haben.
Für dich gelten die Gesetze genau so wie für jeden anderen Bürger, egal ob du volljährig / strafmündig bist oder nicht. Du bist beschränkt geschäftsfähig.
Du darfst nur Verträge abschließen, die dir keine Nachteile bringen können oder die du mit deinem Taschengeld begleichen kannst. Der Grund ist, dass Jugendliche schuldenfrei in die Volljährig kommen sollen.
Deine Webauftritte können dir Nachteile bringen, zum Beispiel Klagen durch Beiträge im Forum oder Urheberrechtsverstöße, die schnell in den 5-stelligen Eurobereich kommen können.
Deshalb darfst du deine Internettätigkeiten nur mit Zustimmung deiner Eltern betreiben. Die Eltern müssen sich auch nach der Zustimmung regelmäßig informieren, ob du immer noch legalen Bereich unterwegs bist.
Wenn das gegeben ist und du rechtswidrige Inhalte im Forum immer zeitnah löscht sehe ich kein Problem. Das ist keine Rechtsauskunft, sondern mein privater Wissensstand.