nicht angemeldet
Layoutaufbau/Positionierung im Browser
Matthias Apsel
Gunnar BittersmannHallo!
Mein Problem: Ich habe immer wieder Mühe zu verstehen, wie ein Browser etwas positionieren wird bzw. wie man ein bestimmtes Layout erzielt. Es geht dabei rein um die Positionierung und Grösse der Blöcke, nicht um Aspekte der Gestaltung.
BEISPIELE:
Die CSS-Eigenschaften position, width/height, left/top, float, display, visibility, etc. sowie die dazugehörige Struktur des HTML-Dokuments. Man kann die Eigenschaften natürlich nachschlagen, aber das Zusammenspiel ist meist kaum erklärt.
Unklarheiten, die ich in den letzten Tagen hatte:
- Warum ist ein Div, das mehrere Divs enthält, viel kleiner als der Raum, den seine Kind-Divs tatsächlich einnehmen?
- Wie geht man korrekt vor, wenn man ein Div haben möchte, dass man später explizit und absolut positioniert einblendet?
ZUSMMENFASSUNG:
Worum es letztlich geht: Ich merke einfach, dass ich keinen Plan habe, wie der Browser grundsätzlich beim Aufbau des Layouts vorgeht. Wie dafür die Regeln sind. Darüber würde ich gerne etwas mehr lesen, habe aber leider keine umfassende Erklärung gefunden. Würde mich freuen, wenn mir jemand einen Link oder einen Buchtipp hätte.
Cheers!
-
Om nah hoo pez nyeetz, Hallowelt!
- Warum ist ein Div, das mehrere Divs enthält, viel kleiner als der Raum, den seine Kind-Divs tatsächlich einnehmen?
Kein div sollte mehrere divs enthalten. Div (und span) ist ein Element, welches keinerlei semantische Bedeutung hat. Ich bin sicher, auch im HTML4-Bereich möchten ganz viele divs, lieber p oder h1...6 oder ul sein. Wenn du deine Seite in HTML5 entwickelst, hast du für jede Lebenslage ein passendes Element (mdn)
Zu deiner Frage: Wenn du Kinder eines Elements positionierst oder floatest, gehören sie visuell nicht mehr zu diesem Element.
- Wie geht man korrekt vor, wenn man ein Div haben möchte, dass man später explizit und absolut positioniert einblendet?
Vor allem verwendet man position und float gaaanz sparsam. Eine mögliche Alternative heißt flexbox.
Es ist erstrebenswert, dass sich die Elemente ihren Platz selbst aussuchen und nur in Ausnahmefällen eingegriffen wird. Das erleichtert die Nutzbarkeit in verschiedenen Konfigurationen.
ZUSMMENFASSUNG:
Worum es letztlich geht: Ich merke einfach, dass ich keinen Plan habe, wie der Browser grundsätzlich beim Aufbau des Layouts vorgeht. Wie dafür die Regeln sind. Darüber würde ich gerne etwas mehr lesen, habe aber leider keine umfassende Erklärung gefunden. Würde mich freuen, wenn mir jemand einen Link oder einen Buchtipp hätte.float in unserem Wiki ist sehr umfangreich. Ansonsten kann ich nur die Spezifikation des W3C empfehlen. Einen konkreten Link hab ich leider nicht. Dort ist beschrieben, in welcher Reihenfolge, welche Angaben berücksichtigt werden (sollen).
Matthias
--
1/z ist kein Blatt Papier.
-