mehrspaltiges Web-Layout mit CSS 3 Columns in Mozilla und Webkit

Posted on by marcus

CSS3-Columns gibt es schon ewig, sie finden allerdings wenig Beachtung bis jetzt. Sie werden bis dato nur in Mozilla- und Webkit-basierten Browsern unterstützt, was natürlich zur Zeit bedeutet, dass Opera und der Internet Explorer da (noch) nicht mitmachen.  Aber bei gewissen Einsatz-Zwecken kann man das durchaus machen, finde ich, denn das Layout geht bei Nicht-Unterstützung nicht kaputt, sondern IE und Opera zeigen halt einfach einen längeren Absatz an, eben ohne Spalten – kein Drama, wie ich finde.

Das komplette Beispiel gibt es hier, so sieht das Ergebnis aus.

Der Code sieht folgendermaßen aus, kann man so als Basis nehmen und damit rumspielen, wenn Ihr mehr Spalten haben möchtet, dann einfach die column-count-Werte anpassen und so weiter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multi column test</title>
<style type="text/css">
#container {
width: 427px;
background-color: #CCC;
font:11px;
margin:auto;
padding:10px;
}
img {
width:100%;
}
#container p {
/*webkit*/
-webkit-column-count: 2;
-webkit-column-gap: 10px;
/* mozilla*/
-webkit-column-rule: 1px dashed black;
-moz-column-count: 2;
-moz-column-gap: 10px;
}
</style>
</head>
<body>
<div id="container">
<img src="paris.jpg" width="427" height="300" alt="Paris" longdesc="das ist das Filmplakat von Paris je t'aime" />
<h2>Paris je t'aime is a nice movie</h2>
<p>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.
</p>
</div>
</body>
</html>

Schreibe einen Kommentar