Markup

Wie ändere ich per CSS die Anordnung meiner »Spalten«

Oftmals fragt man sich, wie ein Layout am besten aufgebaut sein sollte, um nicht nur den „normalen“ Besuchern der Seite sondern auch den Screenreader-Benutzern einen logischen Seitenaufbau zu präsentieren. Denn nichts ist störender, als eine endlos lange Liste von Links oder sekundären Informationen überspringen zu müssen, um zum wichtigen Inhalt zu gelangen.

Bite Size Standards hat sich diesem Thema angenommen und das Erscheinungsbild einer typischen Webseite mit CSS verändert. Das Dokument besitzt in diesem Falle 3 Bereiche, die unterschiedliche Inhalte beinhalten. Jeweils ein DIV steht für den Hauptinhalt (main), die Navigation (nav) und Links (links) zur Verfügung:

<div id="main">[...content ...]</div>
<div id="nav">[...content...]</div>
<div id="links">[...content...]</div>

Nun werden diese „Spalten“ per CSS positioniert, um ein 3-Spalten-Layout zu erhalten:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    }

Um die Navigation auf die rechte Seite zu verschieben und den Hauptinhalt in die Mitte, benutzt man die CSS-Eigenschaft margin:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    margin-left:-70%;
    }
#links {
    float:left;
    width:20%;
    }

Möchte man aber die optische Erscheinung ändern, und beispielsweise die Links auf der linken und die Navigationsspalte auf der rechten Seite positionieren, nutzt man den negativen Abstand nun für den Bereich „links“:

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    margin-left:-90%;
    }

Fertig ist das neue Layout.

Dieses kleine Tutorial stammt von Bite Size Standards und ist hier zu finden: Understanding “Any order columns”

Kategorie: Markup

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.

1 Kommentare

  1. Ich habe das Beispiel gerade nachvollzogen. Im FF ist alles o.k. Im IE6 gibt es Probleme, sobald nicht mehr 100% des Viewports für die Spaltenaufteilung bereit stehen.

    Dazu reicht bereits ein padding bei body oder ein DIV, welches die drei Spalten einschließt und selbst mit einem seitlichen padding, margin oder width 100% belegt ist.

    Das sollte man nicht unerwähnt lassen. Auf das Problem wurde auch bereits in den Kommentaren im Bite Size-Artikel hingewiesen.

Kommentare sind geschlossen.