Artikelformat

So erstellst du einen Header und eine Navigation für deine Website

Im Header von “Max´ Musterseite” soll erstmal eine einfache Überschrift stehen. Überschriften werden mit den h-Tags definiert. Es gibt die Tags <h1> – <h6>. Dabei gilt: Je niedriger die Zahl, desto wichtiger die Überschrift. In den Header fügen wir jetzt folgenden Code ein:

In CSS kann man Objekte, die sich in anderen Objekten befinden, ansprechen indem man den Tag bzw. die class/id hinter das übergeordnete Objekt setzt. Das bedeutet für uns, dass wir für diese Überschrift .header h1 {} benutzen können. Zusätzlich habe ich die Hintergrundfarbe des Headers noch auf einen hellen Grauton gestellt.

  • font-size = Schriftgröße
  • font-style:= Textart (italic = Kursiv)
  • text-shadow = Textschatten

Bei text-shadow  ist der erste Wert die vertikale Verschiebung des Schattens, der zweite Wert ist die horizontale Verschiebung, der dritte Wert die Größe des Schattens und der letzte Wert ist die Farbe.

Für die Navigation verwenden wir eine unordered list eine <ul>. Innerhalb dieser ul liegen die list items (<li>). Und zu guter Letzt brauchen wir noch die Anker Tags (<a>), das sind die Links. Der Quelltext für die Navigation sieht so aus:

Mit list-style-type: none; entfernen wir jetzt die Punkte vor den Links, und mit display: inline; sorgen wir dafür, dass die Links in einer Zeile aufgelistet werden. Damit die Anker Tags die Eigenschaft height akzeptieren, müssen wir ihnen zuvor die Eigenschaft display: inline-block zuweisen.

Die Links müssen zwar 30 Pixel hoch sein, aber da von padding-top bereits 5 Pixel kommen, geben wir ihm nur eine Höhe von 25 Pixeln.


Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.