Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Div soll Scrollbalken erhalten

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard 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

  2. #2
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  3. #3
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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
    Geändert von Thomasge (02.07.2021 um 10:35 Uhr)

  4. #4
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  5. #5
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  6. #6
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  7. #7
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  8. #8
    Contao-Yoda Avatar von MacKP
    Registriert seit
    15.06.2009.
    Ort
    Duisburg
    Beiträge
    13.292
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Pool | C-C-A | MetaModels | [Internetseite -> Mediendepot Ruhr]
    [Arbeitet bei -> Paus Design & Medien]
    "I can EXPLAIN it to you, but I can't UNDERSTAND it for you."

  9. #9
    Contao-Fan
    Registriert seit
    20.06.2009.
    Ort
    Küps
    Beiträge
    344

    Standard

    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.

  10. #10
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.705
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Bootstrap ersetzt aber nicht die notwendigen Kenntnisse in HTML und CSS.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  11. #11
    Contao-Fan
    Registriert seit
    20.06.2009.
    Ort
    Küps
    Beiträge
    344

    Standard

    Stimmt!!
    Aber es vereinfacht diese meiner Meinung nach.

  12. #12
    Administratorin Avatar von lucina
    Registriert seit
    19.06.2009.
    Ort
    Kiel (DE)
    Beiträge
    7.325
    Partner-ID
    152
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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/

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •