HTML / CSS - Praxistutorial 2 - Zusatzinfos
1. Die Abschnitte
2. Inhalte
Diesmal wollen wir ein paar Zusatzinformationen für Touristen rund um dieses Gewässer und das angrenzenden Gemäuer liefern.
Also packt mal folgenden Code unter das inhalt-Div.
<div class="info">
<h4>Informationen</h4>
<h5>Hotels</h5>
<p>
<a href="#">Hotel A</a><br />
<a href="#">Hotel B</a>
</p>
<h5>Reiseveranstalter</h5>
<p>
<a href="#">Veranstalter A</a><br />
<a href="#">Veranstalter B</a>
</p>
<h5>Souvenierläden</h5>
<p>
<a href="#">Souvenierladen A</a><br />
<a href="#">Souvenierladen B</a>
</p>
</div>
Oh Wunder
Es steht ganz ohne unser Zutun bereits genau da, wo es hin soll. Denkt man vielleicht, wenn man sich das im Browser anschaut.
Aber es stimmt nicht. Nur der Inhalt(!) befindet rechts vom vorherigen <div>.
3. <div class="info">
Unser Info-Feld wollen wir mit einem Rahmen und einer speziellen Hintergrundfarbe versehen. Bei unserem Inhalt haben wir schon
etwas über gefloatete Elemente gelernt. Stichwort background-color. Also müssen wir unser info-Element
nach rechts hin einrücken, damit wir die gewünschten Formatierungen vornehmen können. Ein paar Weitere kommen noch hinzu
(rahmen.css).
div.info
{
border: 1px solid #002274;
margin-left: 807px;
margin-top: 20px;
background-color: #789bec;
padding-bottom: 5px;
}
Erläuterung
Ich denke, bis auf einen Punkt ist soweit alles klar, aber das werde ich genauer erläutern.
margin-left
Ist eine einfache Rechnung. Das erste Element (subnavi) ist um 40 Pixeln nach rechts eingerückt und hat eine
Breite von 200 Pixeln. Ergibt also eine Gesamtbreite von 240 Pixeln. Der inhalt-Bereich wurde um 20 Pixel
nach rechts eingerückt und verfügt über eine Breite von 527 Pixeln. Macht also 547 Pixel. Unser info-Feld
soll noch mal einen Abstand von 20 Pixeln zum vorherigen Element haben, also:
subnavi = 240 Pixel
inhalt = 547 Pixel
info = um 20 Pixel einrücken ->
807 = 240 + 547 + 20
Eine Breitenangabe für <div class="info"> ist nicht nötig solange...? Ja solange ihr keine tierisch langen
Wörter habt, die mehr Platz einnehmen, als ihnen zur Verfügung steht.
Wichtig!
Eigentlich solte man nicht so vorgehen, wie ich es hier gezeigt habe. Stattdessen hätte man beim <div
class="info"> ebenfalls mit einem float: left; arbeiten sollen. "Warum macht der Dödel das dann nicht?"
werden ihr euch jetzt sicher fragen. Nun, ich zeige gerne mehrere Möglichkeiten auf, um euer Gespür für CSS zu schärfen. Darum verwende
ich auch gerne mal Beispiele, die nicht so prickelnd umgesetzt sind. Wegen der Didaktik halt.
4. Die Überschriften
Ich denke mal, dass ihr die Anweisungen von alleine versteht, ohne auf Erläuterungen meinerseits angewiesen zu sein. Tragt
also in die html.css Folgendes ein.
h4
{
margin: 0px;
font-size: 0.9em;
color: #fff;
padding: 5px;
background-color: #5671b1;
}
h5
{
margin: 0px;
background-image: url(../pics/menue/marker.gif);
background-repeat: no-repeat;
background-position: 5px 11px;
border-top: 1px solid #fff;
font-size: 0.85em;
color: #fff;
padding: 7px 6px 0px 15px;
}
Ein Hinweis
Eigentlich ist das hier ziemlich schlampig, da wir einfach davon ausgehen, dass es Überschriften der 4. und 5. Ordnung nur im rechten
Feld geben kann. Wer sauber arbeiten möchte, sollte auch hier eine Bindung an das entsprechende <div>-Element
vornehmen.
5. Die Links
Ist auch nichts wirklich Weltbewegendes, also in der links.css ein
div.info a
{
color: #002274;
margin-left: 15px;
}
div.info a:hover
{
text-decoration: underline;
}
und fertisch.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt