Layout ohne Tabellen
Grundlagen
Noch vor einigen Jahren kam es häufig vor, dass man beim Blick in den Quellcode einer Webseite mit einem endlosen Tabellensalat konfrontiert wurde und auch heute noch kursieren im Internet auf einschlägigen Websites Designvorlagen/Templates, die im Wesentlichen auf Tabellen im HTML-Code basieren. Ich möchte hier gar nicht auf die Nachteile derartiger Designvorlagen eingehen. Jeder Webdesigner, der einmal in die Situation kam, ein derartiges Layout anzupassen bzw. zu erweitern, weiß ein Lied davon zu singen, wie umständlich das ist. Ich möchte daher hier an Hand einiger Beispiele die Grundzüge der Gestaltung eines Website-Layouts mit frei positionierbaren div-Layern erklären.
Bevor ich mit meinen Erklärungen beginne, möchte ich noch darauf hinweisen, dass die hier bereitgestellten Informationen teilweise auf einem Tutorial der Website stichpunkt.de basieren. Sie sind dort aber nicht mehr verfügbar.
Einfaches Zentrieren
Ich fange mit ganz einfachen beispielen und Sachverhalten an. Zunächst die Grundfrage: Wie zentriert man einen Inhaltsblock? Hierfür gibt es mehrere Möglichkeiten. Schauen wir uns den Quellcode einer derartigen Datei an:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Einfaches Zentrieren</title>
<style>
body {
margin:20px;
padding:0px;
text-align:center;
background-color:olive;
font-family:sans-serif;
}
#box {
width:400px;
margin:0px auto;
padding:15px;
text-align:left;
color:olive;
background-color:silver;
}
#box p {
font-size:110%;
}
a {
color:white;
font-weight:bold;
}
</style>
</head>
<body>
<div id="box">
<h1>Einfaches Zentrieren</h1>
<p>Diese Beispielseite demonstriert das einfache Zentrieren einer div-Box in der Mitte einer Webseite.</p>
</div><!-- Ende #box -->
</body>
</html>
Anders als erwartet findet der ohnehin veraltete <center>-Tag hier gar keine Verwendung. Die Zentrierung wird vielmehr dadurch erreicht, dass für das zu zentrierende Element eine Breite festgelegt wird und der linke und rechte Rand mit auto festgelegt wird.
#box {
width:400px;
margin:0px auto;
...
}
Einfaches Zentrieren mit flexibler Breite
Im ersten Beispiel war die Breite der div-Box festgelegt. Wenn sie sich an die Breite des Browserfesnters anpassen soll, dann muss man anders vorgehen.
body {
margin:20px 100px;
padding:0px;
text-align:center;
background-color:olive;
font-family:sans-serif;
}
#box {
width:100%;
padding:15px;
text-align:left;
color:olive;
background-color:silver;
}
Hier wird beim übergeordneten Element eine feste Breite für den linken und rechten Rand festgelegt. Die Box selbst hat eine Breite von 100%.
Inhalt und absolut positioniertes Menü
Jetzt wird es interessanter. Es kommen Beispiele mit zwei oder auch mehr Inhaltsblöcken. Im ersten Beispiel wird das Menü links absolut positioniert, der Inhaltsblock rechts daneben hat einen entsprechden Abstand zum Rand, ansonsten eine flexible Breite.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mit absolut positioniertem Menü</title>
<style>
body {
margin: 20px;
background-color:olive;
font-family:sans-serif;
}
#menu {
position: absolute;
padding-left:5px;
top: 20px;
left: 20px;
width: 130px;
background-color: silver;
}
#inhalt {
margin-left: 150px;
background-color: #ffffc6;
}
#inhalt p {
font-size:110%;
}
</style>
</head>
<body>
<div id="menu">
<h3>Menü</h3>
</div><!-- Ende #menu -->
<div id="inhalt">
<h1>Mit absolut positioniertem Menü</h1>
<p>Der Menüblock links ist absolut positioniert. Der Inhaltsblock hat eine flexible Breite. Bei beiden Blöcken richtet sich die Höhe nach dem Umfang des Inhaltes.</p>
</div><!-- Ende #inhalt -->
</body>
</html>
Menü und Inhalt floaten
Die absolute Positionierung hat eine Reihe von Nachteilen. Deutlich flexibler ist es, die CSS-Eigenschaft float zu nutzen. Dadurch können Elemente gewissermaßen automatisch nebeneinander platziert werden. Zu beachten ist dabei aber, dass nach einem floatenden Element das Floaten mit clear:both beim Folgeelement aufgehoben werden muss.
body {
margin: 20px;
background-color:olive;
font-family:sans-serif;
}
#menu {
float: left;
padding-left:5px;
margin-right: 20px;
width: 130px;
background-color: silver;
}
#inhalt {
float: left;
width: 78%;
background-color: #ffffc6;
}