Block Formatting Context

[Charly]

Hallo,
da mein Versuch mit float:left seltsame Effekte brachte:

aaaaa        xxxxxxx
bbbbb
ccccc
ddddd
eeeee
fffff
             zzzzzzz

Statt wie gewünscht:

aaaaa        xxxxxxx
bbbbb
ccccc        zzzzzzz
ddddd
eeeee
fffff
habe ich gesucht und vieles gefunden, davon das meiste für mich (Anfänger) unverständlich.
Hängen geblieben bin ich nun an diesem Dokument
und dem Beispiel

  
  
#container:after {  
   display: block;  
   clear: both;  
   content: ".";  
   height: 0;  
   visibility: hidden;  
}

Dann wird im Anschluss an dieses Beispiel hingewiesen auf
Nachteile der gängigen Praxis class="clearfix", nämlich:
Mit class="clearfix" werden wieder massenhaft präsentationsbezogene Informationen im HTML untergebracht.
Daher meine Fragen:
1. Wie verweise ich im HTML auf obiges CSS.
2. Gibt es inzwischen bessere Methoden, die die o.g. Nachteile nicht haben
3. Gibt es eine Dokumentation, die für Anfänger noch verständlicher ist (z.B mit vollständigen Beispielen)?

[Matthias Apsel]

Om nah hoo pez nyeetz, Charly!

Es kommt sehr darauf an, was du erreichen möchtest. Möglicherweise brauchst du gar kein float. Es gibt die Alternativen

* flexbox
* display: table-*
* display: inline-block

mit zunehmender Browserunterstützung von oben nach unten.

Im HTML wird gar nicht auf das CSS verwiesen, es gibt CSS-Selektoren, die die entsprechenden Elemente "herauspicken".

Matthias

[Charly]

Om nah hoo pez nyeetz (was immer das heißen mag), Matthias!

flexbox sieht ja interessant aus, ist aber vielleicht doch noch nicht so gut unterstützt.
Ich würde daher lieber mit float beginnen.

Im HTML wird gar nicht auf das CSS verwiesen, es gibt CSS-Selektoren, die die entsprechenden Elemente "herauspicken".

Das war vielleicht falsch ausgedrückt. Was mir nicht klar ist:
Wird die Klasse (bzw. id) "container" im letzen div angegeben (wenn meine drei Blöcke div-Blöcke sind) oder kommt hinter die drei divs ein 4. div mit dieser id (Klasse)?

[Matthias Apsel]

Om nah hoo pez nyeetz, Charly!

Ich würde daher lieber mit float beginnen.

Ich würde nach Möglichkeit float vermeiden, außer ich möchte tatsächlich von Text umflossene Elemente haben, wie etwa bei diesem Beispiel. Bei float muss man eine ganze Menge beachten.

Im HTML wird gar nicht auf das CSS verwiesen, es gibt CSS-Selektoren, die die entsprechenden Elemente "herauspicken".
Das war vielleicht falsch ausgedrückt. Was mir nicht klar ist:
Wird die Klasse (bzw. id) "container" im letzen div angegeben (wenn meine drei Blöcke div-Blöcke sind) oder kommt hinter die drei divs ein 4. div mit dieser id (Klasse)?

ersteres. Vielleicht solltest du für den Moment auch vergessen, dass es div-Elemente gibt ;-) http://blog.selfhtml.org/c/html/html5-serie/

Matthias

[Gunther]

Hallo!

flexbox sieht ja interessant aus, ist aber vielleicht doch noch nicht so gut unterstützt.

Das kommt ja darauf an, welche Browser(-Versionen) du "unterstützen" möchtest?

Ich würde daher lieber mit float beginnen.

Das sollte man weniger von deinem genannten Argument abhängig machen, als vielmehr davon, welches das geeignetste Mittel zur Erreichung eines Ziels ist.

Du hast uns immer noch nicht verraten,

• wie dein HTML Code aussieht
• welches Ziel du letztendlich erreichen willst

Beides wäre extrem hilfreich, um dir passende Tipps zu geben.

