zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV Anordnung 1-2-(3-4)-5, nur wie?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.03.2018, 17:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2018
Beiträge: 11
Nuci befindet sich auf einem aufstrebenden Ast
Standard 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 habe für alle eine Klasse erstellt und sie mit float in eine Reihe gesetzt.
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;
}
Nur wie mach ich das? Ist der Ansatz mit float schon total falsch?

Ich wäre für jeden Tipp dankbar
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.03.2018, 17:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Du solltest dich mit CSS-Grid beschäftigen.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.03.2018, 17:40
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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;
}
Das ist natürlich nur ein minimalbeispiel, du kannst hier gerne wieder Klassen hinzufügen um jedes Element einzeln anzusprechen.

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.03.2018, 20:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2018
Beiträge: 11
Nuci befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.03.2018, 09:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 21.03.2018, 10:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2018
Beiträge: 11
Nuci befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 21.03.2018, 10:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
  #8 (permalink)  
Alt 21.03.2018, 11:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2018
Beiträge: 11
Nuci befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 21.03.2018, 11:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Nuci Beitrag anzeigen
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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 21.03.2018, 11:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.03.2018
Beiträge: 11
Nuci befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:15 Uhr.