[CSS3] Multiple Columns

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

alogheo

Mitglied
22 Dezember 2010
694
2
18
23
zu Hause
[CSS3] Text in Spalten aufteilen (Zeitungslayout)

Wird unterstützt von:
Firefox, Chrome, Safari, Opera



Es gibt in CSS3 eine Möglichkeit, ganz einfach mehrspaltige Boxen zu erstellen.

Wir haben eine Box
HTML:
<div id="content">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
dessen Inhalt wir in mehrere Spalten, ähnlich wie in einer Zeitung, aufteilen wollen.


Dabei gibt es 2 Möglichkeiten, zum einen kann man festlegen, wie Breit eine Spalte sein soll, zum anderen kann man festlegen, wie viele Spalten vorhanden sein sollen.



Ich beginne mit der Möglichkeit #1:

Wieder einmal gibt es für die unterschiedlichen Browser unterschiedliche Anweisungen:
coloumn-width (W3C-Standart für Opera)
-moz-column-width für den FF und
-webkit-column-width für Chrome & Safari.

Der Wert der ...-column-width legt die Spaltenbreite fest.

Bsp:
Code:
#content
{
     width: 800px;
    [B][COLOR=navy] -moz-column-width: 200px;[/COLOR][/B][COLOR=black]    /* teile die Box in Spalten mit einer Breite von je 200px */[/COLOR][B][COLOR=navy]
     -webkit-column-width: 200px;[/COLOR][/B]
     [B][COLOR=navy]column-width: 200px;[/COLOR][/B]
}
Und auch für die Möglichkeit #2 wird zwischen den Browsern unterschieden:
-moz-column-count für den FF
-webkit-column-count für Chrome & Safari
column-count (W3C-Standart) für Opera

Diesesmal ist der Wert eine Zahl, die angibt, wieviele Spalten dargestellt werden

Bsp:
Code:
#leftbar
{
   width: 500px;
   [B][COLOR=navy]-moz-column-count: 2; [/COLOR][/B][COLOR=black]/* teile die Box in 2 gleich große Spalten  */[/COLOR]
   [B][COLOR=navy]-webkit-column-count: 2;
[/COLOR][/B][B][COLOR=navy]    column-count: 2;[/COLOR][/B]
[COLOR=black]}
[/COLOR]
Weiterhin besteht die Möglichkeit den Abstand zwischen den Spalten, mit column-gap, zu bestimmen.


Bsp:
Code:
#content
{
    width: 800px;
    -moz-column-width: 200px; 
    -webkit-column-width: 200px;
    column-width: 200px;
    [B][COLOR=navy]-moz-column-gap: 20px;[/COLOR][/B] /* Setze den Abstand zwischen den Spalten auf 20px */
    [B][COLOR=navy]-webkit-column-gap: 20px;[/COLOR][/B]
    [B][COLOR=navy]column-gap: 20px;[/COLOR][/B]
}
Und zu guter letzt kann man noch einen Rand zwischen den Spalten ziehen.
Dafür dient -moz-column-rule bzw. -webkit-column-rule. Die Werte sind die die selben, wie bei einem CSS-Rahmen, also
Code:
 column-rule: [I]farbe style breite[/I];
Bsp:
Code:
  #content
  {
     width : 800px ;           
     -moz-column-width: 200px; 
     -webkit-column-width: 200px;
     column-width: 200px;
     -moz-column-gap: 20px;
     -webkit-column-gap: 20px;
     column-gap: 20px;
     [B][COLOR=navy]-moz-column-rule: 1px solid black;[/COLOR][/B]
     [B][COLOR=navy]-webkit-column-rule: 1px solid black;[/COLOR][/B]
     [B][COLOR=navy]column-rule: 1px solid black;[/COLOR][/B]
  }
Das ganze sieht dann z.B. so aus: CSS3 Multiple-Coloumns



[UPDATE]

Für z.B. Überschriften, die über mehrere Spalten hinweg gehen sollen, kann man dies mit
Code:
-webkit-column-span: all;
column-span: all;
festlegen, das funktioniert momentan aber nur in Chrome & Opera.

[/UPDATE]
 
Zuletzt bearbeitet: