Ergebnis 1 bis 6 von 6

Thema: Newsliste - CSS-Klasse für first und last

  1. #1
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard Newsliste - CSS-Klasse für first und last

    Ich möchte gern meine eigenen Grid-Klassen für die Newsliste verwenden können, bei der ich 3,4 oder 5 Elemente nebeneinander ausgebe, wobei das Element mit "first" einen anderen margin hat als die anderen. Die Anzahl der "Spalten" werden in eigenen Templates als CSS-Klasse vordefiniert. Im Beispiel von 3 Spalten/Elementen ist es "one_third".

    Standard:
    HTML-Code:
    <div class="mod_newslist block">
        <div class="layout_latest one_third block first even"></div>
        <div class="layout_latest one_third block odd"></div>
        <div class="layout_latest one_third block even"></div>
        <div class="layout_latest one_third block odd"></div>
        <div class="layout_latest one_third block even"></div>
        <div class="layout_latest one_third block last odd"></div>
    </div>
    Gewünscht:
    HTML-Code:
    <div class="mod_newslist block">
        <div class="layout_latest one_third block first even"></div>
        <div class="layout_latest one_third block odd"></div>
        <div class="layout_latest one_third block last even"></div>
        <div class="layout_latest one_third block first odd"></div>
        <div class="layout_latest one_third block even"></div>
        <div class="layout_latest one_third block last odd"></div>
    </div>
    Wenn ich insgesamt nur 3 anzeigen lassen würde, würde es auch passen, aber ich möchte 6 oder 9 oder mehr ausgegeben haben und da passt es dann nicht mehr.

    Bei der Galerie ist das zum Beispiel von Haus aus schon mit dem "first" und "last", weil ich da die Anzahl pro Reihe angeben kann. Musste zwar noch im Template was ergänzen, aber das kann ich im Template für die Newsliste "news_latest" nicht anwenden, weil da ja jedes Element für sich behandelt wird.

    Hat jemand einen Tip für mich?
    Grüße
    thepixture

  2. #2
    Contao-Fan Avatar von mandrake
    Registriert seit
    19.06.2009.
    Ort
    Düsseldorf
    Beiträge
    461

    Standard

    Hallo Heiko,

    ich kann den Aufbau Deines Grid-Ansatzes zwar nicht genau nachvollziehen aber wenn ich es richtig sehe, sollte sich dieses Ziel prinzipiell über eine Modifikation des übergeordneten Templates "mod_newslist" erreichen lassen.

    MfG
    Peter

  3. #3
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard

    Ok das muss ich mir anschauen, dachte ich kanns irgendwie direkt in den News-Templates lösen.

    Danke
    Grüße
    thepixture

  4. #4
    Contao-Nutzer Avatar von art-instinct
    Registriert seit
    12.04.2012.
    Ort
    Hannover/Leipzig
    Beiträge
    175

    Standard

    alternativ kannst du sowas auch über CSS3 mit nth-child lösen.

  5. #5
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard

    Zitat Zitat von art-instinct Beitrag anzeigen
    alternativ kannst du sowas auch über CSS3 mit nth-child lösen.
    Klingt interessant, aber irgendwie greift es nicht.

    Habs mit
    Code:
    .mod_newslist>div:nth-type-of(3n+1) { margin-left: 0!important; clear: left; }
    sowie
    Code:
    .mod_newslist:nth-child(3n+1) { margin-left: 0!important; clear: left; }
    probiert. Keine Änderungen zu sehen.

    Im Firebug sehe ich auch keine derartige vergebene CSS-Definintion, wenn ich das Element untersuche.
    Grüße
    thepixture

  6. #6
    Contao-Fan Avatar von thepixture
    Registriert seit
    24.06.2009.
    Ort
    Dresden
    Beiträge
    536

    Standard

    Ah Fehler gefunden. Es muss natürlich so
    Code:
    .mod_newslist div:nth-child(3n+1) { margin-left: 0!important; clear: left; }
    geschrieben werden.

    Danke, das hilft erstmal weiter.
    Grüße
    thepixture

Aktive Benutzer

Aktive Benutzer

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

Berechtigungen

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