Hauptmenü

Untermenü

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-Monsterviele Betrunkeneirgendein 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 Ivon 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 Ivon England erobert dann
      wieder von Robert the Bruce (der aus Braveheart).</li>
  <li>14. Jhdt 16. Jhdt. -
      Die Burg wechselt häufig den Besitzerda
      verschiedene Clans darum kämpfeninsbesondere
      die MacDonalds</li>
  <li>1692 -
      Die letzte Besatzung sucht das Weitenachdem die Burg
      nahezu vollständig zerstört worden ist</li>
</ul>
<p>
  Hach die schöne Landschaftund die vielen Schafeständig hat
  man eins am Kühlergrill kleben.
</p>
<p>
  Der SonnenscheinHab mir im September(!) dort den schlimmsten
  Sonnenbrand seit  Jahren zugezogenWer denkt auch daranum
  diese Jahreszeit Sonnencreme mitzunehmennach 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-size1.2em;
  margin-top5px;
  margin-bottom5px;
  color#002274;
}

h2
{
  font-size1.1em;
  margin-top0px;
  margin-bottom5px;
  color#002274;
}

h3
{
  font-size0.9em;
  margin-top0px;
  margin-bottom5px;
}

p
{
  margin-top5px;
  margin-bottom5px;
}

div.inhalt img
{
  displayblock;
  margin-bottom5px;
}

div.inhalt ul
{
  margin-top0px;
  margin-bottom0px;
  list-style-typedisc;
}

div.inhalt li
{
  margin-left15px;
}

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-top20px;
  margin-left260px;
}

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-top20px;
  margin-left20px;
  width527px;
  floatleft;
}

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
{
  floatleft;
}

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
{
  displayblock;
  margin-left260px;
  margin-bottom20px;
  padding-top220px;
  color#555;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt