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 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

Kommentare sind geschlossen.