Hauptmenü

Untermenü

CSS3 - Mehrspaltige Layouts

1. Zeitung im Internet

Von mehrspaltigen Layouts, die sich dem Text anpassen, träumen Online-Redakteure schon seit Jahren. Allerdings gab es dafür nie eine zufrieden stellende Lösung. Mit CSS3 hat man nun endlich die Möglichkeit dazu. Leider tun such die Browser damit immer noch ein wenig schwer. Denn halbwegs sauber damit umgehen können nach meinen Tests nur der Chrome, Safari, und man staune, der Internet Explorer 10. Firefox und vor allem Opera haben leider den einen oder anderen Hau weg. Den IE9 könnt ihr dagegen komplett in die Tonne kloppen.

2. Vorab schon mal ein Beispiel

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.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

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.

3. Und dazu der HTML-Quellcode


<div class="multicolumn">
  <p>
    Lorem ipsum dolor sit ametconsetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam eratsed diam voluptua. 
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergrenno sea takimata sanctus est 
    Lorem ipsum dolor sit ametconsetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam eratsed diam voluptua. 
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergrenno sea takimata sanctus est.            
  </p>
  <h2>
    Lorem ipsum dolor sit ametconsetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam eratsed diam voluptua.           
  </h2>
  <p>
    Lorem ipsum dolor sit ametconsetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam eratsed diam voluptua. 
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergrenno sea takimata sanctus est 
    Lorem ipsum dolor sit amet.
  </p>
  <p>
    Lorem ipsum dolor sit ametconsetetur sadipscing elitr, 
    sed diam nonumy eirmod tempor invidunt ut labore et 
    dolore magna aliquyam eratsed diam voluptua. 
    At vero eos et accusam et justo duo dolores et ea rebum. 
    Stet clita kasd gubergrenno sea takimata sanctus est 
    Lorem ipsum dolor sit amet.
  </p>
</div>

4. Ohhhhhhhhh!

Tolle Sache, nicht wahr? Aber was sagt Radio Eriwan dazu?

"Im Prinzip schon. Aber habt ihr euch das mal mit unterschiedlichen Browsern angesehen?" [Radio Eriwan auf die Frage, ob man das schon einsetzen kann]

Traurig aber wahr

Bei dieser wirklich tollen Neuerung steht uns natürlich mal wieder etwas im Weg. Und zwar die ach so hoch geschätzten Browserhersteller. Und damit ihr lernt, was wie das möglich ist und wann welcher Browser rumzickt, kommen wir nun zu den Details.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt