HTML / CSS - Praxistutorial 1 - Aufbau
1. Die Abschnitte
2. Anlegen der Strukturelemente
Unter dem Punkt Strukturierung habe ich schon gezeigt, wie man ein
HTML-Dokument sinnvoll aufbaut, und genau dieses Beispiel nehmen wir uns jetzt vor. Baut den folgenden Code innerhalb des
body
-Tags der urquhart.htm
ein (den Text "Test" benötigen wir, damit ihr etwas zu sehen bekommt):
<div class="rahmen">
<div class="schmuck">Test</div>
<div class="navi">Test</div>
<div class="subnavi">Test</div>
<div class="inhalt">Test</div>
<div class="info">Test</div>
<div class="abschluss">Test</div>
</div>
3. Formatieren mit CSS
rahmen
Dieses Element wird benötigt, weil wir unseren Inhalt horizontal zentriert aufbauen wollen. Damit es anschaulicher wird,
versehen wir es erst mal mit einem Rahmen. Tragt jetzt in die styles.css
folgenden Code ein:
.rahmen
{
width: 740px; /* Anpassung für 800x600 */
margin: 0px auto;
border: 1px solid #f00; /* nur zur Anschauung */
}
Erläuterung
Der erste margin
-Wert bedeutet oben anklatschen, der zweite einfach gesagt horizontal zentrieren. Wenn ihr euch
das jetzt im Browser anschaut, so seht ihr einen roten Block, wo untereinander 6 mal "Test" steht. So, jetzt entfernt bitte
den Eintrag border
, den benötigen wir nicht mehr.
schmuck
In diesem Bereich wollen wir Schmuckelemente unterbringen, also Bilder oder auch Flash-Animationen. Da ich von Letzterem
aber keine Ahnung habe, nehmen wir das Bild head_urquhart.jpg
mit den Maßen 740x100 Pixeln. In der CSS-Anweisung
benötigen wir also nur die entsprechenden Größenangaben.
.schmuck
{
width: 740px;
height: 100px;
}
Das Bild selber binden wir in der urquhart.htm
zwischen dem schmuck
-Div ein. Und schmeißt da jetzt
bitte den "Test" raus.
<div class="schmuck">
<img src="../../pics/schloesser/head_urquhart.jpg"
width="740" height="100" alt="Urquhart Castle">
</div>
navi
Hier gilt eigentlich dasselbe, wie bei schmuck
, Breite und Höhe definieren, das war es. Warum wir 24 Pixel bei
der Höhe genommen haben, erfahrt ihr später. Der Anschaulichkeit halber setzen wir auch mal eine Hintergrundfarbe.
.navi
{
width: 740px;
height: 24px;
background-color: #002274;
}
Leider hat der Internet Explorer 6 die unangenehme Eigenschaft, Zeilenumbrüche im Quellcode in die Darstellung mit einzubeziehen.
Das könnt ihr wunderbar daran sehen, dass es zwischen dem Bild und der blauen Leiste eine Lücke gibt. In diesem Fall könnt ihr
das sehr leicht korrigieren. Schreibt den gesamten Code des schmuck
-Divs in eine Zeile, dann passt es wieder.
Das ist zwar nicht das Gelbe vom Ei, aber in diesem Tutorial pfuschen wir ein wenig, damit es für den Anfang nicht zu schwer wird.
subnavi
, inhalt
, info
Diese drei Elemente sollen einen Abstand von 10 Pixeln zur Hauptnavigation und zueinander haben. Die Breitenangaben setzen wir einfach mal absolut, da lässt es sich leichter rechnen. Die Hintergrundfarben dienen wieder erst mal der Veranschaulichung.
.subnavi
{
width: 140px;
margin-top: 10px; /* Abstand nach oben */
margin-right: 10px; /* Abstand nach rechts */
margin-bottom: 10px; /* Abstand nach unten */
background-color: #f00;
}
.inhalt
{
width: 440px;
margin-top: 10px; /* Abstand nach oben */
margin-right: 10px; /* Abstand nach rechts */
margin-bottom: 10px; /* Abstand nach unten */
background-color: #f00;
}
.info
{
width: 140px;
margin-top: 10px; /* Abstand nach oben */
background-color: #f00;
}
Ein wichtiger Hinweis!
Bei manchen Browsern wird mitlerweile das Layout komplett zerschossen! Da muss man dem .subnavi
zusätzlich noch ein
clear: both;
verpassen, dann stimmt alles wieder.
4. Textfluss
So und nun wird es etwas komplizierter. Wir wollen die drei oben genannten div
-Elemente nebeneinander positionieren.
Da es sich aber um Block-Elemente handelt (und es auch so bleiben sollte), wird das ein wenig schwer. Noch mal kurz zur
Erinnerung, Block-Elemente zeichnen sich dadurch aus, dass an ihrem Ende automatisch
ein Zeilenumbruch erfolgt. Um nun unsere drei Rubriken subnavi
, inhalt
und info
nebeneinander zu platzieren, müssen wir sie aus dem normalen Textfluss herausreißen. Das geschieht mit der CSS-Eigenschaft
float
, die wir auf alle drei CSS-Definitionen anwenden.
float: left;
Et voilà - sie stehen tatsächlich nebeneinander! Die Details zu diesem "Phänomen" hab ich ja schon an dieser Stelle erklärt.
abschluss
Kommen wir nun zum letzten Element. Da wir einen Rahmen mit fester Breite definiert haben,
befindet sich unser Element bereits unterhalb der oben genannten Divs subnavi
, inhalt
und
info
. Kommentiert mal spaßeshalber den kompletten Selektor .rahmen
in der styles.css
aus und schaut euch an, was nun passiert. Auch das Element abschluss
befindet sich nicht mehr im "normalen" Textfluss.
Das geschah mit dem float
in der Klasse info
. Wir gehen also auf Nummer sicher und bringen es wieder in
den normalen Fluss. Das geschieht mit dem Wert clear
. Dazu definieren wir noch ein paar zusätzliche Eigenschaften.
.abschluss
{
/* macht das float: left aus info rückgängig */
clear: left;
border-top: 1px solid #000;
padding: 5px;
}
Damit hätten wir den Aufbau abgeschlossen. Als nächstes wenden wir uns der Hauptnavigation zu. Löscht bitte vorher
die Einträge background-color
bei subnavi
, inhalt
und info
, die brauchen
wir nicht mehr.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt