Hallo Joachim, > Meine Intention ist, erst dann nachzufragen, wenn ich selbst nicht mehr weiterkomme. Für die aufgeführten Probleme habe ich Lösungsvorschläge gefunden, die allerdings nicht das gewünschte Ergebnis brachten. Ja, stimmt. Jetzt wäre der Punkt zu überlegen, ob der von dir gewählte Weg Lösungsvorschläge zu finden zielführend ist. ChatGPT sucht aus dem bestehenden Netz Lösungen, sortiert oft aber nicht, wie alt und aktuell die gefundenen Lösungen sind. So geht es auch einem Anfänger, der das nicht erkennen kann. Deshalb kann ich Dir das SELF-Wiki empfehlen. In den Tutorials mögen sich immer wieder einzelne Tippfehler und Ungenauigkeiten finden - zu 99% ist es aber aktuell und vor allem verständlich! > Was das Bild angeht, dient es nur dazu dem Besucher zu zeigen, welcher Art die Aufgaben sind. Die eigentlichen Aufgaben findet er im Übungsprogramm. Da wäre ein Logo oder gleich ein einfaches Beispiel mit Ergebnis sicher besser. > Anbei findest Du den Vorschlag, den ich im Netz zur Lösung gefunden habe: ~~~css > img { > display: block; > margin: auto; > width: 50%; > } ~~~ Gut! Das Bild wird auf 50% der verfügbaren Breite dargestellt und mittig zentriert - kannst du auf Deinem Handy irgendetwas erkennen? Das ist **eine** Lösung für **einen** Anwendungsfall - evtl. für jemanden mit einem 40''-Monitor, bei dem das Bild nicht 1 Meter breit sein soll - aber nicht für ein Handy. Im von @Matthias Scharwies empfohlenen Tutorial finden sich einige Abschnitte, die wirklich wichtig sind: >>>Ja, **Mobile first!** >>> Zuerst erstellt man eine Webseite mit korrektem HTML. Das wird ohne CSS richtig angezeigt und von Screenreadern vorgelesen. >>> >>> ... >>> >>>Im Wiki: >>> [CSS/Tutorials/Einstieg/**Webseiten_responsiv_umbauen**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen) * [In einer modernen Webseite haben Inline-Styles … nichts verloren. In diesem Fall sollten Sie erst das Markup bereinigen. ](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#HTML) * [Wenn Ihre Webseite eine Vielzahl verschachtelter div-Elemente enthält, ist prinzipiell eine Vereinfachung des HTML-Codes vor der Überarbeitung des CSS empfehlenswert, …g](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#Tabellen-Layout_oder_Div-Suppe.3F) * [media queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#media_queries) leicht abgewandelt: ~~~css /* Kompaktes Layout für mobile Geräte */ img { border: solid thin red; width: 100%; } @media (min-width: 30em) { img { border: solid thin gold; width: 50%; margin: auto; } } ~~~ > …Eure Hilfe schätze ich sehr. Du kannst hier viel lernen, wenn du versuchst, die Zusammenhänge zu verstehen. Und es ist eben eine Wissenschaft für sich. Print Layout oder MS Word helfen hier nicht. Bis bald! Jonathan -- Wenn du 1 Strich an die Wand malst, um zu sehen wie viel du gewachsen bist. Früher: ___ ___ ___ Heute: ) ) ) )

Hallo Joachim, > Meine Intention ist, erst dann nachzufragen, wenn ich selbst nicht mehr weiterkomme. Für die aufgeführten Probleme habe ich Lösungsvorschläge gefunden, die allerdings nicht das gewünschte Ergebnis brachten. Ja, stimmt. Jetzt wäre der Punkt zu überlegen, ob der von dir gewählte Weg Lösungsvorschläge zu finden zielführend ist. ChatGPT sucht aus dem bestehenden Netz Lösungen, sortiert oft aber nicht, wie alt und aktuell die gefundenen Lösungen sind. So geht es auch einem Anfänger, der das nicht erkennen kann. Deshalb kann ich Dir das SELF-Wiki empfehlen. In den Tutorials mögen sich immer wieder einzelne Tippfehler und Ungenauigkeiten finden - zu 99% ist es aber aktuell und vor allem verständlich! > Was das Bild angeht, dient es nur dazu dem Besucher zu zeigen, welcher Art die Aufgaben sind. Die eigentlichen Aufgaben findet er im Übungsprogramm. Da wäre ein Logo oder gleich ein einfaches Beispiel mit Ergebnis sicher besser. > Anbei findest Du den Vorschlag, den ich im Netz zur Lösung gefunden habe: ~~~css > img { > display: block; > margin: auto; > width: 50%; > } ~~~ Gut! Das Bild wird auf 50% der verfügbaren Breite dargestellt und mittig zentriert - kannst du auf Deinem Handy irgendetwas erkennen? Das ist **eine** Lösung für **einen** Anwendungsfall - evtl. für jemanden mit einem 40''-Monitor, bei dem das Bild nicht 1 Meter breit sein soll - aber nicht für ein Handy. Im von @Matthias Scharwies empfohlenen Tutorial finden sich einige Abschnitte, die wirklich wichtig sind: >>>Ja, **Mobile first!** >>> Zuerst erstellt man eine Webseite mit korrektem HTML. Das wird ohne CSS richtig angezeigt und von Screenreadern vorgelesen. >>> >>> ... >>> >>>Im Wiki: >>> [CSS/Tutorials/Einstieg/**Webseiten_responsiv_umbauen**](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen) * [In einer modernen Webseite haben Inline-Styles … nichts verloren. In diesem Fall sollten Sie erst das Markup bereinigen. ](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#HTML) * [Wenn Ihre Webseite eine Vielzahl verschachtelter div-Elemente enthält, ist prinzipiell eine Vereinfachung des HTML-Codes vor der Überarbeitung des CSS empfehlenswert, …g](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#Tabellen-Layout_oder_Div-Suppe.3F) * [media queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen#media_queries) leicht abgewandelt: ~~~css /* Kompaktes Layout für mobile Geräte */ img { border: solid thin red; width: 100%; } @media (min-width: 30em) { img { border: solid thin gold; width: 50em; margin: auto; } } ~~~ > …Eure Hilfe schätze ich sehr. Du kannst hier viel lernen, wenn du versuchst, die Zusammenhänge zu verstehen. Und es ist eben eine Wissenschaft für sich. Print Layout oder MS Word helfen hier nicht. Bis bald! Jonathan -- Wenn du 1 Strich an die Wand malst, um zu sehen wie viel du gewachsen bist. Früher: ___ ___ ___ Heute: ) ) ) )