Div soll Scrollbalken erhalten

ich habe ein Div in dem 4 weitere Div's enthalten sind die jeweils eigenen Inhalt haben. Ich möchte auf dem äußeren Div einen horizontalen Scrollbalken einfügen damit die 4 inneren Div's gemeinsam gescrollt werden können. Bei meinen Versuchen mit "overflow:scroll, overflow:auto, overflow-x:scroll oder overflow-x:auto" wurde nicht mal ein sichtbarer Scrollbalken eingefügt. Wo könnte mein Fehler liegen warum dies bei mir nicht gklappt hat?
Zu finden ist die Webseite unter https://sub.musikverein-hirschzell.de/termine.html bei einer Seitenbreite von 576 Pixel bis 767 Pixel, das beschriebene äußere Div hat die Klasse "event_preview".
Woran könnte es liegen weshalb der Scrolbalken nicht eingeblendet wird, oder gibt es eine andere Möglichkeit/Methode um mein Ziel zu erreichen?
Danke!


Gruß
Thomas

Hallo Thomasge,
ich verstehe nicht was du genau erreichen willst... das mit den vier divs etc. hab ich nicht verstanden.

Aber, damit innerhalb von event_preview Scrollbalken erscheinen muss das ganze natürlich kleiner sein als das was da drin ist.
Gib dem mal ein with:auto und dann kannst du da scrollen. Eventuell hilft dir das ja schon mal weiter.

Ansonsten wäre es eigentlich eine gute Idee, die Tabelle auch als Tabelle zu formatieren.. Wäre zumindest Semantisch die richtige Variante. Und Tabellen können dann auch Mobile passend dargestellt werden...

Viele Grüße

Hallo MacKP,

danke für die Rückmeldung, das mit dem "with:auto" hat schon einmal geklappt.

Was ich nicht verstehe ist, dass die Eventliste eigentlich eine Tabelle wäre in meinen Templates habe ich das nicht erkannt. Aber die Eventliste als Tabelle darzustellen wäre vielleicht eine gute Idee und ich könnte damit eventuell weitere Probleme erschlagen. Das würde in dem Fall bedeuten, dass ich hier eine Div-Tabelle aufbauen müsste.

Event-Template - event_list.html5

Code:

---

<?php if ($this->header): ?>
  <div class="header<?= $this->classHeader ?>">
    <?php if ($this->firstDay): ?><span class="day"><?= $this->firstDay ?>, </span><?php endif; ?><span class="date"><?= $this->firstDate ?></span>
  </div>
<?php endif; ?>

<div class="event layout_list<?= $this->classList ?>" itemscope itemtype="http://schema.org/Event">

  <h2 itemprop="name"><a href="<?= $this->href ?>" title="<?= $this->title ?> (<?php if ($this->day) echo $this->day . ', '; ?><?= $this->date ?><?php if ($this->time) echo ', ' . $this->time; ?>)"<?= $this->target ?> itemprop="url"><?= $this->link ?></a></h2>

  <p class="time"><time datetime="<?= $this->datetime ?>" itemprop="startDate"><?= $this->date ?><?php if ($this->time): ?>, <?= $this->time ?><?php endif; ?></time></p>

  <?php if ($this->hasDetails): ?>
    <?= $this->details ?>
  <?php else: ?>
    <div class="ce_text block" itemprop="description">
      <?= $this->teaser ?>
  </div>
  <?php endif; ?>

</div>

---

Modul-Template - mod_eventlist.html5

Code:

---

<?php $this->extend('block_unsearchable'); ?>

<?php $this->block('content'); ?>

  <?= $this->events ?>

  <?= $this->pagination ?>

<?php $this->endblock(); ?>

---

Gruß
Thomas

In deinem Template (bzw. in dem Template von Contao) ist es keine Tabelle. Du hast aber die Darstellung wie eine Tabelle, bzw. so wie du das benutzt ist es eine Tablle. Du könntest also die Templates so anpassen, dass dir eine HTML-Tabelle ausgegeben wird.
Im mod_eventlist.html5 müsstest du dazu die Tablle selber einbauen ( mit table und eventuell sogar mit den th) und in dem event_list.html5 dann die Zeilen mit den Spalten selber.

Viele Grüße

Ich habe das mit der Tabelle soweit hinbekommen und es als HTML-Tabelle ungesetzt. Das einzige Problem das jetzt noch besteht ist, dass der Footer der Tabelle kein "colspan" verarbeitet. Ist das von Contao so gewollt und definiert oder liegt hier noch Fehler bei mir vor? Wenn dem so ist, welche Möglichkeit hätte ich um mehrere Zellen einer Zeile miteinander zu verbinden. Ich habe hierzu bei meinen Recherchen nichts passendes bislang finden können.
Danke!

Gruß
Thomas

colspan hat nichts mit Contao zu tun. Das ist pures HTML.Und colspan sollte eigentlich in tfoot funktionieren.
Ich sehe jetzt auf deiner Seite nicht die Tabelle. Kann also nicht sagen, warum das eventuell nicht funktioniert.

Viele Grüße

Ich habe jetzt noch einen Fehler behoben, der aber keine Auswirkung auf colspan hatte. Im tfoot verbindet colspan nach wie vor nicht mehrere Zellen. Irgendwo muss noch ein Fehler von mir vorliegen warum colspan nicht funktioniert.
Die Webseite ist unter https://sub.musikverein-hirschzell.de/termine.html zu finden und kann bei einer Seitenbreite von 768 Pixel bis 1023 Pixel aufgerufen werden, damit ich es erstmal ohne Scrollbalken sehen kann.

Gruß
Thomas

Ganz einfach: Das ist immer noch keine HTML-Tabelle.. das sind divs mit classen, die wie HTML-Tags benannt sind... da kann dann colspan auch nicht funktionieren.

Viele Grüße

Wie @MackP schon sagt.

Es ist immer noch kein sauberes HTML.

Binde dir Bootstrap ein und die bekommst eine saubere Tabelle mit Streifen und Hoover usw.

Auch das mit den Scrollbalken ist dann kein Problem.

Bootstrap ersetzt aber nicht die notwendigen Kenntnisse in HTML und CSS. ;)

Stimmt!!
Aber es vereinfacht diese meiner Meinung nach.

Naja, ich finde das auch ein wenig Overkill, für gestreifte Tabellen ein fettes CSS-Framework einzubinden (auch wenn man das magerer konfigurieren kann, wenn man es selbst zusammenbaut).

Zum Ausgangsproblem:
Es steht ja frei, ein Template so zu bauen, dass es seine Daten in Tabellenform hinterlässt. Ich persönlich würde mir dazu a) mal anschauen, wie in HTML eine Tabelle aufgebaut ist b) mal die zur Verfügung stehenden Templatevariablen anschauen und dann schön in einem <? foreach .... ausgeben und dann damit Tabellenzeilen bestücken. Oder im Grid. Oder als einzelne Elemente, die man dann auch positionieren kann. Whatever.

Schliesslich würde ich mich an dem Projekt Scrollbars gerade auf kleinen Geräten doch sehr stören. Wenn es denn eine Tabelle sein muss, dann gibt es da ja auch genügend Möglichkeiten, das responsiv zu nutzen. Falls das Neuland sein sollte: Beispielsweise unter https://css-tricks.com/accessible-si...onsive-tables/