Darstellung der Webseite auf unterschiedlichen Bildschirmen

[Joachim Fröhlich]

Guten Morgen, die Darstellung einer meiner Seiten funktioniert auf meinem Desktop. Auf meinem Smartphone klappt die Darstellung noch nicht, Schriftgröße und Positionierung bekomme ich noch nicht so hin, dass es vernünftig aussieht, obwohl ich schon mehrere Ansätze im Netz gefunden und ausprobiert habe. Könnt ihr mir eine Empfehlung für eine Vorgehensweise geben? Freundliche Grüße J. Fröhlich

[Matthias Scharwies]

Servus!

Guten Morgen, die Darstellung einer meiner Seiten funktioniert auf meinem Desktop.

Sehr gut!

Auf meinem Smartphone klappt die Darstellung noch nicht, Schriftgröße und Positionierung bekomme ich noch nicht so hin, dass es vernünftig aussieht, obwohl ich schon mehrere Ansätze im Netz gefunden und ausprobiert habe. Könnt ihr mir eine Empfehlung für eine Vorgehensweise geben?

Ja, Mobile first!

Zuerst erstellt man eine Webseite mit korrektem HTML. Das wird ohne CSS richtig angezeigt und von Screenreadern vorgelesen.

Die erste Variante des CSS wird für Mobilgeräte optimiert - also alle Blockelemente 100% Breite (ohne CSS-Festlegung) und automatisch untereinander angeordnet.

Im zweiten Schritt schaut man, wo man Elemente nebeneinander platzieren kann und legt mit media queries Regeln fest.

Im Wiki:

CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ja, Mobile first!

So pauschal würde ich das nicht sagen. Es mag Fälle geben, wo andersrum der bessere Weg ist.

Ansonsten: alles richtig, was du sagst. Nur leider an der konkreten Frage vorbei.

Jolan tru

[Tabellenkalk]

Hallo,

Ansonsten: alles richtig, was du sagst. Nur leider an der konkreten Frage vorbei.

Du hast heute einen Clown gefrühstückt?!

Die zitierte Antwort von dir trifft vollumfänglich auf deinen Post um 10.43 Uhr zu...

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Die zitierte Antwort von dir trifft vollumfänglich auf deinen Post um 10.43 Uhr zu...

Was verleitet dich zu der Annahme, dass „Mit Bild wirst du das niemals responsiv hinbekommen; Text hingegen passt sich der zur Verfügung stehenden Breite (Viewport) an“ an der konkreten Frage, wie man die Seite responsiv hinbekommt, vorbei wäre?

Jolan tru

[Joachim Fröhlich]

Guten Tag zusammen,

die Probleme, die ich noch nicht lösen kann, sind im Moment: Die Überschrift: "Wie löse ich Matheaufgaben?" wird auf dem Handy nicht proportional verkleinert. Das Bild sollte auf dem Handy zentriert sein und gut auf den Bildschirm passen. Die Texte unter dem Bild sollten links beginnen.

Sobald das klappt, wollte ich mich mit diesen Kenntnissen um die Buttons kümmern.

Wäre schön, wenn ihr mir dabei helfen würdet. J. Fröhlich

[Jonathan Harker]

Hallo Joachim,

Guten Tag zusammen,

die Probleme, die ich noch nicht lösen kann, sind im Moment: Die Überschrift: "Wie löse ich Matheaufgaben?" wird auf dem Handy nicht proportional verkleinert.

1. Deine Überschrift ist gar keine

<div class="üb">
  <p style="font-size: 1.5rem; background-color: white; ">
    <span style="font-family: MS,Sans-serif; ">
      Wie löse ich Matheaufgaben?
    </span>
  </p
<div>>

Nimm doch:

<h1>Wie löse ich Matheaufgaben?</h1>

Und anstelle des 1.5rem würde ich keine Schriftgröße angeben!

Warum? Weil die Schrift auf dem Handy eher größer sein sollte, damit man es gut lesen kann.

Das Bild sollte auf dem Handy zentriert sein und gut auf den Bildschirm passen.

Das ist ein Bild mit Text. Scan es ein und stell es als HTML dar. Dann ist es auch responsiv.

Bis bald!
Jonathan

[Joachim Fröhlich]

Jonathan,

danke für Deinen Vorschlag. Das mit h1 habe ich ausprobiert, die Schrift auf dem Handy ist sehr fett und hat einen Zeilenvorschub, nicht ganz das, was ich mir wünsche. Meine Vorgehensweise gründet sich auf Vorschläge, die ich im Netz gefunden habe und die eigentlich funktionieren sollten. Das Bild ist ein Screenshot aus dem Übungsprogramm und als jpg. abgespeichert. Joachim

[MudGuard]

Hi,

danke für Deinen Vorschlag. Das mit h1 habe ich ausprobiert, die Schrift auf dem Handy ist sehr fett und hat einen Zeilenvorschub, nicht ganz das, was ich mir wünsche.

Das Aussehen ist irrelevant für die Wahl der HTML-Elemente. Eine Überschrift ist ein h1 bis h6 (je nach Level).

Wenn das Default-Aussehen Dir nicht gefällt, dann passe es mit CSS an.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Joachim,

Meine Vorgehensweise gründet sich auf Vorschläge, die ich im Netz gefunden habe und die eigentlich funktionieren sollten.

D.h. du kopierst Dir Zeug zusammen und hast nicht den Anspruch, zu verstehen, was Du tust? Und suchst bei uns jetzt weitere Kopierquellen? Der Anspruch von Selfhtml ist, den Besuchern ein Verständnis dessen zu vermitteln, was sie tun, was gelegentlich aufdringlich wirken kann. Aber eigentlich meinen wir es nur gut 😉

Anyroad - die Überschrift ist auf Handys dein kleinstes Problem - das Bild mit der Aufgabe ist fast 800px breit und sollte keinesfalls verkleinert werden, die Schrift ist jetzt schon zu winzig. Auf meinem Handy muss ich links/rechts scrollen, um die Aufgabe zu lesen, oder das Handy querstellen. Wenn das bei Dir auch so ist: findest Du das gut?

Meiner Meinung nach wirst Du um ein Aufbereiten der Aufgaben als HTML nicht herumkommen. Andernfalls schließt Du alle Besucher aus, die keine 100% Sehkraft haben.

Wenn Dir die h1-Schrift zu groß und fett ist - es ist legitim, das im CSS zu ändern. Beispielsweise:

h1 {
   font-size: 1.2rem;
   font-weight: normal;
}

oder, da Du eh schon eine font-family setzt:

h1 {
   font: normal 1.2rem MS, sans-serif;
}

Was wohl in den meisten Fällen zur serifenlosen Standardschrift führt (was nicht verwerflich ist). Hast Du eine Schrift "MS" auf deinem Computer?

Mit einer @media-Abfrage kannst Du dann die h1 größer machen, wenn der Viewport größer ist, oder deine eigenen Werte ignorieren lassen.

h1 {
   font: normal 1.2rem MS,sans-serif;
}
@media (width > 30em) {
   h1 {                    /* entweder so, mit eigenen Werten */
      font-weight: bold;
      font-size: 1.8rem;
   }

   h1 {                    /* oder so, zurück zu den Defaultwerten */
      font-weight: revert;
      font-size: revert;
   }
}

revert heißt: Verwende für diese Eigenschaft nichts, was aus dem Autorenstylesheet (also von Dir) kommt.

Ob 30em als Umschaltpunkt geeignet ist, hängt von deiner Seite ab. Wenn er Dir zu früh oder spät auf "breite Ansicht" umschaltet, nimm halt einen anderen Wert.

Hinweis: Das X-UA-Compatible mit IE=edge kannst Du rauswerfen. Der IE wird nicht mehr verwendet, und der MS-Edge Browser emuliert eh den IE-11.

Die Fragestellung: "wie erreiche ich, dass der Zusatztext linksbündig unterm Bild ist" ist in deinem derzeitigen Layout tricky. Das Bild ist im Moment Teil des .üb divs und wird deshalb zentriert. Den Folgetext linksbündig unter ein zentriertes Bild zu setzen ist etwas, was ich nicht versuchen würde.

Ich kann verstehen, dass Du bei dem Bild bleiben willst. Deine HTML/CSS Kenntnisse sind begrenzt, und die Aufgaben so aufzubereiten, wie sie im Bild stehen, braucht einige CSS Kenntnisse. Aus meiner Sicht bietet sich da ein Grid-Layout an, aber wie gesagt: das ist nicht ganz so einfach.

Es ist allerdings NOCH schwieriger, beim Bild zu bleiben. Denn wenn jemand gar nicht sehen kann, ist ihr oder ihm deine Seite versperrt. Sowas ist grob unhöflich, um es mal vorsichtig zu formulieren.

Um es erstmal mit Bild zu machen: Setze Bild und deine Zusatztexte in ein eigenes Element. Hier bietet sich <main> an. Kein text-align:center. Formatiere das so:

