Glumski.de
Letzte Änderung:
 am 15.12.2013
 © Lennart R. Baalmann
Inhalt dieser Seite:

HTML & CSS

Zum besseren Verständnis des Aufbaus dieser Seite gibt es an dieser Stelle eine Erläuterung zu Aufbau und Quellcode.
Eingeteilt ist diese Erläuterung in einen Abschnitt zur grundlegenden Struktur einer Seite. Es folgen Abschnitte für die verschiedenen Stylesheets (CSS) und schließlich für besondere Elemente, wie beispielsweise das Menü-Band.

Aufbau

Zur besseren Übersicht ist diese Seite in verschiedene Container unerteilt, die mit <div> eingeleitet werden und mit </div> enden. So ist die Kopfzeile beispielsweise in einem Container untergebracht, genauso wie die Kopfgrafik, das Menüband, der Inhalt, die Ankerliste und die Kästen zu Validierung und Änderungsinformation.
Dabei sind die letzten vier Elemente zusammen ebenfalls in einem Container untergebracht, da sie im logischen Aufbau den Inhalt bilden, im Kontrast zu den ersten drei Containern, die Kopf und Navigation umfassen. Auch der Fuß mit den Verweisen zu sämtlichen Unterseiten ist ein eigenständiger Container.

CSS - main

Das CSS-Dokument main.css ist als zentraler Stylesheet für die Seite angegeben. Es wird unabhängig von der Bildschirmgröße geladen und beginnt mit Einträgen wie @import url(largest.css);, um weitere Stylesheets einzufügen.
Nur zentrale Angaben werden in dieser Datei gelagert, beispielsweise die Schriftart oder -farbe. Damit die Angaben für sämtliche Container gelten, werden sie im body-Element gesetzt.
Weitere Angaben sind die Farben und Darstellungsarten von Verweisen. text-decoration: underline; unterstreicht sein entsprechendes Element, hier zum Beispiel a:hover, also einen Link, über den mit der Mausgefahren wird.
Auch entsprechende Attribute, die für alle Elemente einer Art auf der Seite gelten sollen, z.B. die Einrückungsart bei sämtlichen Aufzählungen oder die Rahmeninformationen für alle Tabellen, werden hier notiert.

CSS - largest

Das CSS-Dokument largest.css beinhaltet die Stylesheet-Angaben für große Bildschirme. Damit auch nur bei großer Breite des Browserfensters dieser Stylesheet interpretiert wird, ist zu Beginn das Dokuments die Zeile @media screen and (min-width:1430px) gesetzt, die das Stylesheet nur für Fenster ab einer Breite von 1430px erlaubt.
Bild Der Titelzeilen-div ist enthält über die Attribute width: 990px; und height: 40px; eine feste Größe; margin: 0 auto; sorgt dafür, dass der Container nicht senkrecht eingerückt wird, aber dennoch waagerecht mittig auf der Seite erscheint.
Ähnlich wird mit Kopfbild und Menü-Band verfahren, die neben entsprechenden Größenangaben noch margin: 5px auto 0; enthalten, um waagerecht mittig und um fünf Pixel senkrecht von dem darüber stehenen Container entfernt angezeigt zu werden.
Der Inhaltscontainer enthält nun andere Attribute. Seine Breite ist auf width: 1400px; angelegt, da er neben dem zentralen Textcontainer auch die Kästen zu Ankern, Validierung und Änderungsinformation tragen muss. Da die Höhe des Textcontainers unbekannt ist, wird height: auto; genutzt, für die einfachere Platzierung der „Kinder-Container” außerdem position: relative;.
Der Validierungskasten wird nun über die Attribute position: absolute; und left: 1200px; so platziert, dass seine linke Kante um 1200 Pixel von der linken Kante des Inhaltscontainers entfernt ist, die oberen Kanten jedoch übereinstimmen. Breite und Höhe sind wieder fest angegeben, außerdem wurde der Inhalt per padding-top: 5px; um fünf Pixel von der Oberkante des Kastens entfernt, sodass die Validierungs-Grafiken zentriert erscheinen. Es ist zu beachten, dass die padding-Angaben zur Elementhöhe dazugezählt werden müssen. In diesem Falle ist der Container zwar mit height: 37px; angegeben, seine tatsächliche Höhe beträgt jedoch 42px.
Der Kasten mit den Änderungsinformationen ist ähnlich platziert. position: absolute; und left: 1200px; lassen ihn bündig mit dem Validierungskasten erscheinen, durch top: 47px; wird er außerdem mit fünf Pixeln Abstand (47 minus die 42 Pixel der Höhe des Validierungskastens) unter diesem platziert. Die Breite ist mit nur width: 195px; angegeben; durch padding-left: 5px; zur Texteinrückung beträgt die tatsächliche Breite aber wieder 200px.
Einziger Unterschied zu diesen Attributen ist bei dem Anker-Container die Platzierung an der linken Seite des Inhaltscontainers. Aus diesem Grund wird left: 1200px; hier mit right: 1200px; ersetzt.
Bei dem Textcontainer wird nun wieder ähnlich wie bei den Kopfinhalten vorgegangen. margin: 0 auto; setzt ihn waagerecht mittig auf die Seite und die Breite ist nach altem Modell wieder auf 990px festgelegt. Da die Höhe je nach Textmenge unterschiedlich sein soll, ist sie über max-height: auto; dynamisch eingestellt. Aus optischen Gründen soll jedoch auch ein leerer Textcontainer eine gewisse Größe aufweisen, deshalb min-height: 200px;. Zuletzt wird mit text-align: justify; der Inhalt als Blocktext dargestellt.
Der Fuß ist ähnlich definiert, nur dass der Inhalt über text-align: center; zentriert wird.

