HTML and CSS Reference
In-Depth Information
müssen Sie zunächst diesen Teil durch ein weiteres Element, in diesem Fall
article
,
umschließen:
2
<article>
<h1>Herzlich Willkommen!</h1>
<p>Mein Name ist Sharky und ich erschrecke leidenschaftlich gerne Menschen.
Schauen Sie sich doch einfach mal in meinem Zuhause, dem <a href="http://
www.html5rockt.de/">Aquarium</a> um.</p>
<h1 class="biographie">Sharky, der Jaguarhai</h1>
<p>Sharky's Eltern waren auch schon richtige Draufgänger und große Fans des
Films "Der weiße Hai".</p>
</article>
Listing 2.7
Das Grundgerüst für eine Mehrspaltigkeit.
In der CSS-Datei aktivieren Sie die Mehrspaltigkeit über die Gestaltung des
article
:
article {
-webkit-column-count:2;
-webkit-column-rule: solid 1px #cccccc;
-webkit-column-gap: 20px;
}
Das Ergebnis zeigt Ihnen Abbildung 2.11.
Abbildung 2.11
Sehr schön! Der Text fließt nun in zwei Spalten mit einer hellen Trennlinie.
Mit einer Mehrspaltigkeit ist jedoch vorsichtig umzugehen, da der Benutzer es im
Web gewohnt ist, zu scrollen. Besonders bei kleinen Bildschirmen kann es somit vor-
kommen, dass ein mehrspaltiger Text nicht von oben bis unten angezeigt wird. Der
Benutzer wird so gezwungen, den Fließtext in Spalten zu lesen, aber auch ständig
Search WWH ::
Custom Search