<main>
   <img src="..." alt="Aufgaben zum Dreisatz">

<p>Hier finden Sie...<p>
<p>Die Berechnung...</p>
</main>
<nav>
<button>...</button>
<button>...</button>
<button>...</button>
</nav>

Im <style>-Element (das übrigens in den head-Bereich gehört, nicht in den body), setzen wir folgendes:

main, nav {
   width: fit-content;
   margin: 1em auto;
}
p {
   
}

fit-content als Breitenangabe sorgt dafür, dass das main-Element so breit ist wie das Bild. Die margin-Angabe sorgt für etwas Abstand oben und unten sowie für eine horizontale Zentrierung auf dem Viewport.

Der Selektor main, nav lässt diese Angabe für das main und das nav Element gelten.

Im nav-Element platzierst Du deine Buttons. Schmeiß die absolute Positionierung weg. Die funktioniert eh nicht richtig, die Buttons überlagern sich. Wenn Du sie einfach in das nav-Element packst, das mit fit-content nur so breit wie nötig machst und dann mit auto-Margin zentrierst, stehen sie mittig unter den Erklärungen.

Die style-Angaben für die p-Elemente brauchst Du eigentlich überhaupt nicht. Wo kommen die her? Das meiste ist eh Standard, und ein margin-top:1.2% wirkt sich kaum aus. Vor allem ist er irritierend, die Prozente beziehen sich nämlich auf die Viewportbreite. Belasse es doch einfach bei 1em Margin, was der Browser automatisch setzt.

Die Aufgabe, das Bild zu htmlisieren, ist schwieriger. Willst Du die angehen?

Rolf

[Joachim Fröhlich]

Rolf,

vielen Dank für Deine ausführliche Antwort und die Vorschläge zur Vorgehensweise, die ich gerne annehme.

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. Was das Bild angeht, dient es nur dazu dem Besucher zu zeigen, welcher Art die Aufgaben sind. Die eigentlichen Aufgaben findet er im Übungsprogramm. Anbei findest Du den Vorschlag, den ich im Netz zur Lösung gefunden habe:

img { display: block; margin: auto; width: 50%; }

Werde Deine Vorschläge aufnehmen und verarbeiten. Eure Hilfe schätze ich sehr. Joachim

[Rolf B]

Hallo Joachim,

gut, wenn das ein illustratives Bild ist, reicht für nicht-sehende der Alt-Text. Aber der ist Pflicht.

Rolf

[Jonathan Harker]

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:

> 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

• In einer modernen Webseite haben Inline-Styles … nichts verloren. In diesem Fall sollten Sie erst das Markup bereinigen.
• Wenn Ihre Webseite eine Vielzahl verschachtelter div-Elemente enthält, ist prinzipiell eine Vereinfachung des HTML-Codes vor der Überarbeitung des CSS empfehlenswert, …g
• media queries
  leicht abgewandelt:

/* 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

[Gunnar Bittersmann]

@@Joachim Fröhlich

die Darstellung einer meiner Seiten funktioniert auf meinem Desktop.

Mit Betonung auf „meinem“ (also auf deinem).

Auf anderen Systemen funktioniert die Seite nicht: ein Screenreader wird ansagen, dass da ein Bild namens Dreisatz.jpg auf der Seite ist. Dessen Inhalt (d.h. die Aufgaben 45–47) bleibt den Nutzern völlig verborgen.

Alle img-Elemente müssen ein alt-Attribut haben, das den Bildinhalt beschreibt. (Außer bei rein dekorativen Bildern; da ist alt="" zu setzen.)

In deinem Fall müssen da die Aufgaben als Text drinstehen, also: <img src="https://www.matheaufgaben-loesen.de/assets/images/Dreisatz.jpg" alt="Aufgabe 45: 25 Kilogramm Kartoffeln … in 6 Stunden?">

Wenn du das nur als Bild vorliegen hast, musst du das abtippen oder die OCR deiner Wahl drüberlaufen lassen.

Und wenn du die Aufgaben als Text vorliegen hast, gibt es keinen Grund mehr, sie als Bild auszuspielen. Mit Bild wirst du das niemals responsiv hinbekommen; Text hingegen passt sich der zur Verfügung stehenden Breite (Viewport) an.

---

Mit „Musterlösung“, „zu den Aufgaben“ und „Übungsprogramm“ willst du zu anderen Seiten verweisen. Dafür ist <button> und JavaScript falsch; das sollen Links (<a href="…">) sein.

Setz mal diese Hinweise um, gibt Bescheid, dann sehen wir weiter.

Jolan tru

[JürgenB]

Hallo,

Mit „Musterlösung“, „zu den Aufgaben“ und „Übungsprogramm“ willst du zu anderen Seiten verweisen. Dafür ist <button> und JavaScript falsch; das sollen Links (<a href="…">) sein.

und deren absolute Positionierung ist auch keine gute Idee.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

und deren absolute Positionierung ist auch keine gute Idee.

Ja, natürlich nicht. Aber bevor es sich wirklich lohnt, einen Blick aufs CSS zu werfen, sollte erstmal das Markup zumindest einigermaßen in Ordnung sein.

Aber wo wir schon mal dabei sind, Frage an @Joachim Fröhlich: Was wolltest du mit der absoluten Positionierung erreichen? Wie sollen die Buttons Links angeordnet sein?

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Aber wo wir schon mal dabei sind, Frage an @Joachim Fröhlich: Was wolltest du mit der absoluten Positionierung erreichen? Wie sollen die Buttons Links angeordnet sein?

Und eine an @Christian Kruse: Warum funktioniert das @-Dingens hier nicht? Ein Bug? Liegt’s am Nicht-ASCII-Zeichen ö?

Jolan tru

[MudGuard]

Hi,

@@Gunnar Bittersmann

Aber wo wir schon mal dabei sind, Frage an @Joachim Fröhlich: Was wolltest du mit der absoluten Positionierung erreichen? Wie sollen die Buttons Links angeordnet sein?

Und eine an @Christian Kruse: Warum funktioniert das @-Dingens hier nicht? Ein Bug? Liegt’s am Nicht-ASCII-Zeichen ö?

Zusatzfrage: warum wird mir(?) bei Eingabe von @Mu mumpel und multimediamo zur Auswahl angeboten, aber nicht MudGuard? Auch nicht bei Eingabe von @mu …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Zusatzfrage: warum wird mir(?) bei Eingabe von @Mu mumpel und multimediamo zur Auswahl angeboten, aber nicht MudGuard?

Das wird vom Schmutzfilter ausgesondert. 😜

Jolan tru

[Gunnar Bittersmann]

@@MudGuard

Zusatzfrage: warum wird mir(?) bei Eingabe von @Mu mumpel und multimediamo zur Auswahl angeboten, aber nicht MudGuard? Auch nicht bei Eingabe von @mu …

Bei mir kommt @MudGuard.

Aber bei „@gu“ nicht Gunnar Bittersmann. Da ist wohl eine Abfrage, dass man sich nicht selbst erwähnen kann.

Jolan tru

[MudGuard]

Hi,

Bei mir kommt @MudGuard.

Aber bei „@gu“ nicht Gunnar Bittersmann. Da ist wohl eine Abfrage, dass man sich nicht selbst erwähnen kann.

ok, das ist eine Erklärung.

cu,
Andreas a/k/a MudGuard

[Felix Riesterer]

Lieber Joachim,

die Darstellung einer meiner Seiten funktioniert

jeder Anfänger (ja, Du bist blutiger Anfänger!) macht am Anfang die gleichen Fehler. Auch ich habe die gemacht.

Du willst Inhalte ins Internet stellen? Dann brauchst Du ein gewisses Maß an Handwerk, weil Du sonst technische Probleme erzeugst, wo eigentlich keine sein dürften.

Dein Problem ist nicht die Darstellung Deiner Seite(n), sondern dass Du im Moment nur an das Aussehen denkst. Und das ist ein ernster Fehler! Das Aussehen ist am Anfang egal. Und das ist kein Witz, sondern Teil des Handwerks!

Inhalte im Internet sind zunächst einmal Text. Deine Inhalte sind auch Text. Texte kann man dann mittels Suchmaschinen auffindbar machen. Aber Du versteckst die Inhalte in Bildern, die wie Text aussehen, aber kein Text sind. Das hat Dir schon Gunnar zu vermitteln versucht. Darauf bist Du aber nicht eingegangen, weil Du allein anhand des Aussehens entscheidest - was ja genau Dein Fehler ist.

Deine Inhalte müssen Text werden. Der muss auf eine passende Weise in Dein Dokument geschrieben sein. Wenn das erreicht worden ist, dann kannst Du mit dem Aussehen kommen und fragen, wie man das so hinbekommt, wie Du gerne hättest, dass es aussehen soll - egal auf welcher Art von Gerät.

Liebe Grüße

Felix Riesterer