Im HTML wird gar nicht auf das CSS verwiesen, es gibt CSS-Selektoren, die die entsprechenden Elemente "herauspicken".
Das war vielleicht falsch ausgedrückt. Was mir nicht klar ist:
Wird die Klasse (bzw. id) "container" im letzen div angegeben (wenn meine drei Blöcke div-Blöcke sind) oder kommt hinter die drei divs ein 4. div mit dieser id (Klasse)?

Was mir nicht klar ist:
Wie sieht denn dein (bisheriger) HTML Code aus?

Merke: CSS ohne zugehöriges HTML Markup "macht keinen Sinn"!

Sprich, solange wir nicht beides sehen, bleibt das hier ein "Blindflug". ;-)

Gruß Gunther

[Charly]

Hallo!

Du hast uns immer noch nicht verraten,

• wie dein HTML Code aussieht

Da gibts nicht viel zu zeigen, da ich ja gerade anfange.
Ich habe drei <divs> mit noch leerem Inhalt (bzw. aaaa<br>bbbbb... damit man überhaupt was sieht).
Das erste hat über CSS "float: left", es soll die links zu den Seiten erhalten.
Das zweite div soll rechts davon jeweils für alle Seiten identische Informationen erhalten.
Das dritte und vielleicht auch 4., 5. div soll unter dem 2. div seitenspezifische Informationen erhalten.
Dabei werde ich Matthias Anregung berücksichtigen und die divs ersetzen.
s.o.
Gruß
Charly

[Matthias Apsel]

Om nah hoo pez nyeetz, Charly!

Ich habe drei <divs> mit noch leerem Inhalt (bzw. aaaa<br>bbbbb... damit man überhaupt was sieht).
Das erste hat über CSS "float: left", es soll die links zu den Seiten erhalten.
Das zweite div soll rechts davon jeweils für alle Seiten identische Informationen erhalten.
Das dritte und vielleicht auch 4., 5. div soll unter dem 2. div seitenspezifische Informationen erhalten.

Kümmere dich zuerst _ausschließlich_ um die Inhalte. Dann erst um die Gestaltung.

Matthias

[Gunther]

Om nah hoo pez nyeetz, Charly!

Ich habe drei <divs> mit noch leerem Inhalt (bzw. aaaa<br>bbbbb... damit man überhaupt was sieht).
Das erste hat über CSS "float: left", es soll die links zu den Seiten erhalten.
Das zweite div soll rechts davon jeweils für alle Seiten identische Informationen erhalten.
Das dritte und vielleicht auch 4., 5. div soll unter dem 2. div seitenspezifische Informationen erhalten.

Kümmere dich zuerst _ausschließlich_ um die Inhalte. Dann erst um die Gestaltung.

Und in Ergänzung zu Matthias:
Bevor du deine "notwendige" HTML-Struktur, sprich die entsprechenden Elemente, nicht hast, macht des Erstellen eines entsprechenden CSS keinen Sinn.

Soweit ich deine Ausführungen verstanden habe, möchtest du eigentlich "nur" ein 2-spaltiges Layout, bei dem die linke Spalte ein Element, und die rechte Spalte alle anderen Elemente enthält.

Und vielleicht auch noch einen Header und Footer, die jeweils über beide Spalten reichen?

Gruß Gunther

[Charly]

Hi Ihr beiden,

Und in Ergänzung zu Matthias:
Bevor du deine "notwendige" HTML-Struktur, sprich die entsprechenden Elemente, nicht hast, macht des Erstellen eines entsprechenden CSS keinen Sinn.

Ich tu mir aber leichter, wenn ich gleich etwas sehe und weiß, dass es funktioniert.
Wenn ich erst die kompletten Inhalte zusammensuche und danach Schwierigkeiten mit dem Layout kriege, ist das frustrierend.
Und dass es mit den Spaltenlayouts Probleme gibt, erkenne ich an den unendlich langen Ergebnislisten, wenn man danach sucht.