CSS - moderate

Das CSS-Dokument moderate.css beinhaltet die Stylesheet-Angaben für mittelgroße Bildschirme. Damit auch nur bei mittelgroßen Breiten des Browserfensters dieser Stylesheet interpretiert wird, ist zu Beginn das Dokuments die Zeile @media screen and (max-width:1429px) and (min-width:1024px) gesetzt, die das Stylesheet nur für Breiten von 1024px bis 1429px erlaubt.
Bild Im Groben und Ganzen unterscheidet sich moderate nicht sehr von largest; die Angaben für Titelzeile, Kopfbild und Menü-Band sind identisch.
Erst der Inhaltscontainer benötigt andere Angaben: seine Breite ist beträgt nun dank width: 990px; nur noch 990px wie auch bei den Kopfelementen.
Der Validierungskasten ist nun linksbündig, dafür allerdings deutlich nach unten verschoben. Dass überflüssige left: 1200px; wird daher durch top: 285px; ersetzt. Dies verschiebt den Container um die 200px des Ankerkastens, die 75px der Änderungsinformationen sowie 10px zur sauberen Trennung nach unten.
Dem entsprechend fällt auch für den Kasten mit den Änderungsinformationen das left-Attribut weg. Die Angabe des top-Attributes ist außerdem auf 205px erhöht, um 5px unterhalb des Ankerkastens zu erscheinen.
Da der Anker-Container nun ebenfalls linksbündig platziert wird, ist sein left-Attribut ersatzlos gestrichen. Ansonsten verhält er sich wie das Pendant des largest-Stylesheets.
Die meisten Änderungen müssen für den Textcontainer vorgenommen werden. Zum Einen ist seine Breite auf 790px geschrumpft (990px des Inhaltscontainers minus die Breite von Anker, Änderungsinformation und Validierungskasten), zum Anderen ist er dadurch nicht mehr mittig platziert sondern nach rechts verschoben. position: relative; und left: 100px; nehmen diese Verschiebung vor.

CSS - small

Das CSS-Dokument small.css beinhaltet die Stylesheet-Angaben für kleine Bildschirme. Damit auch nur bei geringen Breiten des Browserfensters dieser Stylesheet interpretiert wird, ist zu Beginn das Dokuments die Zeile @media screen and (max-width:1023px) gesetzt, die das Stylesheet nur für Breiten bis zu 1023px erlaubt.
Bild Da der Platz auf so kleinen Bildschirmen rar ist, werden nur die wichtigsten Elemente angezeigt und an den verfügbaren Platz angepasst.
So hat die Titelzeile beispielsweise ihre feste Breite verloren und wird über width: 100%; auf die gesamte Fensterbreite gestreckt.
Kopfbild, Menü-Band, Anker, Validierungskasten und Änderungsinformationen werden durch display:none; gänzlich versteckt.
Der Inhaltscontainer ist mit width: 100%; ebenfalls auf die Gesamtbreite gestreckt und durch margin: 0; in keine Richtung eingerückt.
Selbiges gilt für den Textcontainer, der außerdem für die Darstellung des Fußes mit position: absolute; und top: 20px; um 20px nach unten verschoben wird.
Der Fuß wird über die bekannten Attribute ebenfalls auf Fensterbreite gestreckt und erhält eine feste Höhe von 20px. Mit position:absolute; und top: 40px; wird er direkt unter der Titelzeile platziert und bildet so eine spartanische aber funktionelle Menü-Leiste.

Menü-Band

Das Menü-Band ist ein recht komplexes Modul, das sowohl diverse HTML- als auch CSS-Elemente und -Attribute benötigt. Der grundlegende Aufbau auf HTML-Ebene sieht wiefolgt aus:
1. <div id="nav"> Container für das Menü-Band
2. | <ul class="menu"> Auflistung 'menu'
3. | | <li><a>Link</a> Lister mit Link zum Hauptmenüpunkt 1
4. | | | <ul> Auflistung 1
5. | | | | <li><a>Link</a></li> Lister mit Link zum Menüpunkt 1.1
5. | | | | <li><a>Link</a></li> Lister mit Link zum Menüpunkt 1.2
5. | | | | ... (Wiederholen von 5. für weitere Menüpunkte 1.x)
6. | | | </ul> Schließen der Auflistung 1
7. | | </li> Schließen des Listers von Hauptmenüpunkt 1
3. | | <li><a>Link</a> Lister mit Link zum Hauptmenüpunkt 2
4. | | | <ul> Auflistung 2
5. | | | | <li><a>Link</a></li> Lister mit Link zum Menüpunkt 2.1
5. | | | | <li><a>Link</a></li> Lister mit Link zum Menüpunkt 2.2
5. | | | | ... (Wiederholen von 5. für weitere Menüpunkte 2.x)
6. | | | </ul> Schließen der Auflistung 2
7. | | </li> Schließen des Listers von Hauptmenüpunkt 2
3. | | ... (Wiederholen von 3. bis 7. für weitere Hauptmenüpunkte)
8. | </ul> Schließen der Auflistung 'menu'
9. |</div> Schließen des Containers für das Menü-Band
Um die verschachtelte Aufzählung nun als Menü-Band darstellen zu lassen, müssen einige Ergänzungen per CSS hinzugefügt werden.
#nav ul {
 list-style-type: none;
 margin:0;
 width: 100%;
}
 Durch diese Deklaration hat die Auflistung 'menu' keine Aufzählungszeichen, ist nicht eingerückt, und nimmt die volle Breite des Elternelements (bzw. Fensters) an.
.menu li {
 float: left;
 position: relative;
 width: 165px;
}
 Hier wird eine feste Breite für alle Hauptmenüpunkte bestimmt. Es empfiehlt sich die Breite von #nav geteilt durch die Anzahl der Hauptmenüpunkte. Des Weiteren wird der Textumfluss gesteuert; die Hauptmenüpunkte werden so nebeneinander angezeigt.
.menu li ul {
 z-index:1;
 display: none;
 position: absolute;
}
 Wir legen nun fest, dass die Untermenüpunkte nicht durch andere Elemente verdeckt werden und machen sie gleichzeitig (für den unaktivierten Zustand) unsichtbar. Die absolute Positionierung sorgt dafür, dass eventuell folgende Texte (hier beispielsweise die Seitenüberschrift) nicht von dem sich aufklappenden Untermenü beeinflusst werden soll.
.menu li:hover ul {
 display: block;
}
 Wird der Hauptmenüpunkt nun mit der Maus überfahren (hover), dann wird das Untermenü sichtbar gemacht.
.menu li a {
 display: block;
}
 Dies muss eingefügt werden, damit der Verweis massiv angezeigt wird. Dadurch wirkt der gesamte Hauptmenüpunkt als Verweis und nicht nur der Teil, in dem der Verweistext steht.
Weitere Angaben wie Hintergrundbilder, Textpositionierung, -art, -farbe, etc. können hinzugefügt werden. Die grundliegende Bedienung wird dadurch nicht beeinflusst.