Tabelle responsiv oder andere Lösung

[Lorraine]

Hallo,

ich möchte vorweg sagen, dass ich absoluter Neuling auf dem Gebiet bin und meine Frage wahrscheinlich den ein oder anderen zum lachen bringen wird. 😳 Ich versuche grad die Firmen-Website neu zu gestalten und stoße dabei an meine Grenzen.

Die Website ist mit Redaxo aufgebaut, mein Chef hat damals einen Websitedesigner dafür beauftragt. Im Großen und Ganzen reichen die Möglichkeiten für uns auch aus um mal Texte oder Bilder zu ändern.

Aber genau da fängt auch mein Problem an, ich habe eine Tabelle mit 2 Spalten eingefügt, ohne Überschriften. In der 1. Spalte ist ein Bild, in der 2. Spalte Text dazu. Wenn ich das nun auf meinem Handy öffne, ist die Tabelle zu lang. Die Website ist ansonsten aber responsiv aufgebaut.

Ich finde auf der Bearbeitungsseite von Redaxo keine Möglichkeit die Tabellenform an sich programmtechnisch zu ergänzen. Ich habe lediglich die Möglichkeit den Quelltext im Inhaltsfenster zu bearbeiten. Alternativ kann ich aber ein neues Modul anlegen.

Also meine Frage ist, kann ich die Eigenschaften der Tabelle in dem Quelltext des Inhalts festlegen? Und wenn ja, wie?

Ich habe mich schon durch Wiki geklickt und auch die Beispiele dazu gefunden. Wenn ich den Quellcode der Beispiele kopiere und in mein Quelltext-Fenster einfüge, dann erscheint auch alles so wie im Beispiel. Nur leider ohne die wesentliche Funktion. Also das umbrechen der Tabelle in der mobilen Ansicht.

Es müsste auch nicht unbedingt eine Tabelle sein, mir geht es nur darum, dass Bild und Text nebeneinander angezeigt werden und auf kleineren Displays dann untereinander.

Hier ist noch der Link zu der Website: https://mk-energy.de/de/projekte Dann kann man sich besser vorstellen was ich meine.

Ich würde mich freuen, wenn ihr Tipps für mich habt oder mich auch gern wissen lasst, wenn mein Vorhaben unmöglich ist 😅

Viele Grüße Lorraine

[JürgenB]

Hallo Lorraine,

kennst du schon https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung?

Gruß
Jürgen

[Matthias Apsel]

Hallo JürgenB,

kennst du schon https://wiki.selfhtml.org/wiki/HTML/Tabellen/Responsive_Gestaltung?

Meiner Meinung nach handelt es sich nicht um tabellarische Daten.

Bis demnächst
Matthias

[JürgenB]

Hallo Matthias,

Meiner Meinung nach handelt es sich nicht um tabellarische Daten.

da kann ich dir zustimmen. Die Frage ist, was Lorraine mit Redaxo umsetzen kann.

Gruß
Jürgen

[Lorraine]

Hallo Jürgen,

vielen Dank für die schnelle Antwort! Ja genau den Artikel hatte ich mich zuvor angeschaut und dann das Beispiel einfach mal versucht zu übernehmen. Das hat leider nicht geklappt 😟

Grüße

[Matthias Apsel]

Hallo Lorraine,

das sieht für mich nach einem typischen Anwendungsfall von flex-box aus. Und zwar deine card-box als flex-container und das Bild und eine dl als flex-items.

Bis demnächst
Matthias

[Lorraine]

Hallo Matthias,

Danke für deine Antwort.😀

Den Artikel zum Thema Flex-box habe ich mir angeschaut, allerdings verstehe ich noch nicht so ganz an welcher Stelle ich den Quellcode einfügen kann.

So sieht das aus, wenn ich mir den Quelltext von dem vorhandenen Inhalt anzeigen lasse:

<div class="card">

<div class="card-header">Grundschule Eggerm&uuml;hlen Sanierung</div>
<div class="card-body">

<table style="width: 100%; border-collapse: collapse;" border="0">

<tbody>

<tr>

<td style="width: 28.62%;">

<a style="background-color: transparent; box-sizing: border-box; color: #337ab7; font-family: &amp;quot; helvetica neue&amp;quot;,helvetica,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;" href="https://www.bersenbrueck.de/magazin/artikel.php?menuid=2619&amp;topmenu=2619&amp;artikel=7778/" target="_blank" rel="noopener"><img src="index.php?rex_media_type=tinymcewysiwyg&amp;rex_media_file=grundschule_eggermuehlen.jpg" width="200" /></a></td>

<td style="width: 71.32%;">

