Techniken für WCAG 2.0

Zum Inhalt

-

C18: Benutzung von CSS margin- und padding-Regeln zum Layout-Design anstelle von Spacer-Images

Anwendbarkeit

Alle Techniken, die CSS unterstützen

Die Technik bezieht sich auf:

Anmerkungen zur Unterstützung durch Benutzeragenten und assistierende Techniken

Auf der Microsoft Windows Plattform benutzen Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 im „quirks mode“ und Internet Explorer 7 im „quirks mode“ ein „box model“, das von den CSS-Spezifikationen des W3C abweicht: in diesen Browser-Versionen erhöht der rechte und linke Innenabstand (padding) und der rechte und linke Rahmen nicht die gesamte Breite eines Elements, so dass der Raum für den Inhalt innerhalb eines solchen Elements enger ist. (Dieses Verhalten ist bekannt als „box model bug“.) Internet Explorer 5.5 unter Mac OS und Internet Explorer 6 und 7 unter Windows im „standards compliant mode“ benutzen das in den CSS-Spezifikationen des W3C definierte „box model“.

Beschreibung

Webdesigner benutzen manchmal Platzhalter-Bilder (normalerweise 1x1 Pixel große, transparente GIFs) zur besseren Kontrolle über das Layout, zum Beispiel in Tabellen oder um einen Absatz einzurücken. Cascading Style Sheets (CSS) ermöglichen allerdings eine ausreichende Kontrolle über das Layout, um damit Platzhalter-Bilder zu ersetzen. Die CSS-Eigenschaften für Ränder und Innenabstand können alleine oder in Kombination benutzt werden, um das Layout zu steuern. Die margin-Eigenschaften ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' und in Kurzschrift 'margin') können bei jedem Element benutzt werden, das als Block angezeigt wird; sie fügen Platz außerhalb eines Elements hinzu. Die padding-Eigenschaften ('padding-top', 'padding-right', 'padding-bottom', 'padding-left' und in Kurzschrift 'padding') können bei jedem Element benutzt werden; sie fügen Platz innerhalb des Elements hinzu.

Beispiele

Beispiel 1

Das folgende Beispiel besteht aus zwei Teilen: dem CSS-Code, der einen Rand auf allen Seiten der Tabelle und einen Innenabstand für die Tabellenzellen festlegt; und dem HTML-Code für die Tabelle, der keine Platzhalter-Bilder benutzt und nicht innerhalb einer anderen Tabelle verschachtelt ist.

Code-Beispiel:

			
              table { margin: .5em; border-collapse: collapse; } 
              td, th { padding: .4em; border: 1px solid #000; }

            ...

              <table summary="Titles, authors and publication dates of books in Web development category">
                <caption>Books in the category 'Web development'</caption>
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Author</th>
                    <th>Date</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>How to Think Straight About Web Standards</td>
                    <td>Andrew Stanovich</td>
                    <td>1 April 2007</td>
                  </tr>
                </tbody>
              </table>

            

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Für diese Technik gibt es keine Tests.