Contao-Camp 2024
Ergebnis 1 bis 12 von 12

Thema: Layout mit dem Spaltenset

  1. #1
    Contao-Nutzer
    Registriert seit
    05.10.2013.
    Beiträge
    165

    Standard Layout mit dem Spaltenset

    Hallo zusammen,

    ich hätte gerne die Boxen mit Hilfe des Spaltenset auf diese Seite http://xn--mhlbachschule-wob.de/wir.html nebeneinander.

    Ich versuche es mit der "subcolum" Erweiterung, doch leider der stehen den Boxen damit nicht nebeneinandern.

    Was kann ich machen das die Boxen wieder schön nebeneinander stehen oder habt ihr ne Idee, wie ich die Boxen auf eine noch bessere Methode nebeneinander bekommen.

    Viele Grüße

    Patrick

  2. #2
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Der wichtige Tip wäre, aufzupassen was Du selbst an CSS schreibst und was die Erweiterung an CSS braucht.

    Dein eigener Code zerschiesst Dir gerade die subcolumns:

    PHP-Code:
    #main div {
        
    clearboth;
    }
    .
    mod_article [class*="ce_"], .mod_article [class*="mod_"] {
        
    margin-left10px;
        
    margin-right10px;

    So generelle Anweisungen können gehörig nach hinten losgehen.

    Du solltest nächstes mal in Deinen Debug-Tools im Browser schauen, wo es hakt.

  3. #3
    Contao-Nutzer
    Registriert seit
    05.10.2013.
    Beiträge
    165

    Standard

    Danke jetzt hat fast geklappt.

    Allerdings sind jetzt die beiden linken Boxen nebeneinander aber die dritte ist nach darunter.

    Was mache ich jetzt noch falsch?

  4. #4
    Contao-Urgestein Avatar von KlausGrenoble
    Registriert seit
    27.01.2013.
    Ort
    Grenoble
    Beiträge
    2.362

    Standard

    Nur so nebenbei: Ich habe von CSS nur 3% Ahnung, aber beim Rumspielen habe ich mal hier was geaendert:
    header, footer, nav, section, aside, article, figure, figcaption {
    display: block;
    Da hab' ich mal block in flex geaendert. Und da aendert sich auch was auf der Seite.
    Gruss
    Klaus

  5. #5
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Du hast noch immer CSS aus Post #2 in Deiner Seite.

    @Klaus: Wild irgendwas ändern bringt auch keine saubere Lösung.

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

    Support Contao

    Standard

    Es stimmt schon, wild ändern bringt nichts. Wenn man mit css zielgerichtet etwas erreichen will, muss man sich intensiv damit beschäftigen.
    Ich kenne die Erweiterung subcolumns zwar nicht so genau, aber ich denke schon dass sich Dein Problem damit lösen läßt.
    Ich löse so etwas allerdings grundsätzlich ohne Erweiterung.
    Flexboxen (das von @Klaus angesprochene display: flex) sind eine Möglichkeit, aber auch ganz normale entsprechend über css gestaltete gefloatete Elemente sind möglich.
    Letzteres setzt auch die Erweiterung subcolums ein.
    Aber egal ob mit oder ohne Erweiterung, wenn die Gesamtbreite größer wird als die zu Verfügung stehende Breite, dann wird beim Floaten am Ende umgebrochen. Das passiert bei Dir mit der dritten Spalte.
    Außerdem sind nur die ersten fünf Boxen innerhalb der section subcolumns. Für die restlichen Bilder kann die Erweiterung auch nicht greifen.
    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.




  7. #7
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Flexbox hilft sicher. Aber nicht pauschal für alles, so wie hier vorgeschlagen: header, footer, aside, section, ...

    Für den zielgerichteten Einsatz muss man jedoch verstehen was man tut und an den richtigen Stellen, in diesem Fall an den divs von subcolumns, ansetzen.

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

    Support Contao

    Standard

    Zitat Zitat von Samuell Beitrag anzeigen
    Flexbox hilft sicher. Aber nicht pauschal für alles, so wie hier vorgeschlagen: header, footer, aside, section, ...
    Natürlich nicht pauschal.

    @PatrickEder Ganz konkret zu Deinem Problem.

    Ich habe mir mal die unteren 9 Boxen vorgenomen, die offensichtlich außerhalb der subcolumn liegen.

    Wenn Du für das übergeordnete Element ce_text eine extra Klasse vergibt z. B. ce_text_box oder irgendeine andere Klasse nach Deiner Wahl, dann benötigst Du folgenden Code damit die Boxen schön gleichmäßig verteilt werden

    Code:
    .ce_text_box {
    float: left;
    width: 33.3333%;
    }
    .box {
    width: 170px;
    height: 165px;
    background-color: #d9d4d4;
    border: 1px solid #a8a0a0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-shadow: 4px 10px 20px grey;
    margin: 0 auto 20px auto;
    }
    Mit float: left sorgst Du dafür, dass die den Boxen übergeordneten Elemente soweit wie möglich nach links rutschen. Mit width: 33.3333% sorgst Du dafür, dass diese Elemente jeweils ein Drittel des verfügbaren Platzes beanspruchen.
    Bei den Boxen selbst sorgt margin: 0 auto 20px auto mit dem auto für den linken und rechten Außenabstand für eine mittige Platzierung innerhalb von ce_text_box.
    Sollte so wie bei Deiner allerersten box ein Element nach unter herausragen (finde ich ohnehin nicht ganz glücklich), muß der untere Außenabstand ggf. größer als 20px sein.
    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.




  9. #9
    Contao-Nutzer
    Registriert seit
    05.10.2013.
    Beiträge
    165

    Standard

    Danke jetzt hat es geklappt

  10. #10
    Contao-Nutzer
    Registriert seit
    05.10.2013.
    Beiträge
    165

    Standard

    Jetzt habe ich noch ein ähnliches Problem,

    Ich habe mit der Erweiterung subcolum-light diese Bilder angeordnet: http://xn--mhlbachschule-wob.de/lehrer.html (Unten die Lehrerauflistung)

    Leider hat es automatisch die Bilder auf eine andere Größe angepasst.

    Ich hätte gerne das die Bilder alle gleich groß angezeigt werden.
    Eigentlich haben die Bilder, wenn ich im Editor nachschaue, die gleiche Größe, aber sie werden unterschiedlich groß angezeigt.

    Ich hoffe Ihr könnt mir weiterhelfen!

    Viele Grüße

    Patrick

  11. #11
    Alter Contao-Hase
    Registriert seit
    20.03.2010.
    Ort
    Hannover
    Beiträge
    1.041

    Standard

    Die Bilder haben nicht die gleiche Größe, bzw. nichtmal die gleichen Verhältnisse.

    Rebekka-kollmus: 800 * 965 -> Faktor 1.20
    braun-marion: 121 * 149 -> Faktor 1.23

    Bring die Bilder doch mal vorab auf ein einheitliches Format.
    Erstrecht wo Du an dieser Stelle keine 800 * 965 brauchst.

  12. #12
    Contao-Nutzer
    Registriert seit
    05.10.2013.
    Beiträge
    165

    Standard

    Vielen Dank für die Hilfen.
    Jetzt klappt es.

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
  •