Divs ohne Zwischenabstände

[Jochen]

Hallo,

ich habe ein Bild, dann einen Text und dann wieder ein Bild.
Wie kann ich erreichen, dass das für den Text vorgesehene div den gesamten Raum zwischen den Bildern einnimmt? Schönen Gruß
Jochen

[Rolf B]

Hallo Jochen,

Wenn das mit Flexbox gemacht ist: durch richtige Anwendung von flex-grow und flex-basis

Siehe Wiki

Für Detailfragen brauchen wir deinen Code, online.

Rolf

[Jochen]

Für den Test sind die Style-Angaben bewusst im HTML.

<div style="margin-top:2em;">

  <div style="text-align:right;">

    <img src="/bilder/f1.webp" style="max-width:150px; width:100%; 
height:auto;">

  </div>

  <div>

    <center>

	<h2>Bienvenue</h2>

	<h3>dans la Cantine .....</h3>

	</center>

  </div>

  <div>

  <img src="/bilder/f1.webp" style="max-width:150px;  width:100%; height:auto;">

  </div>

 </div>

[Gunnar Bittersmann]

@@Jochen

@Rolf B hat sich falsch ausgedrückt. Ins Forum geposteter Code ist nicht hilfreich, besonders nicht, wenn er das Problem gar nicht erkennen lässt.

Du hast da mehrere divs, die ohne weiteres Zutun untereinander dargestellt werden. Wie du die nebeneinander bekommst, ist aus deinem Codeschnipsel nicht ersichtlich.

Ein vermutlicher Fehler allerdings ist ersichtlich:

	<h2>Bienvenue</h2>

	<h3>dans la Cantine .....</h3>

Ich glaube nicht, dass „dans la Cantine .....“ eine Unterüberschrift ist.

Vermutlich ist „Bienvenue dans la Cantine .....“ die eine Überschrift? Dann muss diese in ihrer Gesamtheit als Überschrift ausgezeichnet werden. Und wenn es die Hauptüberschrift der Seite ist, dann als h1.

Die Schriftgrößen gibst du mit CSS an. Und wenn es unterschiedliche Schriftgrößen innerhalb der Überschrift sein sollen, dann so:

<h1>
  <span>Bienvenue</span>
  <span>dans la Cantine .....</span>
</h1>

Die beiden spans kannst du unterschiedlich stylen.

Und <center> sollte auch weg; das geht auch mit CSS: text-align: center, vermutlich gepaart mit text-wrap: balance.

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Vermutlich ist „Bienvenue dans la Cantine .....“ die eine Überschrift? Dann muss diese in ihrer Gesamtheit als Überschrift ausgezeichnet werden. Und wenn es die Hauptüberschrift der Seite ist, dann als h1.

Du magst dich vielleicht fragen: Warum denn? Sieht doch am Ende gleich aus?

Für Nutzer, die Webseiten tatsächlich ansehen, ja. Es gibt aber auch andere.

Die richtige Überschriften-Hierarchie ist insbesondere wichtig für Nutzer, die Webseiten nicht visuell erfassen, sondern mit assistiven Technologien wie Screenreadern.

Das Thema hatten wir letztens erst.

Jolan tru

[MudGuard]

Hi,

Die richtige Überschriften-Hierarchie ist insbesondere wichtig für Nutzer, die Webseiten nicht visuell erfassen, sondern mit assistiven Technologien wie Screenreadern.

und auch für automatisierte Nutzer a la Suchmaschinen-Bot.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Rolf B

Für Detailfragen brauchen wir deinen Code, online.

Das war jetzt sehr missglückt ausgedrückt. Hier ins Forum geposteter Code – wie es Jochen dann getan hat – ist auch „online“.

Das brauchen wir aber nicht, sondern die problematische Seite (oder eine Beispielseite) online.

Jolan tru

[Rolf B]

Hallo Gunnar,

Ja, in der Tat. Bei dem gezeigten Code wüsste ich nämlich nicht, wie die divs nebeneinander kommen. Da muss noch ein Stylesheet sein.

<center> muss hingegen gar nicht sein…

Rolf

[Jonathan Harker]

Hallo Jochen,

Hallo,

ich habe ein Bild, dann einen Text und dann wieder ein Bild.
Wie kann ich erreichen, dass das für den Text vorgesehene div den gesamten Raum zwischen den Bildern einnimmt? Schönen Gruß
Jochen

oder mit Grid Layout:

@media (min-width: 30em) {
	.gallery {
		grid-template-columns: 200px 1fr 200px;
		gap: 0;
	}
}

Wobei ich einen Abstand zwischen Bildern und Text gut finden würde.

Bis bald!
Jonathan

[Jochen]

Hallo Jonathan,

Deinen Vorschlag mit @media wollte ich verfolgen, bin aber jetzt am Ende meiner Nerven.

Mir fehlt zu viel Grundwissen. Ich wurde von link zu link geschickt mit immer neuen, mir unbekannten Begriffen.

Kennst Du (oder die Mitleser) ein einfaches Beispiel, ein Grundgerüst, für eine moderne Homepage?

Besten Dank an alle.

[Gunnar Bittersmann]

@@Jochen

Mir fehlt zu viel Grundwissen.

Dafür sind wir ja hier.

Da wir aber nicht wissen können, was genau dir fehlt, müsstest du schon gezielt Fragen stellen.

Ich wurde von link zu link geschickt mit immer neuen, mir unbekannten Begriffen.

Da kannst du gezielt nachfragen. (Ich glaube, ich wiederhole mich.)

Kennst Du (oder die Mitleser) ein einfaches Beispiel, ein Grundgerüst, für eine moderne Homepage?

Hm, was genau gehört für dich zum Grundgerüst?

Zunächst einmal ist das Grundgerüst im Wiki beschrieben. Allerdings nicht ganz richtig.

Die Sprachangabe der Seite im html-Wurzelelement gehört unbedingt mit zum Grundgerüst.

Die Meta-Viewport-Angabe eigentlich auch; man ist ja nicht blöd.

Ebenfalls als zum Grundgerüst gehörig könnte man das (Einzahl!) h1-Element für den Titel der aktuellen Seite (nicht der Website!) ansehen.

Oder hattest du mit „Grundgerüst“ gar sowas wie den heiligen Gral im Sinn?

Jolan tru

[Rolf B]

Hallo Gunnar,

Die Sprachangabe der Seite im html-Wurzelelement gehört unbedingt mit zum Grundgerüst.

Die Meta-Viewport-Angabe eigentlich auch; man ist ja nicht blöd.

Was soll das? Alles, was Du kritisierst, ist in der Kopiervorlage drin. Und es ist auch klar gesagt, dass man DIE für Webprojekte verwenden soll. Das „minimale“ Grundgerüst, wo lang fehlte (hab ich nachgetragen) und kein Viewport definiert ist, dient als Basis für die Erklärungen. In denen dann wieder der Viewport beschrieben ist.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Was soll das? Alles, was Du kritisierst, ist in der Kopiervorlage drin.

Die Kopiervorlage ist unverständlich. Ich sehe doppelt.

Darunter steht: „Informationen zu dem, was über das minimale Grundgerüst hinaus geht, finden Sie unter: lang="de": Sprachkürzel“.

Also was denn nun? Gehört die Sprachangabe zum Grundgerüst oder geht sie darüber hinaus?

Ersteres, aber das geht aus dem Text nicht hervor. Der Text ist falsch.

Darunter, unter der fetten Überschrift Aufbau des Grundgerüstes und nochmal Grundgerüst in fett befand sich Markup ohne Sprachangabe. Darauf bezog ich mich natürlich.

Wenn ich mich auf das Grundgerüst beziehe, dann doch auf das, was unter Grundgerüst steht. Nicht auf eine unverständliche Kopiervorlage.

Und es ist auch klar gesagt, dass man DIE für Webprojekte verwenden soll. Das „minimale“ Grundgerüst, wo lang fehlte (hab ich nachgetragen) und kein Viewport definiert ist, dient als Basis für die Erklärungen.

Der Sinn der Unterscheidung zwischen „minimalem“ Grundgerüst und Kopiervorlage erschließt sich mir nicht. „Minimales“ Grundgerüst heißt: alles, was man so braucht? Und Kopiervorlage heißt: alles, was man so braucht?

Das Tutorial sollte für Anfänger leicht verständlich sein. Stattdessen ist es verwirrend.

Jolan tru

[Gunnar Bittersmann]

@@Rolf B

Öha. Wenn man zu einem verbesserungswürdigem Tutorial sagt: dies und jenes daran ist nicht gut, wird man mit Minuspunkten überhäuft.

Wenn man zu einem verbesserungswürdigem Tutorial sagt: nö nö, alles gut so wie’s ist, wird man mit Pluspunkten überhäuft.

Jolan tru

[Matthias Scharwies]

Guten Morgen,

Der Threadersteller wollte urprünglich eine Art 3-Spaltenlayout. Unsere Tipps waren ihm zu komplex.

Seine Bitte nach einem „Grundgerüst“ habe ich so verstanden, dass er nicht unser Grundgerüst ^[1], sondern einfache Beispiele für ein solches Mehrspaltenlayout (oder nur die passende Anordnung eines Logo neben die Überschrift) sucht.

Ob da deine Kritik an einem Wiki-Artikel oder dann die Mängelliste an McMurphys fachlich hilfreich ist, wage ich daher zu bezweifeln. Gerade für einen Anfänger wäre es besser gewesen nur die fehlerhafte Unkenntlichmachung der Links mit a {text-decoration: none;} und die mittlerweile verpönte Einbindung von Google-Fonts zu kritisieren.

Das hätte ich gerne intern diskutiert, du hast hier aber angefangen.
Auf der Mitgliederversammlung 2018 in Dortmund gab es massive Kritik am Umgang mit Anfängern und Neulingen im Forum. Die angesprochenen Personen hatten Besserung gelobt. Ich glaube, es wäre an der Zeit, sich wieder einmal zu besinnen, dass Leute von uns Hilfe wollen und keinen Schlag mit der Schaufel auf den Kopf.

Öha. Wenn man zu einem verbesserungswürdigem Tutorial sagt: dies und jenes daran ist nicht gut, wird man mit Minuspunkten überhäuft.

Wenn man zu einem verbesserungswürdigem Tutorial sagt: nö nö, alles gut so wie’s ist, wird man mit Pluspunkten überhäuft.

Fachlich hilfreich wäre eine Mitarbeit an den Texten im Wiki sowie eine interne Kritik, nicht das stete Anbringen von Kritik bei allen (un)passenden Gelegenheiten.

Herzliche Grüße

Matthias Scharwies
Vorsitzender SELFHTML e.V.

---

