2 oder 3 Artikel mit Teaser in Hauptspalte nebeneinader

[elchfan]

Hallo,
weiß jemand wie man 2 oder 3 Artikel jeweils mit Teaser nebeneinander in der Hauptspalte platziert?

Aufbau:

Artikel 1
-----------------------------------------------
Artikel 2 mit Teaser | Artikel 3 mit Teaser
-----------------------------------------------
Artikel 4

Danke.



[Anmerkung Moderation: Es ist grundsätzlich nicht notwendig, den selben Beitrag in verschiedenen Themen zu posten!]

[Tim G]

In diesem Beispiel würde es mit dem css selector :first-child und :last-child in Kombination mit float: none funktionieren.
Die anderen wüeden ein float: left bekommen, nur der erst und lezte Artikel ein float: none



Sent from my iPhone using Tapatalk

[elchfan]

Hallo Tim,

sorry das ist mir noch nicht ganz klar. Mal ganz von vorne:

1) Es existiert eine Seite, die 4 Artikel hat.
2) Bei jedem Artikel kann man bei den Artikeleinstellungen festlegen, ob ein Teaser angezigt werden soll oder nicht.
3) Jeder Artikel kann mehrere Inhaltselemente enthalten, z.B. TEXT. Bei den Inhaltselementen kann man meines Wissens aber nicht festlegen, dass es einen Teaser gibt, noch den Teasertext selbst. Richtig?

Wie funktioniert das mit genannten css-Selektoren? Kannst Du mir da bitte auf die Sprünge helfen? Danke.

[Tim G]

Hi,
im Grunde ganz einfach. Ich habs grad ausprobiert. siehe screenshot:
http://www.tim-gatzky.de/htdocs/screenshot_01.png
So das BE:
http://www.tim-gatzky.de/htdocs/screenshot_02.png


Damit ist auch egal ob Teaser, oder nicht.

Die Theorie ist, dass sämtliche Artikel ein float bekommen und eine weite z.B. 33% (dann passen 3 Artikel nebeneinander. margin und padding vergrößern die breite), ausser die beiden umgrenzenden.
( Funktioniert nur wenn es keine anderen Artikel gibt. )

.mod_article
{
	position: relative;
	float: left;
	
	width: 33%;
}

.mod_article:first-child
{
	position: relative;
	float: none;
	
	width: 100%;
}

.mod_article:last-child
{
	position: relative;
	float: none;
	
	width: 100%;
}

Da der Teaser auch inner halb des .mod_article elements dargestellt wird, passt sich dieser natürlich der Darstellung an.

Das ist eine Lösung ohne eigene Klassennamen für die Artikel zu vergeben.


Mit eigenen Klassennamen geht es natürlich auch und du brauchst kein extra Seitenlayout.

Einfach den Artikeln, die floaten sollen einen zusätzlichen Klassennamen geben z.B. meinKlassenName
und das CSS anpassen.

.mod_article.meinKlassenName
{
	position: relative;
	float: left;
	
	width: 33%;
}

.mod_article
{
	position: relative;
	width: 100%;
}

Das sollte genauso funktionieren




Grüße Tim

[elchfan]

Hallo Tim,

Deine Lösung hat mich überzeugt und fasziniert mich.
Auf Dauer ist die Variante mit dem Klassennamen die einfachere. Deshalb habe ich jetzt folgenden Code in die CSS-Datei geschrieben:

.mod_article.2Spalten_mit_Teaser
{
	position: relative;
	float: left;
	
	width: 33%;
}

.mod_article
{
	position: relative;
	width: 100%;
}

Wo im BE muss ich die Klasse 2Spalten_mit_Teaser angeben? Ich habe einiges ausprobiert, die 2 Artikel 'Nutzbare Wasservorkommen oft nicht erfassbar' und 'Negative Folgen können vermieden werden' erscheinen immer noch untereinander. Siehe http://www.water-for-africa.de/ .

[bitverdreher]

Warum so umständlich? Für sowas gibt es doch das Contao CSS-Framework.

http://www.contao-community.de/showt...l=1#post113284

[Tim G]

Wirklich?
Gibt es da eine Übersicht der Klassen?
Aus dem anderen Post wird man ja auch nicht schlauer.
"Klasse g4" ????

[Tim G]

Das Contao CSS-Framework besagt doch nur, dass Contao eine eigene Funktionalität zur Verarbeitung von CSS-Stylesheets bietet.

Oder hab ich jetzt einen Denkfehler?

--
Ich arbeite mit der CSS Funktion in Contao nicht, da man entweder im BE Änderungen machen muss, oder per Editor - dann aber immer erst das neue CSS File importieren muss.
Ich benutze den klassischen Weg direkt im Seiten-Template.

[Tim G]

@elchfan

Deine eigene Klasse für den Artikel schreibst du in das Feld "CSS-ID/Klasse" unter den Experten-Einstellungen in den Einstellungen des Artikel (Da wo du auch festlegst in welcher Spalte er angezeigt wird).
Wenn der Artikel einen Teaser erhält, dann noch den gleichen Klassennamen bei "Teaser-CSS-ID/Klasse" unter dem Reiter: Teasertext.

Klassennamen sind schon ein guter Weg und oft der einzige. Die andere Methode ist etwas selbsterklärender, weil der jenige, der die Seite pflegt, keine speziellen Klassennamen kennen muss.
Allerdings etwas fehlerbehafteter. Aber man kann die Auswahl noch etwas verfeinern.

#main .mod_article:first-child

würde nur den ersten Artikel in der Hauptspalte treffen und alle anderen unverändert lassen.
So kann man sich durchhangeln.

Den Weg über das Framework kenne ich nicht. Würde aber einiges an Arbeit sparen bei einem tabellenähnlichen Layout, ohne Tabellen.

[Tim G]

Das Zauberwort heisst 960 Pixel Grid:
http://www.contao-community.de/showt...-in-TYPOlight&

Viele Wege... , aber mich überzeugt`s auch nicht. Fürn webmaster ok, aber für Redakteure schon umständlich und anscheinend auf 960px eingeschossen und ein zusätzlicher javascript block.

aber wieder was gelernt...

[bitverdreher]

Unter http://www.contao.org/herunterladen.html kannst Du das Pixel-Gridsystem runterladen. Diese CSS-Datei bindest Du dann mit ein (entweder per Template oder in Contao importieren).

Das Layout ist dann in 12 Spalten unterteilt. Klasse "g4" heißt dann 4 Spalten breit.

[Tim G]

Cool.
Das Prozent-Grid ist inetwa das gleiche wie die oben gezeigte Methode.
Das Pixel-Grid müsste man sich ggf. für andere Größen anpassen, aber erstmal ein schöner Startpunkt.

Thx

[elchfan]

Hallo,

vielen Dank für die ganzen Tipps.
Ich habe jetzt die Lösung mit dem Pixel-Grid-System von Contao zu nehmen. D.h. ich habe die CSS-Datei eingebunden und bei den Artikeln 'Nutzbare Wasservorkommen oft nicht erfassbar' und 'Negative Folgen können vermieden werden', siehe http://www.water-for-africa.de/ , jeweils bei den Artikeleinstellungen 'g3' in die Felder 'Teasertext --> CSS-Klasse' und 'Experteneinstellungen --> CSS-Klasse' eingetragen.

Beim letzten dieser beiden Artikel ist das letzte Inhaltselement HTML: <div id="clear"></div>

Bisher erscheinen die Texte immer noch untereinander.

[MacKP]

Hallo elchfan,
dein mod_article hat noch eine width:100%, dadurch werden die so breit und stehen dann natürlich nicht nebeneinander.

Viele Grüße

[elchfan]

Hallo MacKP,

danke für den Hinweis. Jetzt kommen sie nebeneinander, aber der letzte Artikel auch.
Der soll unter den 2 vorherigen Artikeln anfangen.
Ist es nicht so, dass der HTML-Code <div id="clear"></div>
eine neue Zeile bewirkt?

[MacKP]

Hallo elchfan,
ich habe eher das Gefühl, das sich da 2 verschiedene CSS Ansätze in die Quere kommen...
Da ich das Grid System nicht nutze kann ich dir da leider nicht wirklich was zu sagen.

Viele Grüße

[bitverdreher]

Das <div id="clear"></div> muss vor id="id-3-spalten-text-mit-teaser". Dort wo Du in Deinem ersten Post die gestrichelte Linie eingezeichnet hast. Dann sollte es klappen.

Ich würde auch <div class="clear"></div> verwenden. ID's sind zum eindeutigen bestimmen von Elementen gedacht und sollten nur einmal pro Seite vorkommen.