Auf einer einfachen Webseite wie dieser hier,
gibt es einen Bereich für das Menü, also die
Navigation und einen Bereich für den Inhalt der
Seite.
In HTML 5 sind hierfür bestimmte <div>-Tags
definiert, die eine semantische Bedeutung haben. In der HTML-Datei
wird die Navigation in <nav></nav>
eingeschlossen.
Genauso steht das <section>-Tag für einen Bereich,
in dem sich ein inhaltlich abgeschlossener Bereich der Seite
befindet.
Auf html-seminar.de kannst du nachlesen, welche weiteren HTML-Tags es zur inhaltlichen Strukturierung der Seite gibt.
Diese <nav>- und <section>-Tags usw. sind das gleiche wie Divisions, mit dem Unterschied dass zusätzlich in dem Tag schon die Information steckt, welche Funktion dieser Bereich hat: Inhalt, Menüführung, Randbemerkung ...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="seitenaufbau.css" type="text/css" rel="stylesheet"> <title>Seitenaufbau Beispiel</title> </head> <body> <nav>Hier kommt das Menü rein</nav> <section>Inhalt und noch mehr Inhalt ... Inhalt und noch mehr Inhalt ... </section> </body> </html>
Im CSS-File kann dann definiert werden, wie der nav- und
section-Bereich dargestellt werden sollen. Z.B. für diese Seite
wurden in seitenaufteilung.css definiert:
nav {
position: absolute;
left: 0;
top: 0;
width: 150px;
background-color: #ffeeee;
height: 100%;
}
section {
position: absolute;
right: 0;
top: 0;
margin-left: 150px;
background-color: #efefef;
padding: 10px;
height: 100%
}
position: absolute; sorgt dafür, dass die
Elemente absolut positioniert werden, nicht relativ zu etwas
anderem.
Der Navigationsbereich ist also absolut oben (top: 0;) und absolut links(left:
0;).
Für den Navigationsbereich ist eine Breite festgelegt: width: 150px; und damit der Navigationsbereich nicht in den Inhaltsbereich hineinragt, ist für den Inhalt eine linke Grenze (margin-left: 150px;) definiert, genau so breit wie der Navigationsbereich.
Baue diese Seite hier nach.
Baue auch diese Seite nach.
Schreibe eine HTML- und eine separate CSS-Datei. Definiere zwei Divisions, beide 100 px hoch und breit. Positioniere eine Box oben links, die andere unten rechts in der Fensterecke.
Da es sehr, sehr breite Monitore gibt, soll die Seite so gestaltet
sein, dass auch bei Vollbild die Zeilen nicht zu lang werden und der
Inhalt lesbar bleibt. Dies wird erreicht, indem um die Navigations-
und Inhaltsbereiche ein weiterer Bereich "seite" gelegt wird.
Definition im CSS-File:
#seite {
position: relative;
margin: 0 auto; /* mittig */
width: 600px;
background-color: #ddddff;
}
Hier wird eine maximale Breite der Seite width:
600px; festgelegt.
Wichtig ist hier die Deklaration position: relative;
Dies bedeutet,
dass das Element relativ zu der Position platziert wird, an der der Browser das
Element im normalen Fluss der Elemente platzieren würde. Wenn die Eigenschaften
top, left, bottom, right nicht definiert sind, hat dies als einzige Auswirkung,
dass Elemente, die sich in dem relativ
positionierten Element befinden, auch relativ zu diesem positioniert
werden. Das sind hier die Container <nav> und <section>! Diese
werden jetzt nicht mehr an den Fensterrändern ausgerichtet sondern an dem Div-Container "seite".
Beispiele zum Verständnis der Positionierung
In dieser ZIP-Datei findest du einige Dateien der Webseite individuellesfoerdern.de. Entpacke die ZIP-Datei (Rechtsklick, Entpacken). Die zugehörige CSS-Datei design.css fehlt. Erstelle eine solche Datei und verleih der Seite ein schönes Aussehen.
