HTML_CSS - Sparte HTML_CSS

CSS Layout

Eingetragen am 24.12.2006

Schon vor Jahren hatten ich mit tabellenfreien Layouts gearbeitet, bedingt durch die mangelhaften Browser, gerade mit Netscape traten immense Schwierigkeiten auf, beugte ich mich und layoutete meine Seiten mit den wildesten Tabellenkonstrukten.
Nun sind die Browser ziemlich ausgereift und machen Tabellen für das Layout überflüssig. Aber warum unbedingt auf Tabellen verzichten?
Tabellen sind für die Darstellung von Daten gedacht, nicht für das Layout, ausserdem ist mit Containern erheblich weniger Code notwendig.
Das Aussehen und die Eigenschaften eines Containers wird in einer externen Datei definiert und erspart uns jede Menge Code und Arbeit.

Weitere Vorteile (Abriss):

Man erhält automatisch barrierearme Websiten, die auch in PDA`s lesbar und tauglich für Textbrowser sind.
Schlanker Code wird von Suchmaschinen mit besserem Ranking belohnt
Es ist bedeutend einfacher, validen Code zu schreiben

Hier nur ein Beispiel für eine Struktur mit einem
header (für eine Grafik, Logo u.s.w.), einer linken Menüleiste, dem eigentlichen Seiteninhalt und einem footer.

Beispiel

CSS-Code:

body {
color:black;
background-color:white;
}
#header {
height: 2em;
text-align:center;
border: 1px solid red;
}
#navi {
width:200px;
float:left;
border: 1px solid blue;
}
#content {
margin-left: 200px;
border: 1px solid black;
min-height:10em;
}
#footer {
text-align:center;
clear:both;
border: 1px solid green;
}

HTML-Code:

<body>
<div id="header">
  Header
</div>

<div id="navi">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
  </ul>

</div>
<div id="content">
 Seiteninhalt
</div>
<div id="footer"></div>
</body>

Bisherige Kommentare: Kommentar schreiben»