Druckbare Version
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
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:
So generelle Anweisungen können gehörig nach hinten losgehen.PHP-Code:#main div {
clear: both;
}
.mod_article [class*="ce_"], .mod_article [class*="mod_"] {
margin-left: 10px;
margin-right: 10px;
}
Du solltest nächstes mal in Deinen Debug-Tools im Browser schauen, wo es hakt.
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?
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
Du hast noch immer CSS aus Post #2 in Deiner Seite.
@Klaus: Wild irgendwas ändern bringt auch keine saubere Lösung.
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.
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.
Natürlich nicht pauschal.Zitat:
Zitat von Samuell
@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
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.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;
}
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.
Danke jetzt hat es geklappt
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
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.
Vielen Dank für die Hilfen.
Jetzt klappt es.