1. Ich habe das Tutorial gestrafft - unter anderem ist die (gedoppelte) Kopiervorlage aus dem {{BeispielText| ohne Syntaxhighlighting sowie die kurze Erklärung entfernt - der Satz drunter verweist auf die folgenden Abschnitte mit ausführlicher Erklärung. Ein Titel bei den Beispielen zeigt noch einmal das Thema. ↩︎

[Tabellenkalk]

Hallo,

mit Minuspunkten überhäuft.

ab wann ist ein Haufen ein Haufen?

Und nein, der eine Minuspunkt ist nicht von mir…

Gruß
Kalk

[Rolf B]

Hallo Jochen,

Kennst Du (oder die Mitleser) ein einfaches Beispiel, ein Grundgerüst, für eine moderne Homepage?

Ein solches Grundgerüst beantwortet deine Frage nicht, glaube ich. Du hast ein konkretes Anliegen: Ein Header-Bereich (vermute ich), mit einem Bild links und rechts, und darin der Willkommentext.

Jonathan hat mit seiner @media-Abfrage insofern recht, dass ein solcher Header nur sinnvoll ist, wenn das Fenster eine Mindestbreite hat. Bei schmalen Viewports muss man das anders gestalten.

Die Idee mit @media hast Du aber - unabhängig vom Grid - verstanden?

Dafür müsstest Du Dir überlegen, wie dein Header-Bereich beispielsweise auf einem Handy aussehen soll, und über eine @media-Umschaltung muss man dann, wenn genug Platz ist, die für breite Viewports geeignete Darstellung aktivieren.

Wenn es NUR darum geht, ein Bild anzuzeigen, kann man das auch als Hintergrundbild machen. Zwei Hintergrundbilder gehen auch:

header {
   background-image: url(bild-1.webp), url(bild-1.webp);
   background-position: top left, top right;
   background-repeat: no-repeat;
   background-size: 130px 130px;
   padding: 0 calc(130px + 1em);
}

Das Komma ist hier der Schlüssel, damit "stapelt" man Hintergrundbilder. Aber durch den no-repeat und die unterschiedliche Positionierung ist eins rechts und eins links. Dazu gibt man noch ein horizontales Padding von Bildgröße plus 1em, damit der Text die Bilder nicht überlagert.

Viele Wege führen hier zum Ziel. Hintergrundbilder, Flexbox, Grid. Die Media-Abfrage für schmale Viewports ist ebenfalls wichtig. Such Dir den Weg, den Du am leichtesten verstehst.

Ich habe das hier mal gebastelt, mit der background-image Technik: https://jsfiddle.net/ca2orL30/. Als Breitenumschaltung ändere ich die Bildgröße und mache bei schmalen Viewports nur ein Bild. Das ist jetzt kein Designwunderwerk, nur eine grobe Idee, was man tun kann. Vorteil dieser Methode ist aus meiner Sicht, dass Du im HTML nichts mit den Bildern zu tun hast. Ob das für Dich ein Vorteil oder ein Nachteil ist, musst Du beurteilen.

Rolf

[Matthias Scharwies]

Hallo Jochen,

Kennst Du (oder die Mitleser) ein einfaches Beispiel, ein Grundgerüst, für eine moderne Homepage?

Hier ist unser Einstieg in HTML - das Tutorial kannst du überfliegen und dich irgendwo festbeißen, wenn für dich etwas Neues kommt. Am Ende findest du diese Beispielseite, die du als Vorlage nehmen kannst:

• Schreinerei Meier

Ein Beispiel für 3 Elemente nebeneinander - ähnlich dem von Gunnar - findest du im Grid-Tutorial:

• Holy-Grail-Layout mit Grid
  • Hier könntest du Navigation und aside durch img-Elemente ersetzen und deinen Plan umsetzen.

Herzliche Grüße
Matthias Scharwies

[MrMurphy]

Hallo Jochen

Du wirst bislang mit ziemlich viel Theorie gefüttert. Deshalb habe ich mal einen Quelltext erstellt, der eine Beispiellösung für dein aktuelles Problem liefert.

Einfach den gesamten Quelltext in eine .html-Datei kopieren. Dann kannst du die Seite ausprobieren, zum Beispiel indem du die Fensterbreite deines Browsers änderst und das Verhalten dabei beobachtest.

Zum Beispiel das "dans la" immer in einer Zeile steht, weil "la" alleine in einer Zeile nicht cool aussieht. Oder das bei schmalem Fenster nur eine Grafik angezeigt wird und bei noch schmalerem Fenster das Wort "Bienvenue" mit einem Trennstrich umbricht.

Die Seite hat eine komplette Grundstruktur. Und du kannst natürlich Änderungen im Quelltext ausprobieren.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text zwischen zwei Grafiken</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link href="zentrale.css" rel="stylesheet"> -->

   <style>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Basisangaben */
   @media all {
      * {
         min-width: 1px;
      }
      body {
         max-width: 1400px;
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      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;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .bildbeispiel */
   @media all {
      .bildbeispiel {
         background-color: blanchedalmond;
      }
      .bildbeispiel :nth-child(1),
      .bildbeispiel :nth-child(3) {
         max-width: 150px;
         margin-left: auto;
         margin-right: auto;
         display: grid;
      }
      .bildbeispiel :nth-child(2) {
         font-size: 5.5rem;
         font-weight: bold;
         text-align: center;
      }
      .bildbeispiel :nth-child(3) {
         display: none;
      }
   }
   @media only screen and (min-width: 900px) {
      .bildbeispiel {
         display: grid;
         grid-template-columns: auto 1fr auto;
      }
      .bildbeispiel :nth-child(2) {
         display: grid;
         margin-top: auto;
         margin-bottom: auto;
      }
      .bildbeispiel :nth-child(3) {
         display: block;
      }
   }

   </style>
</head>
<body>
   <header class="pageheader">
      <h1>Text zwischen zwei Grafiken</h1>
   </header>
   <main class="content">
      <section class="bildbeispiel">
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/de/thumb/a/a9/Deutscher_Fu%C3%9Fball-Bund_logo.svg/255px-Deutscher_Fu%C3%9Fball-Bund_logo.svg.png" alt="Logo des DFB (Deutscher Fußball-Bund">
         </figure>
         <p>Bien&shy;venue dans&nbsp;la</p>
         <figure>
            <img src="https://upload.wikimedia.org/wikipedia/de/thumb/a/a9/Deutscher_Fu%C3%9Fball-Bund_logo.svg/255px-Deutscher_Fu%C3%9Fball-Bund_logo.svg.png" alt="Logo des DFB (Deutscher Fußball-Bund">
         </figure>
      </section>
   </main>
   <footer class="pagefooter">
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2025/feb/25/divs-ohne-zwischenabstande/1818972#m1818972">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>

[Gunnar Bittersmann]

@@MrMurphy

Du wirst bislang mit ziemlich viel Theorie gefüttert. Deshalb habe ich mal einen Quelltext erstellt, der eine Beispiellösung für dein aktuelles Problem liefert.

Ein schlechtes Beispiel.

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

Nein! Webfonts hat man selbst zu hosten, nicht von der Datenkrake Google einzubinden; und schon gar nicht ohne vorige Zustimmung der Nutzer.

   @media all {

Wozu soll das gut sein?

      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;

Die Zeilenhöhe ist zu gering; sollte 1.4 oder 1.5 sein.

      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;

Die Überschriften aller Ebenen ab der zweiten gleich groß zu machen und damit jeglicher visueller Hierarchie zu berauben, ist auch keine gute Idee.

      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);

Warum die alte Schreibweise? Neu: hsl(240deg 100% 27% / 1). Wobei die Angabe voller Opazität überflüssig ist, / 1 kann weg.

         text-decoration: none;
         outline: none;

Ganz. Großer. Mist. Links müssen als solche erkennbar sein, also keinesfalls die Unterstreichung für alle Links entfernen! Die Unterstrichung kann man für Links im Navigationsmenü entfernen, aber nicht für alle.

Und auf gar keinen Fall outline entfernen, sonst ist die Seite mit Tastatur unbedienbar.

Bei Mausbedienung machen Browser übrigens schon seit einiger Zeit gar keine Fokusmarkierung mehr.

      figure {
         display: inline-block;

Alle Abbildungen generell zu Inline-Elementen zu machen, ist wohl auch keine gute Idee.

      img {
         min-width: 1px;
         display: block;
         max-width: 100%;

Da fehlt noch die Angabe height: auto. Ansonsten werden Bilder verzerrt, wenn die intrinsische Größe mit width- und height-Attribute angegeben ist (was man tun sollte).

   @media only screen and (min-width: 900px) {

Dass Breakpoints nicht in px, sondern in em angegeben werden sollten, sollte sich doch inzwischen herumgesprochen haben.

Jolan tru

[MrMurphy]

Danke, aber ich halte mich lieber an die offiziellen HTML- und CSS-Regeln.

[Gunnar Bittersmann]

@@MrMurphy

Danke, aber ich halte mich lieber an die offiziellen HTML- und CSS-Regeln.

Ich bin an keiner Stelle von denen abgewichen.

Und es gibt noch andere Regeln, an die man sich halten sollte. Sogar wichtigere.

WCAG.^[1] DSGVO.^[2] Alles, was auf UX^[3] einzahlt.

Jolan tru

---

1. Web Content Accessibility Guidelines ↩︎

2. Datenschutz-Grundverordnung ↩︎

3. user experience ↩︎

[Tabellenkalk]

Hallo,

Danke, aber ich halte mich lieber an die offiziellen HTML- und CSS-Regeln.

Wo wurden die denn veröffentlicht? Und von wem?

Gruß
Kalk

[Jochen]

Oh, jeeee!
Was habe ich nur angerichtet? Neben dem Eingangsbeitrag habe ich später nach einem einfachen Beispiel, einem Grundgerüst, für eine moderne Homepage gefragt.

Hintergrund: Mein erstes am PC erstelltes Kunstwerk sah zwar am PC noch einigermaßen vernünftig aus, am Smartphone allerdings fürchterlich.

Deshalb also ein einfaches Beispiel, an dem ich neben der 3-Spalten-Aufteilung erkennen kann, wie die Anwendung erstellt werden muss, damit sie auf (fast) allen Geräten ansprechend ist. Liebe Grüße Jochen

[Matthias Scharwies]

Servus!

Oh, jeeee!
Was habe ich nur angerichtet?

Nein, das warst nicht du!

Deshalb also ein einfaches Beispiel, an dem ich neben der 3-Spalten-Aufteilung erkennen kann, wie die Anwendung erstellt werden muss, damit sie auf (fast) allen Geräten ansprechend ist.

Hier ist unser Einstieg in HTML - das Tutorial kannst du überfliegen und dich irgendwo festbeißen, wenn für dich etwas Neues kommt. Am Ende findest du diese responsive^[1] Beispielseite, die du als Vorlage nehmen kannst:

• Schreinerei Meier

Ein Beispiel für 3 Elemente nebeneinander - ähnlich dem von Gunnar - findest du im Grid-Tutorial:

• Holy-Grail-Layout mit Grid
  • Hier könntest du Navigation und aside durch img-Elemente ersetzen und deinen Plan umsetzen.

Herzliche Grüße

Matthias Scharwies

---

1. Responsiv heißt, dass die Webseite auf Größenänderungen des Viewports selbständig „antwortet“, d.h. automatisch ihre Größe und das Layout ändert. ↩︎

[Gunnar Bittersmann]

@@Jochen

Was habe ich nur angerichtet?

Nichts. Mach dir darüber keine Sorgen. Ob ein Thread ausufert oder abdriftet, liegt nicht in deiner Hand.

Deshalb also ein einfaches Beispiel, an dem ich neben der 3-Spalten-Aufteilung erkennen kann, wie die Anwendung erstellt werden muss, damit sie auf (fast) allen Geräten ansprechend ist.

Ein solches habe ich dir in meiner Antwort gegeben.

Das Minus daran soll dich nicht stören. Das hat nichts damit zu tun, ob meine Antwort für dich hilfreich sein könnte, sondern ist ein „Hach, jetzt fühle ich mich aber auf den Schlips getreten“ eines Einzelnen.

Jolan tru