3 Spalten Layout: So wird es mit Faux Columns erstellt!

In diesem Tutorial soll Ihnen eine Möglichkeit gezeigt werden, wie man mit Div Tags drei gleiche lange Spalten hinbekommt. Das eigentlich unmögliche lässt sich mit einem einem simple Trick namens Faux Columns möglich machen.

Benötigt werden dafür Grafiken, die man mit einem Bildbearbeitungsprogramm wie Gimp erstellen kann.

Schritt 1

Erstellen Sie eine HTML Datei mit dem HTML Grundgerüst. Was in etwa so aussehen müsste:

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="css/styles.css" type="text/css" media="screen"/>
</head>

<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</body>

</html>

Der Doctype kann variieren, der gezeigte wäre eine gute Lösung, da man mit ihm kaum Fehler macht und gut HTML lernen kann. Auch wurde der Link zur CSS Datei gemacht, auch hier kann der Pfad, in diesem Fall css/style.css, unterschiedlich sein und muss angepasst werden.

Der Meta-Tag sagt welche Zeichen erlaubt sind, mit diesem sind alle Zeichen aus dem Deutschsprachigem Raum erlaubt. Nun kommt der Header dran.

Schritt 2

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="css/styles.css" type="text/css" media="screen"/>
</head>

<body>
<div id="header"><!--Anfang Header-->
</div><!--Ende Header-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</div>

</body>

</html>

Den Header kann man am besten leicht mit einem Div Tag erstellen. Es macht Sinn den Div’s id’s oder Klassen (class) zuzuweisen, damit man diese leicht in der CSS Datei definieren kann und es zu keine Verwechselungen kommt. Sie können den Header jetzt mit CSS designen:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p {
font-family: arial, serif;
font-size: 1em;
}

#header {
width: 100%;
background-color: #404040;
height: 100px;
}

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

p {

font-family: arial, serif;

font-size: 1em;

}

#header {

width: 100%;

background-color: #404040;

height: 100px;

}

Der Stern (*) ist ein Universal Selektor. Mit dem sagen Sie das alle Tags ohne eine margin oder padding Angabe immer margin: 0; und padding: 0; sind. HTML und Body bekommen height: 100%; damit der Footer, der später kommt, immer am unterem Rand bleibt, dann definieren Sie den p Tag, dass kann man ohne bedenken ganz individuell machen.

Ich habe die gut zu lesende Arial Schrift und die Schriftgröße 1em gewählt. 1em entspricht 16px hat, aber denn Vorteil, dass der Webseiten Besucher im Browser die Schriftgröße verändern kann. Für Sehbehinderte Menschen ist das ein Segen und sie sorgen dafür, dass das Web etwas barrierefreier wird. Auch wurde der Header definiert. Der Code sollte selbsterklärend seien.

Mit width: 100%; nimmt Header die volle Breite eine, mit background-color: #040404; wird der Header grau und mit height: 100px; wird der Header 100px hoch

Schritt 3

Erstellen Sie nun Grafiken für die 3 Spalten oder nehmen Sie die unten aufgeführten. Ich erstelle nur zwei, eine für die Navigation und eine für die Sidebar. Der Content (Der Content ist der Hauptbereich einer Webseite) bleibt weiß damit die Schrift gut zu lesen ist. Die jetzt folgenden Grafiken dürfen sie gerne auch für Ihre Webseite verwenden.

Grafiken:

Navigation

200×5

Sidebar

200×5

Schritt 4

Jetzt können Sie die Navigation erstellen und gestallten, dafür sollten Sie ein Div Tag erstellen mit der id=navi. Umhüllen sie dieses Div wiederum mit einem weiterem Div mit der id wrapper. Der HTML Code müsste folgendermaßen aussehen:

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="neustyles.css" type="text/css" media="screen"/>
</head>

<body>
<div id="header"><!--Anfang Header-->
</div><!--Ende Header-->
<div id="wrapper"><!--Anfang Wrapper-->
<div id="navi"><!--Start Navigation-->
</div><!--Ende Navigation-->
</div><!--Ende Wrapper-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

Gestalten Sie nun die Navigation mit Css, damit der Trick mit den Spalten aufgeht, müssen sie body das Hintergrundbild für die Navigation zuweisen und mit repeat-y dafür sorgen, dass sich das Hintergrundbild vertikal wiederholt, was für die Faux Columns erforderlich ist.

Der Pfad zu dem Bild ist bei jedem unterschiedlich und kann nicht einfach übernommen werden. Die Navigation wird 200px breit, 100% hoch und mit float : left am linken Browserrand platziert. Jetzt müssten sie diesen Code zu ihrer Css Datei hinzugefügt haben:

body {
background: transparent url(links.gif) repeat-y top left;
}

#navi {
width: 200px;
float: left;
height: 100%;
}

body {

background: transparent url(links.gif) repeat-y top left;

}

#navi {

width: 200px;

float: left;

height: 100%;

}

