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