Übergroße Inhalte
Es wird wohl kaum vorkommen, dass <header> und/oder <footer> aber auch <nav> eine Seite überlaufen lassen. Dann sollte über das Konzept nochmal nachgedacht werden. Das sieht im <section> und/oder <article> schon anders aus. Das passt selten und in Abhängigkeit der Höhe des Browserfensters in seinen Bereich. Wenn dann aber das gesamtinhaltstragende <main>-Element gescrollt werden muss, nur weil sich in einem untergeordneten Element mehr befindet, als die Höhe fassen kann, ist die Eigenschaft overflow einfach falsch zugeordnet.
Die Anzeige mit overflow für das <article>-Element
Im Header
Text im <article>-Element
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text
Hier kommt nur irgend ein Text
Hier kommt nur irgend ein Text
<section id='iO'> <header><h3>Im Header</h3></header> <article> <p>Text ... </p> </article> <footer><p>Text im Footer</p></footer> </section>
Die CSS-Definition
| 10 11 12 13 14 15 16 17 |
/* Beispiel 1 */
|
Das ich hier nicht <main> einsetze, ist klar: Das ist alles schon in <main>! Ich muss also auf <section id='iO'> ausweichen.
Und jetzt folgt, was folgen muss. Ein typisches Beispiel für Anwendungen aus dem CMS-Baukasten. Weil der Inhalt von <article> wieder größer ist als der zur Verfügung stehende Bereich, wird alles zum Scrollen gebracht. Ich kann mir nicht vorstellen, dass das am Baukasten selber liegen soll, eher weil es dazu führt, dass keiner mehr meint, HTML zu lernen. Und somit wird es unweigerlich zu einem Erkennungsmerkmal für WordPress, Joomla, Drupal und TYPO3. Manchmal täusche ich mich dann doch und es ist garkein CMS eingesetzt. Was soll ich sagen!
Die Anzeige mit overflow für das <section>-Element
Im Header
Text im <article>-Element
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text.
Hier kommt nur irgend ein Text
Hier kommt nur irgend ein Text
Hier kommt nur irgend ein Text
<section id='noenoe'> <header><h3>Im Header</h3></header> <article> <p>Text ... </p> </article> <footer><p>Text im Footer</p></footer> </section>
Die CSS-Definition
| 19 20 21 22 23 24 25 26 27 |
/* Beispiel 2 wie es nicht sein sollte */
|
Der Unterschied besteht also darin, wer den overflow erhalten soll. Und so schwer ist es doch garnicht, dies richtig einzusetzen! Die Eigenschaften für Position sind ebenfalls zu beachten: 14: und 17: für <section id='iO'> und die relative Positionierung in <section id='noenoe'>.
Noch eine Anmerkung zu: float: left im <section> . Das ist nur dazu da, um rechts daneben die Elemente und CSS darzustellen.
Weitere Anwendungen von overflow wie overflow-x, und overflow-y sind von mir noch nicht getestet. overflow-style wird sicherlich noch interessant, aber noch fehlt die Browserunterstüzung.