Die rechte Spalte wird genau so wie die linke erstellt.

Die 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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="neustyles.css" type="text/css" media="screen"/>
</head>

<body>
<div id="header"><!--Anfang Header-->
</div><!--Ende Header-->
<div id="wrapper"><!--Anfang Wrapper-->
<div id="navi"><!--Start Linke Spalte(Navigation)-->
</div><!--Ende Linke Spalte-->

<div id="sidebar"><!--Anfang Sidebar-->
</div><!--Ende Sidebar-->
</div><!--Ende Wrapper-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

Das wird zur CSS Datei hinzugefügt

#sidebar {
float: right;
width: 200px;
height: 100%;
}

#sidebar {

float: right;

width: 200px;

height: 100%;

}

Schritt 5

Der Content Bereich ist leicht zu erstellen, einfach ein div id=content nach der sidebar hinzufügen, mit margin für die richtigen Außenabstände sorgen ( die Reihenfolge bei den Zahlen ist oben, rechts, unten, links ) und die Höhe auf 100% setzen

Der jetzige HTML Code:

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="neustyles.css" type="text/css" media="screen"/>
</head>

<body>
<div id="header"><!--Anfang Header-->
</div><!--Ende Header-->
<div id="wrapper"><!--Anfang Wrapper-->

<div id="navi"><!--Start Linke Spalte(Navigation)-->
</div><!--Ende Linke Spalte-->

<div id="sidebar"><!--Anfang Sidebar-->
</div><!--Ende Sidebar-->

<div id="content"><!--Anfang Content-->
</div><!--Ende Content-->

</div><!--Ende Wrapper-->
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Das wird zur CSS Datei hinzugefügt:

#content {
margin: 0 210px 0 200px;
min-height: 100%;
height: 100%;
}

#content {

margin: 0 210px 0 200px;

min-height: 100%;

height: 100%;

}

Schritt 6

Zum Schluss kommt der leicht zu erstellende Footer dran außerdem erstellen wir ein neues <div> vor dem Ende des Wrappers und clearen es auf beiden Seiten, dass sorgt dafür, dass das Layout in allen Browsern korrekt angezeigt wird.

Das Div id=footer wird vor dem schließenden Body Tag hinzugefügt und ihm folgende CSS Eigenschaften geben: width: auto; für die maximale Breite, height: 2em; für die richtige Höhe und background-color: #404040; für ein schönes Grau.

Der fertige HTML Code

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 Spalten Layout mit Faux Columns</title>
<link rel="stylesheet" title="Default" href="css/styles.css" type="text/css" media="screen"/>
</head>

<body>
<div id="header"><!--Anfang Header-->
</div><!--Ende Header-->
<div id="wrapper"><!--Anfang Wrapper-->

<div id="navi"><!--Start Linke Spalte(Navigation)-->
</div><!--Ende Linke Spalte-->

<div id="sidebar"><!--Anfang Sidebar-->
</div><!--Ende Sidebar-->

<div id="content"><!--Anfang Content-->
</div><!--Ende Content-->

<div id="clear"><!--Anfang Clear-Div-->
</div><!--Ende Clear-Div-->

</div><!--Ende Wrapper-->

<div id="footer"><!--Anfang Footer-->
<p>Footer Inhalt</p>
</div><!--Ende Footer-->
</body>
</html>

Der fertige CSS Code
 * {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p {
font-family: arial, serif;
font-size: 1em;
}

#header {
width: 100%;
background-color: #404040;
height: 100px;
}

body {
background: transparent url(links.gif) repeat-y top left;
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
background: transparent url(rechts.gif) repeat-y top right;
}

#navi {
width: 200px;
float: left;
height: 100%;
}

#content {
margin: 0 210px 0 200px;
min-height: 100%;
height: 100%;
}

#sidebar {
float: right;
width: 200px;
height: 100%;
}

#clear {
clear: both;
}

#footer {
width: auto;
background-color: #404040;
height: 2em;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>3 Spalten Layout mit Faux Columns</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

<p>Footer Inhalt</p>

</div>

</body>

</html>

Der fertige CSS Code

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

p {

font-family: arial, serif;

font-size: 1em;

}

#header {

width: 100%;

background-color: #404040;

height: 100px;

}

body {

background: transparent url(links.gif) repeat-y top left;

}

#wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

background: transparent url(rechts.gif) repeat-y top right;

}

#navi {

width: 200px;

float: left;

height: 100%;

}

#content {

margin: 0 210px 0 200px;

min-height: 100%;

height: 100%;

}

#sidebar {

float: right;

width: 200px;

height: 100%;

}

#clear {

clear: both;

}

#footer {

width: auto;

background-color: #404040;

height: 2em;

}

3 Spalten Layout: So wird es mit Faux Columns erstellt!

Schritt 1

Schritt 2

Schritt 3

Grafiken:

Schritt 4

Schritt 5

Schritt 6

Der fertige HTML Code

Sehr schnell CSS lernen: