Teaser auf Startseite nebeneinander statt untereinander

[carlos]

Hallo,

bin absoluter Neuling mit Typolight, aber einiges schon auf die Reihe gekriegt und wahrscheinlich lacht Ihr mich mit meiner Frage aus:
Ich hätte die Artikelteaser (insgesamt werden es wohl 6 Stück) auf der Startseite gerne nicht untereinander sondern 2 oder 3 nebeneinander in eigenem Rahmen (oder Umrahmung) ungefähr so: www.alpenverein.de

meine Entwicklungsumgebung ist die: http://avh.m-gebauer.de/typolight/pr...tartseite.html

könnt Ihr das einem Dummy der mit dem Backend ganz gut zurechtkommt, aber im Quelltext nicht ganz so firm ist erklären? Suchfunktion hat nix erbracht.

Danke schon mal

Carlos

[schman]

Kennst du dich ein bisschen in CSS aus?

versuch mal folgendes:

.ce_teaser {
    width: 300px;
    height: auto;
    float: left;
}

Die Breite kannst du natürlich beliebig ändern

[carlos]

Danke,

hat mir schon mal mächtig geholfen!
Da kann ich jetzt weiterwurschteln

carlos

[Twitt]

Hallo schman

Ich bin grade über deinen Artikel gestolpert und habe um den Float der einzelnen Artikel zu gewährleisten eine fest Höhe eingegeben. Wenn aber der Kunde Schreibwut hat, wird der "Weiterlesen" Link abgeschnitten.

• Gibt es eine Begrenzung für die Anzahl Zeichen im Kurztext wo man einstellen kann?
• Kann ich das irgendwie mit CSS lösen, dass wenn ein Beitrag mehr Kurztext enthält, dann trotzdem alle gleich hoch dargestellt werden und der FLOAT greift (ohne jetzt Masonry zu installieren)?

Danke dir für einen Tipp.

Kennst du dich ein bisschen in CSS aus?

versuch mal folgendes:

.ce_teaser {
    width: 300px;
    height: auto;
    float: left;
}

Die Breite kannst du natürlich beliebig ändern

[Samuell]

Man kann mit PHP das Template anpassen und lange Teaser bei der Ausgabe kürzen.
Leider habe ich dazu gerade keinen Link zur Hand.

Dann kannsT Du STATT floaten in CSS Flexbox nutzen.
Damit sollte eine gleiche Höhe erreicht werden können

http://codepen.io/matuzo/pen/tJHds

Ansonsten kann man gleiche Spaltenhöhen auch mit JQUERY erzwingen:

https://blog.kulturbanause.de/2015/0...nd-angleichen/

[Twitt]

Salut Samuell

Danke dir für deine Tipps, ich gehe dem nach und werde sehen, welche Lösung für mich geeignet ist.
Im Voraus besten Dank und schönes Weekend.

Man kann mit PHP das Template anpassen und lange Teaser bei der Ausgabe kürzen.
Leider habe ich dazu gerade keinen Link zur Hand.

Dann kannsT Du STATT floaten in CSS Flexbox nutzen.
Damit sollte eine gleiche Höhe erreicht werden können

http://codepen.io/matuzo/pen/tJHds

Ansonsten kann man gleiche Spaltenhöhen auch mit JQUERY erzwingen:

https://blog.kulturbanause.de/2015/0...nd-angleichen/

[Twitt]

Hallo Samuell

Ich hab das jetzt mal versucht einzubauen via CSS doch kriege ich das nicht recht hin da ich bereits mit dem jquery-isotope arbeite. Bin mir aber auch nicht sicher wo ich ansetzen soll.

Unter diesem Link siehst du wie es momentan ohne Flexbox daherkommt. Jedoch bei einer Fensteränderung wärs toll, es würde auf 2 bezw. bei kleineren auf 1 Spalte angepasst werden - bei gleichzeitig angepasster Höhe.

Momentan erreiche ich das, indem ich die Zeichen im Kurztext begrenze und eine feste Höhe via CSS gebe. Aber ist natürlich noch nicht soooo schön in der Darstellung.

Kannst du mir da weiterhelfen?

Man kann mit PHP das Template anpassen und lange Teaser bei der Ausgabe kürzen.
Leider habe ich dazu gerade keinen Link zur Hand.

Dann kannsT Du STATT floaten in CSS Flexbox nutzen.
Damit sollte eine gleiche Höhe erreicht werden können

http://codepen.io/matuzo/pen/tJHds