3 Spalten Layout mit CSS (Beispiel)

Begonnen von Chris, 24 Dez 2008, 23:28

« vorheriges - nächstes »
Nach unten

Chris

24 Dez 2008, 23:28 Last Edit: 25 Dez 2008, 11:29 by Chris
Ein 3 Spalten Design mit CSS ist nicht so schwer umzusetzen wie es anfangs Aussieht. Mit den veralteten Tabellen die früher und auch heute noch oft anzutreffen sind war ein 3 Spalten Layout natürlich viel einfacher umzusetzen, hat man jedoch eine fertige Basis CSS mit einem HTML Grundgerüst dann geht die Arbeit deutlich schneller von der Hand.

Der HTML Quellcode den wir mit unseren CSS formatieren ist sehr kurz im Gegensatz zu einem Tabellen Layout. Anbei ein kurzes Beispiel für ein mögliche 3 Spalten Layout auf CSS Basis:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <title>3 Spalten CSS Layout</title>
        <style type="text/css">
        <!--
        #kopfspalte {
                 margin: 20px 20px 0px 20px;
                 padding: 10px;
                 border: 5px solid red;
                 background: #ccc;
                 height: 100px;
                 voice-family: "\"}\"";
                 voice-family:inherit;
                 height: 70px;
        }
        html>body #kopfspalte {
                height: 70px;
        }
        #linkespalte {
                 position: absolute;
                 top: 120px;
                 left: 10px;
                 margin: 20px;
                 padding: 10px;
                 border: 5px solid red;
                 background: #ccc;
                 width: 150px;
                 voice-family: "\"}\"";
                 voice-family:inherit;
                 width: 120px;
        }
        html>body #linkespalte {
                width: 120px;
        }
        #mitte {
                 margin: 5px 190px 20px 190px;
                 padding: 10px;
                 border: 5px solid red;
                 background: #ccc;
        }
        #rechtespalte {
                 position: absolute;
                 top: 120px;
                 right: 10px;
                 margin: 20px;
                 padding: 10px;
                 border: 5px solid red;
                 background: #ccc;
                 width: 150px;
                 voice-family: "\"}\"";
                 voice-family:inherit;
                 width: 120px;
        }
        html>body #rechtespalte {
                width: 120px;
        }
        div {
                text-align:center;
        }
        -->
        </style>
</head>

<body>
        <div id="kopfspalte">Header Spalte</div>
        <div id="linkespalte">Linke Spalte</div>
        <div id="mitte">Mittlerer Inhaltsbereich</div>
        <div id="rechtespalte">Rechte Spalte</div>
</body>

</html>


Nach oben