Inhaltselemente nebeneinander positionieren

[Koboldt]

Hallo,

ich bin neu hier und habe Grundkenntnisse in html & css und mache mich gerade mit Contao vertraut.

Ich habe mir das Buch von Thomas Weitzel "Mit Contao Webseiten erfolgreich gestalten" zugelegt und bin gerade dabei die Fotografenwebsite aus Kapitel 8 Schritt-für-Schritt umzusetzen.

Vielleicht hat ja jemand von Euch auch mit dem Buch schon gearbeitet und kann mir vielleicht ja helfen?

Auf Seite 137 Kapitel 8.11.2 komme ich einfach nicht weiter. Auf der Website sollen 3 Bilder nebeneinander positioniert werden. Ich bekomme das nach dieser Schritt-füt Schritt-Anleitung einfach nicht hin.
Kann mir einer von Euch helfen? Das wäre echt super nett.


Hier mal der Link zur der Fotografen-Website aus dem Buch von Thomas Weitzel.

http://www.think-contao.de/fotograf/portfolio.html

Wie bekomme ich die Bilder in Contao nebeneinander

Viele Grüße vom Contao-Neuling
Koboldt

[gebi84]

ich glaube du suchs den css Befehl: float:left;

Gesendet von meinem GT-N7100 mit Tapatalk

[Koboldt]

Hallo gebi84,

vielen Dank für Deine Antwort.

Ja das suche ich, wo stelle ich das denn ein, das ist leider aus der Schritt-für Schritt-Anleitung nicht zu erkennen.

Gruß
Koboldt

[gebi84]

du machst im css eine klasse wo die breite und den float definiert. Diese Klasse weisst du dann in Contao den Inhalts-Elementen zu. Um den float aufzuheben, muss das letze Element einen css clear:left; beinhalten.

Gesendet von meinem GT-N7100 mit Tapatalk

[Koboldt]

Hallo gebi84,

herzlichen dank für Deine schnelle Antwort.

Mich verwirrt es alles ein wenig, da ich noch nie mit einem CMS gearbeitet habe. Habe schon mal eine Website mit Dreamweaver erstellt, aber das hier ist so ganz anders.

Vielleicht habe ich ja morgen den Durchblick.

Gruß
Koboldt

[gebi84]

ich nehme an du verwendest bei deiner Seite den internen css builder. dann kannst du das css auch dort bearbeiten. Den css Klassen Namen kannst du in der Artikelverwaltung beim Inhaltselement das floaten soll hinterlegen. Falls du es nicht findest, kann ich dir morgen mehr Infos geben. Vom Handy aus ist das nicht so einfach. gn8

Gesendet von meinem GT-N7100 mit Tapatalk

[Koboldt]

Hallo gebi84,

herzlichen Dank, werde das morgen erstmal selbst versuchen und wenn ich das nicht hinbekomme, nehme ich gerne Deine Hilfe in Anspruch.

Gruß
Koboldt

[tab]

Also auf der Beispielseite heisst die Klasse "fotoblock"

#main .fotoblock {
    width: 200px;
    overflow: hidden;
    float: left;
    margin: 0px 40px 0px 0px;
    padding: 0px;
}

Die Klasse fotoblock weist du dann dem Textelement zu, das die Überschrift, das Bild und die Bildunterschrift enthält.
Das machst du im Textelement unter Experteneinstellungen.

Mit welcher Contao-Version arbeitest du eigentlich? Ich habe gesehen, dass die von dir verlinkte Website ein Contao 2.9.x ist, also schon "etwas" älter.

[Koboldt]

Hallo tab,

herzlichen Dank für Deine Hilfe.

Ich arbeite mit der Version 3.5.0.

Gruß
Koboldt

[tab]

Das ist gut. Da deine Anleitung allerdings wohl für 2.9 geschrieben ist, ist es natürlich klar, dass da nicht alles ganz genau so aussieht wie im Buch.

[Koboldt]

Jo, das stimmt...

[Koboldt]

Hallo,

noch mal ein herzlichen Dank an "gebi84" & "tab" für Eure Hilfe, leider komme ich noch an der einen Stelle echt nicht weiter, daher habe ich mein Problem noch mal ganz genau beschrieben mit Screenshort damit man weiß wo genau ich nicht weiter komme. Siehe Anhang.

Gruß
Koboldt

[tab]

Du hängst an einem Punkt, der da nicht hingehört. Du hast die Klasse im richtigen Feld eingetragen, im vorderen Feld wäre es eine CSS-Id. Aber die Klasse soll "fotoblock" heissen, nicht ".fotoblock". Auch wenn du mal eine ID ins erste Feld eintragen willst/sollst, NICHT "#DeineID", sondern "DeíneID".

".fotoblock" schreibst du nur im CSS, um die Klasse "fotoblock" anzusprechen.

[Koboldt]

Hallo tab,

herzliczhen Dank.

Wo stelle ich die CSS-Eigenschaften ein?

Gruß
Koboldt

[tab]

Was sagt das Buch, wo wird dort das CSS eingegeben? Hast du denn sonst noch gar kein CSS in der Website? Ansonsten im Backend unter Themes->DeinTheme->CSS ein neues Stylesheet erstellen und darin dann die Formatdefinitionen (neue Formatdefinition...).

[Koboldt]

Hallo tab,

nach der Anleitung aus dem Buch, hatte ich bis dahin noch keine CSS-Definitionen erstellt.

Aber Dank Deiner Hilfe habe ich das jetzt hinbekommen.

Vielen herzlichen Dank

Gruß
Koboldt

[tab]

Prima. Und nicht vergessen, das erstellte Stylesheet im Seitenlayout einzubinden ...

[Koboldt]

Danke tab für die weitere Info

[Wrathberry]

Ganz ohne CSS kannst du auch die Erweiterung "Rocksolid Columns" benutzen um das zu erreichen. Mit dem kannst du ganz einfach im Backend deine Seite in Spalten einteilen, diese kannst du sogar für das jeweilige Ausgabemedium optimieren, d.h. du kannst z.B. sagen dass du aufm Desktop-PC 3 Spalten willst, aufm Tablet nur 2 und aufm Handy nur 1 usw..

Von der Funktionsweise läuft das ganze sehr ähnlich wie das Akkordeon. D.h. du erstellst ein Anfang und stellst dort ein, wieviele Spalten du willst usw.. Dann packst du die jeweiligen Inhalte zwischen einen Spalten Anfang und Spalten Ende, ähnlich wie beim Akkordeon und schon hast du alles in Spalten die nebeneinander sind geordnet. Du kannst natürlich auch die größe der jeweiligen Spalten festlegen usw.. Finde ich persönlich deutlich Angenehmer als das ganze im CSS zu machen, vor allem weil du deutlich schneller was ändern kannst.

[tab]

Naja, das kann man sicher so und so sehen. Wenn ich die Wahl zwischen einer relativ einfachen CSS-Formatierung und einer Erweiterung habe, dann nehme ich die CSS-Lösung. Die funktioniert auch nach einem Contao-Update noch, eine Erweiterung möglicherweise erst mal nicht mehr, bis es dann ein Update für die Erweiterung gibt. Das mag jetzt bei den Rocksolid-Erweiterungen nicht so das große Problem sein, die sind da in der Regel sehr flott. Aber es gibt sicher hunderte Erweiterungen, für die es auch heute noch kein Update für Contao 3.x gibt. Wegen 3 Bildern, die ich mal eben nebeneinander stellen will, würde ICH mir sicher keine Erweiterung installieren.