<p style="box-sizing: border-box; color: #333333; font-family: &amp;quot; helvetica neue&amp;quot;,helvetica,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; margin: 0px 0px 10px 0px;"><strong style="box-sizing: border-box; font-weight: bold;">Projekt:</strong> <span style="background-color: #ffffff; box-sizing: border-box; color: #333333; cursor: text; display: inline; float: none; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">Bauleitung HKLS</span></p>

<p style="box-sizing: border-box; color: #333333; font-family: &amp;quot; helvetica neue&amp;quot;,helvetica,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; margin: 0px 0px 10px 0px;"><strong style="box-sizing: border-box; font-weight: bold;">Projektleitung:</strong> Lorraine Str&ouml;ing</p>

<p style="box-sizing: border-box; color: #333333; font-family: &amp;quot; helvetica neue&amp;quot;,helvetica,arial,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; margin: 0px 0px 10px 0px;"><strong style="box-sizing: border-box; font-weight: bold;">Projektzeitraum:</strong> 2020</p>

</td>

</tr>

</tbody>

</table>

</div>

<div class="card-body">

<a href="https://www.bersenbrueck.de/magazin/artikel.php?menuid=2619&amp;topmenu=2619&amp;artikel=7778" target="_blank" rel="noopener">https://www.bersenbrueck.de/</a></div>

</div>

<p>&nbsp;</p>

Ich kann hier die Schriftgröße anpassen, Rahmen erstellen usw., das klappt alles super, aber an welcher Stelle füge ich diese flex-box ein?

Viele Grüße

[Rolf B]

Hallo Lorraine,

ich kenne Redaxo nicht. Ist es tatsächlich so, dass man die Inhalte als HTML Fragment erstellen muss, gibt es dafür keinen "anwendertauglichen" Editor?

Weitere Frage: Kannst Du stylesheet-Dateien (CSS) erstellen? Oder zumindest einen Satz an CSS Regeln, die Redaxo der Seite hinzufügt? Das würde einiges erleichtern, das würde diese style="..." Monster in die CSS Regeln verdrängen, wo man sie besser lesbar aufschreiben kann.

Dann würde man auch einiges der redundanten Angaben entfernen, und du würdest eher bemerken, dass dein HTML falsch ist (z.B. das </strong>, dem der öffnende Partner fehlt).

