|
|||
DIV Anordnung 1-2-(3-4)-5, nur wie?
Hi,
ich bin neu hier und versuch mich in CSS einzuarbeiten. Dabei gibt es zwar viele Tutorials und Seiten zum Nachlesen, aber irgendwie hab ich es nicht geschafft die wahrscheinlich einfache Lösung für mein Problem zu finden. Ich habe 5 Divs Code:
<html> <head> <link rel="stylesheet" href="floatstyle.css"> </head> <body> <div class="eins">1</div> <div class="zwei">2</div> <div class="drei">3</div> <div class="vier">4</div> <div class="fuenf">5</div> </body> </html> Ich würde aber gerne 3 und 4 (in dieser Reihe) unter einander setzen und 5 hinten dran. Code:
.eins { background-color: red; width:60px; height: 60px; float:left; } .zwei{ background-color: green; width: 60px; height:60px; float:left; } .drei{ background-color: blue; width: 60px; height:20px; float:left; } .vier{ background-color: yellow; width: 60px; height:20px; float:left; } .fuenf{ background-color: pink; width: 60px; height:60px; float:left; } Ich wäre für jeden Tipp dankbar |
Sponsored Links |
|
|||
Floats eignen sich hier nur bedingt. Sie haben auch einige Eigenheiten und sind auch gerade deshalb für Anfänger nicht immer gleich zu verstehen.
Wenn du 4+5 untereinander haben willst, dann musst du sie auch in einen eigenen Container geben. Folgendes müsste funktionieren: Code:
<div>1</div> <div>2</div> <div>3</div> <div> <div> 4 </div> <div> 5 </div> </div> <div>6</div> div { float:left; height: 40px; width: 40px; } Du musst also immer Elemente korrekt gruppieren, da die Anordnung der Elemente sonst nicht realisiert werden kann. Falls du eine zweidimensionale Anordnung brauchst kommst du um die Verwendung von "grid" nicht herum (aber das sollte für den Anfang nicht notwendig sein, das ist nicht unbedingt trivial) |
|
|||
Hallo,
danke für die schnellen Antworten @MrMurphy gibt es da NoNos in Bezug auf das, was dann in den Divs sein darf (also die Grid-Zellen dann)? Im hier gezeigten Beispiel hat es sofort prima funktioniert, allerdings nicht in der realen Anwendung (die dann halt Inhalt in den Divs hat, wie Spans und weitere Divs). @cloned Ich suche etwas, um ohne Verschachtelungen von Divs eine Lösung zu finden. Wenn sie eben parallel liegen wie im Beispiel. Denn ich will die CMS Templates (in diesem Fall Drupal) ja nicht alle neu schreiben müssen, je nachdem welchen Inhalt ich grad ausgebe. |
|
|||
Bezüglich Grid: Nein, da gibt es keine Beschränkung, was in den divs sein darf. Vielleicht hast du irrtümlich auch Subelemente des Grids als Grid definiert und dadurch das ungewollte Verhalten ausgelöst. Genaueres kann man nicht sagen.
Und ja, ich stimme MrMurphy zu: Sich mit Grid zu beschäftigen ist gut. Ich wollte in meinem ersten Beitrag nur sagen: Eventuell ist es besser, sich zuerst etwas mit flexbox zu beschäftigen bevor man grid angeht. Aber das soll kein "das muss so sein" sein, eher eine persönliche Empfehlung. Früher oder später muss man es sowieso lernen Du hast hier ein Beispiel mit sinnlosem Inhalt, was wäre denn ein realer Inhalt für CMS Templates? Und wieso müssen die so spezifisch angeordnet sein? |
|
|||
Naja, der Sinn eines Templates ist ja, dass ich es nicht für jede Seite extra gestalten muss. Das CMS bietet natürlich auch Möglichkeiten, Bausteine begrenzt anzuordnen. Aber das ist mir gestalterisch eben zu wenig.
Hier hab ich mal die verschiedenen Elemente farblich unterlegt in meiner Testumgebung und es live gestellt, damit du es aufrufen kannst. Wünschenswert wäre für die Anordnung: "titel titel titel titel" "bild art begin ort" "bild art end ort" Veranstaltungen | SWHZB - Saarlooswolfhund Züchterbund e.V. Du kannst dir mit Firebug die Twig Angaben im code angucken. Gridbox wäre eben die Klasse "Veranstaltungen" und die Grid-Zellen dann eben die Unter-Divs. Aber irgendwas mache ich eben noch falsch. Da er offenbar nicht realisiert, dass ich dort ein Grid aktiviert habe. |
|
|||
Hier ist eine Ursache für die fehlerhafte Darstellung dass du fixe Angaben für Breite/Höhe vorgibst. width: 12% zB für veranstaltungsart.
Auch fällt mir bei deinem Code auf: Der ist sehr unsauber strukturiert. Divs und spans sollten wirklich nur dann verwendet werden, wenn es sonst nichts anderes gibt. Dein Code ist ein gutes Beispiel für eine div-suppe, also ein Beispiel dafür, wie es eher nicht gehört. Klar, ein CMS generiert viele divs automatisch und dagegen kann man oft nur mit viel Aufwand etwas tun. Aber: So etwas wie <span class="views-label views-label-field-uhrzeit">Beginn: </span> muss doch nicht sein. Das ist doch eine Überschrift? Auch spricht nichts dagegen, beginn und ende in ein Element zu packen (was glaube ich der Ausgangspunkt für dein float-problem war) Soll das ganze auch auf mobilen Geräten akzeptabel dargestellt werden? |
|
|||
Wie gesagt, das ist der Output eines CMS (Durpal) und nicht meiner. Wenn ich alle seiten selbst bauen wollen würde, dann würde der code anders aussehen. Aber das ist ja nicht der Sinn eines CMS.
Schließlich sollen später auch Menschen ohne irgendwelche Kenntnisse den Inhalt pflegen können. Und die Zeiten sind vorbei, wo ich mal eben selbst ein CMS nach meinen Wünschen baue. Dafür sind zu viele Jahrzehnte bereits vergangen Ich habe in meinem Simplen Beispiel das hier gepostet ist, doch auch feste Höhen und Breiten drin. Da geht es. Ich sehe nicht, warum das mal kein Problem und dann doch ein Problem sein sollte? |
|
|||
Weil der Inhalt in deinem Simplen Beispiel nie die vorgegebene Größe sprent. Setze einmal einen 50 Wörter langen Text ein, dann wird dort dein Ergebnis auch nicht gut aussehen.
|
Sponsored Links |
|
|||
Aber es geht ja nicht ums gut aussehen. Das kann man dann ja anpassen. Es geht drum, dass er im Beispiel auf die Grid Codierung reagiert und in der CMS Version leider so gar nicht.
|
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 20:29 |
Brauche Hilfe: Schwarzes Nichts | Zwox | CSS | 10 | 19.11.2010 17:53 |
Header entfernen | tripple | CSS | 17 | 15.06.2010 16:41 |
Schriftfarbe in den Eintragungsfeldern von jforms | Steveislucky | CSS | 2 | 16.03.2010 11:59 |
CSS Text nebeinander? | carstiee09 | CSS | 13 | 13.11.2009 20:18 |