CSS-Formatierung von Sitemaps, Beispiel 25

• HTML und CSS

  • Dokumentstammbaum
  • Dokumententypen
  • Die Anbindung von Style-Sheets
  • CSS-Validation

• CSS-Konzepte und Grundlegendes

  • Die 80 wichtigsten CSS-Definitionen
  • Regelaufbau
  • Die float-Regeln übersetzt
  • Die Kaskade
  • Spezifizität
  • CSS-Wertangaben
  • Farbwerte
  • Längenwerte
  • Prozentwerte
  • Syntax der Wertangaben in der Spezifikation
  • Änderungen und Ergänzungen in CSS 2.1

• Box-Modell und Visuelle Formatierung

  • Das Modell der Visuellen Formatierung
  • Visuelle Formatierung genau genommen: Breite und Höhe
  • Das Box-Modell
  • Praktische Beispiele für collapsing margins
  • Das Line-Box-Modell
  • Zusammenhang zwischen display, position und float

• Sonstiges

  • Tabellenformatierung mit CSS
  • Behandlung von Medien in CSS
  • Regeln für Seitenumbrüche

• Einschränkungen und Workarounds

  • Hacks am Box-Modell
  • position: fixed auch für IE/Win
  • Dynamische Pseudoklassen und benannte Anker
  • Der Unterstrich

Das Style-Sheet dieser Seite:

div#sitemap {
    background: #fff;
    padding: 1em;
    border: 1px solid #ccc;
    margin: 0 auto;
    width: 700px;
    }
#sitemap ul.columns {
    padding: 0.5em;
    border: none; 
    margin: 0.45em;
    width: 200px;
    float: left;
    }
#sitemap ul {
    margin-left: 0;
    padding-left: 0;
    }
#sitemap li {
    list-style-type: none;
    margin: 3px 0;
    }
#sitemap .divider {
    clear: both;
    }
#sitemap ul.columns {
    background: url(//graphics/css-sm-01.gif)
                no-repeat;
    }
#sitemap h4 {
    color: #fffef0;
    background: #0024b8;
    padding: 1px;
    } 

Das HTML für die Sitemap:

<div id="sitemap">
<ul class="columns">
<li><h4>HTML und CSS</h4>
  <ul>
  <li><a href="#">Dokumentstammbaum</a></li>
  <li><a href="#">Dokumententypen</a></li>
  <li><a href="#">Die Anbindung von Style-Sheets</a></li>
  <li><a href="#">CSS-Validation</a></li>
  </ul>
</li>
</ul>
<ul class="columns">
<li><h4>CSS-Konzepte und Grundlegendes</h4>
  <ul>
  <li><a href="#">Die 80 wichtigsten CSS-Definitionen</a></li>
  <li><a href="#">Regelaufbau</a></li>
  <li><a href="#">Die <code class="css">float</code>-Regeln übersetzt</a></li>
  <li><a href="#">Die Kaskade</a></li>
  <li><a href="#">Spezifizität</a></li>
  <li><a href="#">CSS-Wertangaben</a></li>
  <li><a href="#">Farbwerte</a></li>
  <li><a href="#">Längenwerte</a></li>
  <li><a href="#">Prozentwerte</a></li>
  <li><a href="#">Syntax der Wertangaben in der Spezifikation</a></li>
  <li><a href="#">Änderungen und Ergänzungen in CSS 2.1</a></li>
  </ul>
</li>
</ul>
<ul class="columns">
<li><h4>Box-Modell und Visuelle Formatierung</h4>
  <ul>
  <li><a href="#">Das Modell der Visuellen Formatierung</a></li>
  <li><a href="#">Visuelle Formatierung genau genommen: Breite und Höhe</a></li>
  <li><a href="#">Das Box-Modell</a></li>
  <li><a href="#">Praktische Beispiele für collapsing <code class="css">margins</code></a></li>
  <li><a href="#">Das Line-Box-Modell</a></li>
  <li><a href="#">Zusammenhang zwischen <code class="css">display</code>, <code class="css">position</code> und <code class="css">float</code></a></li>
  </ul>
</li>
</ul>
<div class="divider"></div>
<ul class="columns">
<li><h4>Sonstiges</h4>
  <ul>
  <li><a href="#">Tabellenformatierung mit CSS</a></li>
  <li><a href="#">Behandlung von Medien in CSS</a></li>
  <li><a href="#">Regeln für Seitenumbrüche</a></li>
  </ul>
</li>
</ul>
<ul class="columns">
<li><h4>Einschränkungen und Workarounds</h4>
  <ul>
  <li><a href="#">Hacks am Box-Modell</a></li>
  <li><a href="#">position: fixed auch für IE/Win</a></li>
  <li><a href="#">Dynamische Pseudoklassen und benannte Anker</a></li>
  <li><a href="#">Der Unterstrich</a></li>
  </ul>
</li>
</ul>
<div class="divider"></div>
</div>