Grundsätzlich funktioniert Flexbox so, dass es den Flex-Container gibt (als Ersatz für <table> und die Flex-Elemente (als Ersatz für die <td>). Ein Gegenstück zu <tbody> oder <tr> gibt es bei Flexbox nicht.

Was Flex-Container ist und wie sich Container und Flexelemente verhalten sollen, legst Du im style-Attribut (oder besser in CSS Regeln) fest.

Innerhalb des Flexbox-Containers werden die Elemente nebeneinander (flex-flow:row) oder untereinander (flex-flow:column) angeordnet. Infos im Wiki

Du kannst auch spezifizieren, dass die Elemente bei schmalen Viewports nicht nebeneinander gequetscht werden sollen, sondern in eine neue Zeile umbrechen sollen (flex-flow: row wrap)

An den Flex-Elementen gibst Du mit der Flex-Eigenschaft an, wie sich die Elemente an die Breite anpassen können. Die Flex-Eigenschaft kombiniert die Eingeschaften flex-grow, flex-shrink und flex-basis.

Grundlage ist die flex-basis: Wenn du zwei Elemente hast, eins mit Basis 10em, eins mit Basis 20em, und der Flex-Container breit genug ist, dann werden sie nebeneinander dargestellt, mit dieser Breite. Und rechts^[1] ist ggf. Luft, wenn der Container noch breiter ist. Jetzt kommt flex-grow zum Tragen: der freie Platz wird im Verhältnis der flex-grow Werte an den Elementen auf die Breiten der Elemente verteilt.

Der Container kann aber auch zu schmal sein. Wenn flex-flow:wrap gesetzt ist, werden die Flexelemente, die nicht passen, in eine neue Zeile verschoben. Ohne flex-flow:wrap kommt der Wert von flex-shrink zum Zug: Das, was an Breite fehlt, wird im Verhältnis der flex-shrink Werte von der Breite der Flex-Elemente abgezogen.

In deinem Fall brauchst Du also, an Stelle der table, dieses Grundgerüst:

<div style="display:flex; flex-flow: row wrap;">
  <div style="flex: 2 0 2em;">
    <a ... href="..."><img src="..."></a>
  </div>
  <div style="flex: 5 0 5em;">
    <p>Projekt: ...</p>
    <p>Projektleitung: ...</p>
    <p>Projektzeitraum: ...</p>
  </div>
</div>

Wie gesagt: Besser als inline-styles sind CSS Regeln. Und deine style-Attribute sind Monster, die oft auch einfach nur die Default-Werte auflisten (was nicht falsch ist, wenn sie irgendwo in einem Elternelement verstellt wurden, aber sowas sollte man nur bei Bedarf tun).

Die Zahlen im Flex-Attribut ergeben sich aus deinen Prozentwerten, das sind 2/7 und 5/7. Die Flex-Basis Werte solltest Du noch an deine Realitäten anpassen, beim ersten div sollte das die Breite des img sein (mit Zuschlag für Rahmen und Paddings etc). Beim Text gib soviel an, dass alles nebeneinander passt.

Rolf

---

1. wenn die justify-content Eigenschaft des Containers auf flex-start steht und flex-flow nicht row-reverse ist und und und - es gibt einige Schalter, die die Positionierung der Flex-Elemente beeinflussen ↩︎

[Lorraine]

Hallo Rolf,

vielen lieben Dank für deine ausführliche Antwort. Das sind eine Menge neuer Infos und ich werde heute versuchen das umzusetzen, sofern Redaxo bzw. meine Zugriffsberechtigung das zulässt.

Nach der Möglichkeit CSS Regeln zu erstellen habe ich auch schon gesucht, allerdings bin ich da noch nicht fündig geworden. Eventuell klappts jetzt, da ich nun weiß wonach ich suchen muss 😃👍

Das Grundgerüst werde ich auch ausprobieren, vielleicht klappt es ja 😃

Viele Grüße Lorraine

[Matthias Scharwies]

ich möchte vorweg sagen, dass ich absoluter Neuling auf dem Gebiet bin und meine Frage wahrscheinlich den ein oder anderen zum lachen bringen wird. 😳

Herzlich willkommen bei SELFHTML! Nein, lachen wird keiner.

Die Website ist mit Redaxo aufgebaut, >

... Aber genau da fängt auch mein Problem an, ich habe eine Tabelle mit 2 Spalten eingefügt, ohne Überschriften. In der 1. Spalte ist ein Bild, in der 2. Spalte Text dazu. Wenn ich das nun auf meinem Handy öffne, ist die Tabelle zu lang. Die Website ist ansonsten aber responsiv aufgebaut.

Genau, die Webseite ist relativ neu. Tabellenlayout verwendet man aus eben diesem Grund, dass Tabellen am Handy zu breit sind, nicht mehr.

Ich finde auf der Bearbeitungsseite von Redaxo keine Möglichkeit die Tabellenform an sich programmtechnisch zu ergänzen. Ich habe lediglich die Möglichkeit den Quelltext im Inhaltsfenster zu bearbeiten. Alternativ kann ich aber ein neues Modul anlegen.

Das wäre gut.

<figure>
  <img class="col-md-6" src="..." alt="...">
  <figcaption class="col-md-6"> 
    Erklärtext, der neben - bei schmalen Viewports unter - das Bild kommt.</figcaption>
</figure>

• HTML/Tutorials/Bilder_im_Internet/Bilder_mit_CSS_formatieren

Also meine Frage ist, kann ich die Eigenschaften der Tabelle in dem Quelltext des Inhalts festlegen? Und wenn ja, wie?

Das geht normalerweise mit dem style-Attribut. Da du hier aber zwischen schmaler und breiter Ansicht unterscheiden musst, fällt das weg.

Normalerweise müsstest du so etwas ins Stylesheet schreiben. Auf view-source:https://mk-energy.de/media/css/style.css hast du keinen Zugriff, oder?

Dein Layout verwendet Bootstrap. Dort gibt es eine Klasse col-md-6, die das von @Matthias Apsel erwähnte Flexbox verwendet. Dort ist schon alles definiert.Jetzt ist nur die Frage, ob das passt. Evtl. musst du noch class="col-sm-12in das figure-Tag hinzufügen.

Viele Grüße Lorraine

Herzliche Grüße

Matthias Scharwies

[Lorraine]

Hallo Matthias,

Danke für die Infos!

Ich habe den Link https://mk-energy.de/media/css/style.css eingegeben und es öffnet sich ein Texteditor-Fenster.

Sollte das so sein? Und hilft das weiter? 😳

Viele Grüße Lorraine

[Der Martin]

Hallo,

Ich habe den Link https://mk-energy.de/media/css/style.css eingegeben und es öffnet sich ein Texteditor-Fenster.

ja, mit dem Stylesheet.

Sollte das so sein? Und hilft das weiter? 😳

Ich denke schon, dass das so sein sollte. Und nein, das hilft dir so direkt noch nicht weiter, weil du die CSS-Ressource da nicht bearbeiten kannst. Du weißt dadurch nur, wo sie ist.

Die Möglichkeit, das CSS zu bearbeiten, müsstest du in deinem CMS immer noch suchen.

Live long and pros healthy,
 Martin