HTML / CSS - Praxistutorial 2 - Inhalt
1. Die Abschnitte
2. Einführung
Diesmal fügen wir erst den gesamten Inhalt ein und formatieren ihn dann Stück für Stück. Um euch die endlose Tipparbeit zu
ersparen, legt unterhalb des subnavi
-Divs ein weiteres an und weist dem die Klasse inhalt
zu.
Anschließend kopiert ihr innerhalb dieses Elements folgenden Code ein:
<h1>Urquhart Castle</h1>
<h2>Ruine am Loch Ness</h2>
<p>
Malerische Trümmerlandschaft an den Ufern des Loch Ness bla bla.
Das dumme Nessie-Monster, viele Betrunkene, irgendein dummer
Saurier blubb blubber.
</p>
<p>
<img src="../../pics/schloesser/loch_ness.jpg"
width="250" height="250" alt="Loch Ness" class="bild" />
<span class="bildtext">Loch Ness mit Urquhart Castle
vom Boot aus gesehen</span>
</p>
<h3>Geschichte</h3>
<ul>
<li>1230 -
Alan Durward wird Lord von Urquhart</li>
<li>1275 -
König Edward I. von England nimmt die Burg in Besitz</li>
<li>1297 -
Die Burg wird von den Schotten zurückgewonnen.</li>
<li>1303 -
Die Burg wird von König Edward I. von England erobert dann
wieder von Robert the Bruce (der aus Braveheart).</li>
<li>14. Jhdt - 16. Jhdt. -
Die Burg wechselt häufig den Besitzer, da
verschiedene Clans darum kämpfen, insbesondere
die MacDonalds</li>
<li>1692 -
Die letzte Besatzung sucht das Weite, nachdem die Burg
nahezu vollständig zerstört worden ist</li>
</ul>
<p>
Hach die schöne Landschaft, und die vielen Schafe, ständig hat
man eins am Kühlergrill kleben.
</p>
<p>
Der Sonnenschein. Hab mir im September(!) dort den schlimmsten
Sonnenbrand seit Jahren zugezogen. Wer denkt auch daran, um
diese Jahreszeit Sonnencreme mitzunehmen, nach Schottland!
</p>
3. Allgemeine Formatierungen
Die übernehmen wir fast eins zu eins aus dem ersten Tutorial. Da ich jetzt einfach keine Lust mehr habe, das alles noch mal
durchzukauen, fügt bitte folgenden Code in die html.css
ein.
h1
{
font-size: 1.2em;
margin-top: 5px;
margin-bottom: 5px;
color: #002274;
}
h2
{
font-size: 1.1em;
margin-top: 0px;
margin-bottom: 5px;
color: #002274;
}
h3
{
font-size: 0.9em;
margin-top: 0px;
margin-bottom: 5px;
}
p
{
margin-top: 5px;
margin-bottom: 5px;
}
div.inhalt img
{
display: block;
margin-bottom: 5px;
}
div.inhalt ul
{
margin-top: 0px;
margin-bottom: 0px;
list-style-type: disc;
}
div.inhalt li
{
margin-left: 15px;
}
4. Spezielle Formatierungen
Jetzt wird es interessant. Bis einschließlich des Bildes wird alles links an das Untermenü angeklatscht, der Rest befindet
sich links unterhalb davon. Um euch das zu erklären, legt mal innerhalb der rahmen.css
eine Klasse namens
inhalt
an und weist der die Eigenschaft background-color: #f00;
zu. Ihr könnt also wunderbar sehen,
dass sich das <div>
-Element linksbündig(!) zu unserem Rahmen befindet. Das bedeutet einfach gesagt, ein
Element zu "floaten". Das nachfolgende Element befindet sich genau wie das "gefloatete" links zum vorgegeben Rahmen. Nur
der Inhalt wird so solange eingerückt, bis die Höhe des "gefloateten" Elements erreicht ist. Um das zu korrigieren legt
in der rahmen.css
nun Folgendes fest.
div.inhalt
{
margin-top: 20px;
margin-left: 260px;
}
5. Die Breite
Da wir neben dem Inhalt noch zusätzliche Links unterbringen wollen, müssen wir nun unser div.inhalt
ebenfalls
aus dem Fluss herausnehmen. Also fügt dort ein float:left;
ein und wundert euch. Denn nun hüpft es je nach
Browser nach unten oder nach links oder beides und alles ist im Ar***. Das Problem liegt in der Anweisung margin-left:
260px
. Setzt dort den Wert mal auf 20 Pixel, und alles stimmt wieder. Fügt als Breitenangabe jetzt mal 527 Pixel
hinzu, dann reicht die Breite rechts bis zum Rollover des Links "Menschen". Das könnt ihr mit einer
background-color
-Anweisung überprüfen.
div.inhalt
{
margin-top: 20px;
margin-left: 20px;
width: 527px;
float: left;
}
6. Das Bild mit Text
So jetzt wird es seltsam. Was ich euch nun zeige, ist ein gutes Beispiel für das, was man mit CSS so alles anstellen
kann. Wir haben also zwei Inline-Elemente, ein Bild und einen Text innerhalb eines <span>
-Tags. Wir wollen nun
Folgendes machen. Der Text soll mit einem Abstand nach links rechts unten neben das Bild gestellt werden. Also floaten wir
mal wieder ein wenig. Definiert nun in der bis dato leeren klassen.css
folgende Anweisung.
img.bild
{
float: left;
}
Das Ergebnis kann man sich schon vorstellen. Es sieht grausam aus. Der gesamte folgende Text läuft neben dem Bild her. Also
arbeiten wir ein wenig mit unserem <span class="bildtext">
. Dafür definieren wir in wiederum in der
klassen.css
eine Anweisung. Spielt mal ein wenig damit herum, um euch damit vertraut zu machen.
span.bildtext
{
display: block;
margin-left: 260px;
margin-bottom: 20px;
padding-top: 220px;
color: #555;
}
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt