Tutorials
[ Zurück ]


Mehrspaltenlayout in CSS


Dieses Tutorial beschäftigt sich mit folgendem Thema:
- mehrspaltiges Layout in CSS
- mit gleichohen Spalten, unabhängig vom Text
- unter Verwedung von Faux Columns (Hintergrundgrafik, eine andere Möglichkeit, für alle Browser, ist mir derzeit nicht bekannt).

1. HTML Datei

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>   TITEL   </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<div id="overall">
    <div id="links">
        LINKS <br />
      
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
    </div>
  
    <div id="mitte">
        MITTE <br />
      
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
    </div>
  
    <div id="rechts">
        RECHTS <br />

        text <br />
        text <br />
        text <br />
        text <br />
        text <br />
    </div>
    <div id="clearer"></div>
</div>

</body>
</html>

Erklärung:

In der HTML Datei werden 3 DIV Container erstellt. Diese 3 Container liegen in einem weiteren Container der hier "overall" heißt. Dieser Container erleichtert die Positionierung und wird außerdem für die Darstellung von gleichhohen DIVs benötigt.
Mit

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

wird die Stylesheet Datei eingebunden, die in diesem Fall "style.css" heißt.

2. Stylesheet

/* CSS Document - Mehrspaltenlayout */

html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
  
    text-align: center; /* IE < 6*/
}

#overall {
    width: 600px;
    margin: 0 auto;
    background-image: url(bg.jpg);
    background-repeat: repeat-y;
    background-position: top;
}

#links {
    width: 200px;
    float: left;
    background-color: #CCFFFF;
  
    border-bottom: 1px solid red;
}

#mitte {
    width: 200px;
    float: left;
    background-color: #99CDFF;
  
    border-bottom: 1px solid red;
}

#rechts {
    width: 200px;
    float: right;
    background-color: #0174E9;
  
    border-bottom: 1px solid red;
}

#clearer {
    clear: both;
}

Erklärung:

Die Container "links", "mitte" und "rechts" werden gefloatet damit sie nebeneinander sind und mit der gewünschten Hintergrundfarbe belegt.
Zusätzlich habe ich hier noch einen Rahmen unten von 1px in roter Farbe hinzugefügt, damit man dann im Screenshot sieht, wie lange die DIVs wirklich sind.

Der Container "clearer" sorgt dafür, dass sich der Container "overall" mit den anderen Containern ausdehnt (je nach länge des Textes).

Der Container "overall" bekommt die Gesamtbreite aller enthaltenen DIVs und wird mit einer Hintergrundgrafik ausgestettet.
Diese Grafik ist nicht höher als ein paar Pixel. Sie wird oben positioniert und entlang der Y-Achse wiederholt, bis das DIV zu Ende ist.
Die Grafik enthält genau die Breite aller DIVs und deren Hintergrundfarbe. So können gleichhohe DIVs simuliert werden (Faux Columns).

Das Bild sollte eigentlich alles erklären.
gelber Rahmen = overall
roter Rahmen = Ende der DIVs
Hier der Link zum Layout: bzstyle.cwsurf.de/styletest/fauxcolumns

Ich hoffe mein Tutorial ist verständlich und hat dir geholfen.


Erstellt:20.03.09 16:49
Autor: bzstyle

Letzte Änderung: 20.03.09 17:02
Geändert von: bzstyle

Bewertungen:4
Bewertung: 4.3

Freigeschaltet: Ja
Views 4028

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 72] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE