XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Einfache zweizeilige Tabelle Tabellen im Responsive Webdesign erstellen (http://xhtmlforum.de/showthread.php?t=74266)

Cipriani 05.10.2021 17:38

Einfache zweizeilige Tabelle Tabellen im Responsive Webdesign erstellen
 
Hallo,

ich habe leider nicht genug Ahnung von CSS und brauche daher Eure Hilfe.
Ich möchte eine Tabelle erstellen mit zwei Zeilen und einer variablen Zahl von Spalten. In der ersten Zeile steht ein Text und in der zweiten Zeile ein Bild. aufgrößeren Displays soll das ganz normal wie eine Tabelle dargestellt werden: links text, rechts daneben das Bild. Auf dem handy soll das Bild aber unter dem Text stehen, also die zweite Zeile soll unter der ersten Zeile rutschen. Vielleicht noch einfacher gesagt: auf Handys soll aus einer zweizeiligen Tabelle eine einzeilige Tabelle werden in dem die zweite Zeile inter der ersten Zeile rutschen.
Es sieht einfach scheiße aus, wenn sich auf einem schmalen Handydisplay text und Bild nebeneinander quetschen. Kann mir da bitte jemand helfen und eventuell eine Vorlage erstellen? Ich selbst kriege das nicht hin trotz suche und habe angst, dass das am Ende was unsauberes wird.

Ich benutze ein Template für meine Webseite und ich kann CSS einfügen, aber die Tabelle nicht mit "<table class="XY">" benennen. Sie wird mit einem Editor erstellt. Daher müsste der Code der einfachheitshalber für alle Tabellen gelten.

Danke schon mal!

MrMurphy 05.10.2021 22:09

Für ein konkretes Beispiel müsste man den Quelltext (HTML, CSS) und die Bilder kennen sowie wissen, was möglich ist. Es ist schlicht frustrierend Beispiellösungen zu erstellen und als Antwort zu erhalten: Geht bei mir nicht.

Da du keine Tabellendaten hast ist das table-Element für deinen Wunsch sachlich falsch.

Allgemein: Du benötigst zwei Container, eventuell innerhalb eines dritten, die mit CSS-Grid (display: grid) angeordnet werden. Je nach Bild, Text und der Gesamtseite können unterschiedliche Container sinnvoll sein. Bei einem Bild mit zugehörigem Text bieten sich zunächst figure, img und figcaption an.

Cipriani 05.10.2021 22:46

okay danke erstmal. Also ist es etwas komplexer als ich dachte. Ich kann auch den Quelltext posten, falls sich jemand damit beschäftigen will.

MrMurphy 06.10.2021 10:12

Nein, komplex ist daran überhaupt nichts. CSS-Grid dient doch grade der Vereinfachung von Layouts, die früher überhaupt nicht möglich waren. Oder mit aufwendigen Java-Script Lösungen. So auch in diesem Fall.

Ich habe mal ein Beispiellayout erstellt.

Nach deinen bisherigen Angaben sehe ich eine Liste, in diesem Fall das dl-Element.

Code:

<dl>
</dl>

Innerhalb des dl-Elements dann für jede Bild-Text-Kombination

Code:

  <div>
      <dt><img src="" alt=""></dt>
      <dd></dd>
  </div>

Übersichtlicher geht's kaum.

Das entscheidende CSS dazu lautet

Code:

dl>div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

Für die Bildschirmbreite, ab der der Text neben dem Bild erscheinen soll (hier: 800px) zusätzlich

Code:

@media only screen and (min-width: 800px) {
  dl>div {
      grid-template-columns: 1fr 1fr;
  }
}

Dazu einfach noch die altbekannten üblichen Abstände, Rahmen, Farben und so weiter.

Ein Online-Beispiel dazu:

https://www.w3schools.com/code/tryit...e=GV6LDPDOW9RG

Nach Anklicken des grünen Run-Buttons kann die Fensterbreite durch verschieben des Mittelstegs geändert werden.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023