HTML / CSS - Praxistutorial 1 - Zusatzinfos
1. Die Abschnitte
2. Rahmen
So hier möchten wir jetzt ein paar externe Links zu anderen Seiten unterbringen. Dazu heben wir als erstes Mal das gesamte
div-Element info von den anderen ab, indem wir einen Rahmen, eine Hintergrundfarbe und einen
Innenabstand definieren.
.info
{
/* bereits existierenden Anweisungen plus ... */
border: 1px solid #002274;
background-color: #DDE8F3;
padding: 5px;
}
Ups, und schon hüpft wieder alles wild herum. Wieso? Denkt an das Box-Modell, bei dessen
Erklärung ich ein wenig ausfallend geworden bin (wahrscheinlich werdet ihr mich jetzt verstehen). Also wir haben eine Breite
von 140 Pixeln für das Element info festgesetzt. Jetzt kommt aber noch etwas hinzu, 2 Pixel für den Rahmen links
und rechts sowie 10 Pixel für den Innenabstand links und rechts. Also müssen wir die zusätzliche Breite von 12 Pixeln beim
.info abziehen. Bleiben also noch 128 über, und alles ist wieder da, wo es hingehört.
.info
{
width: 128px;
...
}
3. Überschrift
Für die Überschrift nehmen wir ein <h4>-Element, und ersetzen das "Test" hierdurch.
<h4>Links</h4>
Und wieder macht jeder Browser was er will, also definieren wir noch eine entsprechende CSS-Anweisung.
h4
{
font-size: 11px;
margin-top: 0px;
margin-bottom: 5px;
}
4. Inhalt
Nun packen wir unter das <h4> ein paar Links.
<a href="#">Link A</a>
<a href="#">Link B</a>
<a href="#">Link C</a>
<a href="#">Link D</a>
Damit die jetzt untereinander stehen, und ein wenig hübsch aussehen definieren wir noch eine kleine CSS-Anweisung.
.info a
{
color: #002274;
display: block;
margin-bottom: 5px;
}
.info a:hover
{
color: #000;
text-decoration: underline;
}
Zum Abschluss machen wir aus dem "Test" im Div abschluss noch ein "Copyright 2011 Ich" und die Seite ist fertig.
Sieht zugegebenermaßen nicht besonders schön aus, aber das ist hier ja schließlich kein Design-Kurs.
5. Fazit
Da wie schon gesagt, dieses Tutorial nur als ersten Einstieg dient, habe ich etliche Aspekte bisher ignoriert. Und außerdem sind wir ziemlich schlampig vorgegangen. Eigentlich wollte ich hier nur zeigen, dass man HTML-Seiten auch locker ohne Layout-Tabellen aufbauen kann. Erste Feinheiten dazu kommen jetzt.