Soweit ich deine Ausführungen verstanden habe, möchtest du eigentlich "nur" ein 2-spaltiges Layout, bei dem die linke Spalte ein Element, und die rechte Spalte alle anderen Elemente enthält.

Ja.

Und vielleicht auch noch einen Header und Footer, die jeweils über beide Spalten reichen?

Nur ein Header und der soll nur über die zweite Spalte reichen (dafür war mein 2. div vorgesehen)
Gruß
Charly

[Gunther]

Hallo!

Ich tu mir aber leichter, wenn ich gleich etwas sehe und weiß, dass es funktioniert.
Wenn ich erst die kompletten Inhalte zusammensuche und danach Schwierigkeiten mit dem Layout kriege, ist das frustrierend.

Das mag zwar sein, ist aber trotzdem die komplett falsche Herangehensweise.

Grob skizziert sieht diese wiefolgt aus:

1. Was sind meine Inhalte, die ich unterbringen möchte auf meiner Website?
2. Wie unterteile ich diese Inhalte (auf verschiedene Seiten) am sinnvollsten?
Ohne diese Vorüberlegungen kannst du bspw. deine Naviagtion/ dein Menü gar nicht konzipieren!

3. Welche "Art" von Navigation/ Menü ist am vorteilhaftesten für meine Seitenstruktur?
Dabei ist es äu0erst empfehlenswert, dass die Navigation/ das Menü über alle Seiten hinweg stets "konsistent" ist, d.h. an gleicher Stelle mit gleichem Aussehen.

Erst danach geht es daran, sich Gedanken über die Strukturierung der einzelnen Inhalte auf der jeweiligen Seite zu machen.

Dabei bestimmt ausschließlich der Inhalt, welche HTML Elemente zur Anwendung kommen - das nennt man Semantik.

Und wenn du dann deine Inhalte entsprechend korrekt "verpackt" hast, dann geht es daran, diese per CSS entsprechend darzustellen.

Dabei kann es, gerade wenn man noch nicht so vertraut ist mit der Materie, vorkommen, dass du das eine oder andere zusätzliche "Container-Element" einfügen musst, die Reihenfolge von Elementen ggf. ändern musst oder ähnliches, um die gewünschte Darstellung zu erreichen - mehr aber auch nicht!

Und dass es mit den Spaltenlayouts Probleme gibt, erkenne ich an den unendlich langen Ergebnislisten, wenn man danach sucht.

Hmmm ..., ich sehe da nicht mehr oder weniger Probleme, als bei allen anderen Dingen auch. ;-)

Soweit ich deine Ausführungen verstanden habe, möchtest du eigentlich "nur" ein 2-spaltiges Layout, bei dem die linke Spalte ein Element, und die rechte Spalte alle anderen Elemente enthält.

Ja.

Und vielleicht auch noch einen Header und Footer, die jeweils über beide Spalten reichen?
Nur ein Header und der soll nur über die zweite Spalte reichen (dafür war mein 2. div vorgesehen)

Also dann fang' doch mal an, deine "Inhalte" entsprechend zu strukturieren:

• Header
• Navigation/ Menü
• Main (Content)

Und dann kommt die Darstellung.
In deinem Beispiel könnte man neben den bereits hier im Thread genannten Varianten auch noch mit absoluter/ fixierter Positionierung arbeiten.

Du siehst, dir stehen jede Menge Alternativen zur Auswahl.
Welche davon letztendlich die vermeintlich beste ist, hängt von vielen anderen Faktoren ab (Skalierbarkeit fixed/fluid/elastic, zu unterstützende Browser/-versionen). Auch dazu hast du dich bisher noch nicht geäußert. ;-)

Meine Empfehlung an dich:
Experimentiere mit allen hier genannten Möglichkeiten!
Denn nur so kriegst du neben der nötigen (Fach)Kenntnis auch ein "Gespür" dafür, welche Vor- & Nachteile jede dieser Varianten mit sich bringt. Und nur so wirst du in Zukunft in der Lage sein, selber die jeweils beste Option für einen Fall auswählen zu können.

Gruß Gunther