HTML Container-Struktur
Basics
Damit eine Website zentriert und strukturiert werden kann, verwendet man sogenannte HTML-Container. Das sind entweder vordefinierte HTML-Tags oder einfache DIV-Container.
Für die Strukturierung der Website werden die vordefinierten HTML-Tags verwendet, die Bezeichnung der Container lässt bereits auf den Inhalt schließen:
header,nav,main,aside,footer,section,article,figure
Für die Zentrierung der Website oder sonstige Boxen und Container verwendet man den DIV-Tag welcher dann mit einer Klasse oder ID versehen wird:
<div id="wrapper"> ... </div>
HTML
Formatierung - CSS
Damit die Container eine bestimmte Größe bekommen oder richtig positioniert werden, müssen sie mit CSS-Angaben formatiert werden.
Die vordefinierten Tags können ganz einfach mit der Tag-Bezeichnung im CSS angesprochen werden, für den DIV-Container wrapper wurde eine ID definiert, welche dann im CSS angesprochen wird.
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #000;
background: #FFF;
}
#wrapper {
width: 780px;
margin: 0 auto;
}
header {
width: 780px;
height: 150px;
background-color: green;
}
nav {
width: 780px;
height: 50px;
background-color: blue;
}
main {
width: 780px;
min-height: 400px;
background-color: orange;
}
footer {
width: 780px;
height: 50px;
background-color: magenta;
}
Erweiterte Container-Struktur
Die Container-Struktur kann natürlich noch erweitert und an die persönlichen Layout-Wünsche angepasst werden.
Zum Beispiel sind hier auch mehrspaltige Layouts möglich.
2-Spalten Layout (main/aside)
Für ein zweispaltiges Layout wird die Container-Struktur noch um den Container aside erweitert und dann im CSS formatiert.
Um zwei Container nebeneinander positionieren zu können, wird im CSS für die betreffenden Container noch die Eigenschaft
float: left; benötigt.
Clearer - Seitenumbruch
Durch das float:left; bei den Containern main und aside wird der anschließende Container footer nicht mehr richtig dargestellt. Hier muss das floaten der Container durch einen sogenannten clearer durchbrochen werden. Dieser clearer funktioniert wie ein Seitenumbruch im Word und beginnt mit einer neuen Zeile
Der clearer wird im CSS als Klasse definiert und wird als leerer DIV-Container in der HTML-Struktur dort platziert, wo eine neue Zeile beginnen soll. In diesem Beispiel also nach aside und vor dem footer.
HTML
CSS
* {
box-sizing: border-box;
margin: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #000;
background: #FFF;
}
#wrapper {
width: 780px;
margin: 0 auto;
}
header {
width: 780px;
height: 150px;
background-color: green;
}
nav {
width: 780px;
height: 50px;
background-color: blue;
}
main {
width: 780px;
min-height: 400px;
background-color: orange;
float: left;
}
aside {
width: 280px;
min-height: 400px;
background-color: yellow;
float: left;
}
footer {
width: 780px;
height: 50px;
background-color: magenta;
}
.clearer {
clear: both;
}