Im Grundkurs von Html erklärte ich die Vorteile von CSS. Doch dieses Kapitel ist so umfangreich, dass ich hier ein wenig näher auf CSS eingehen möchte.
Wenn man sich mit CSS eingehender beschäftigt wird man rasch feststellen das man nicht nur Text mit CSS gestalten kann. Ganze Seiten Layouts lassen sich mit CSS relativ einfach gestalten.
Die Problematik die sich hier oft stellt, das verschiedene Browser auf einen CSS Befehl anders reagieren. Gerade bei der Positionierung von Elementen tauchen öfters Probleme auf.
Natürlich sollte man schon bei der Gestaltung einer Seite überlegen wie man die Struktur aufbaut. Überlegenswert ob die Seite in Tabellen aufgebaut sein soll oder doch in rein in CSS mit Elementen (div).
Zu bedenken das Tabellen normal nur für Tabellerische Daten verwendet werden sollten. Jedoch zeigt die Praxis das aufwendig grafisch gestaltete Seiten mit vielen Elementen mit Tabellen leichter und vor allem Browser kompatibler zu "bauen" sind als mit div.
Die auflistung diverser Bugs möchte ich hier nicht auflisten, es gibt sehr viele Seiten im Netz die sich mit dieser Thematik beschäftigen, einfach bei bekannten Suchmaschinen "bekannte IE css bugs" eingeben.
Widmen wir uns nun dem eigentlich Thema, der Gestaltung einer Seite mit CSS. Wir werden hier ein Layout erstellen das einen Header inklusive einer Breadcrump Navigation hat, links ein Menü, rechts daneben der Contentbereich und einen Footer beinhaltet. Hier ist das Layout zu sehen, das wir gestalten wollen : Das Xhtml/CSS Layout
Wie schon im Html Lehrgang beschrieben beginnen wir damit eine Html Seite zu erstellen, und verlinken gleich eine CSS Datei. Das Html Dokument wird gleich in Xhtml 1.1 gestaltet.
Leg dazu zwei Datein an mit denn Namen : index.htm, style.css. Alternativ findest Du am Ende des Artikel das gesamte Layout mit allen notwendigen Grafiken und Datein zum runterladen.
Zu diesem Zeitpunkt sollte man sich natürlich schon Gedanken gemacht haben, wie das Menü auszusehen hat, wie der Content verpackt werden soll und ob und welche Headergrafik man einsetzt. Diverse Grafiken sollten schon vorbereitet sein.
An dieser Stelle möchte ich erwähnen das dass Internet keine Rechtsfreie Zone ist, Grafiken, Bilder und Texte dürfen nicht einfach so kopiert werden und verwendet werden. Im gesamten Internet gilt genauso das Urheberrecht wie im "normalen" Leben auch. Sollte man also gern ein Bild verwenden wollen das man im Netz gefunden hat, bitte vorher den Urheber fragen ob man das auch darf!
Nun definieren wir als erstes den Header mit dazu gehöriger Breadcrump Navigation. Der Header kommt gleich nach dem Body Tag. Dazu schreiben wir im Html Dokument folgendes :
Wie man nun gut sieht, ist der Quelltext für einen Header extrem sauber und übersichtlich. Sämtliche Formatierung vom Header werden von der CSS Datei übernommen. Auch gut zu sehen, dass ich hier für die Breadcrump Navigation den Html Tag H1 verwende. Das mache ich aus dem Grund, da Suchmaschinen diesem Tag eine höhere Gewichtung als normalen Text geben. In weiterer Folge verwende ich im Content die Überschriften H1-H3, diese kann man dann beliebig bis H6 fortsetzen.
Nun sollte das Html Dokument so aussehen :
Gehen wir mehr auf die Befehle im Content Bereich ein. Ein DIV kann man sich als Behälter vorstellen dem man per CSS verschiedene Eigenschaften zuordnen kann. Beispiels weise kann man einzelnen Elementen die in diesem Div enthalten sind festgelegte Schriftarten, Hintergrundbilder oder Hintergrundfarben zuweisen. Das Div selbst, kann man nun auch beliebig auf der Seite positionieren. In diesem Beispiel erhält das Div die CSS ID "head" und bekommt einfache Anweisungen.
Als Schriftfarbe "color: black;" wird im Header schwarz festgelegt, natürlich können hier auch Html Farbwerte verwendet werden "color: #000000". Weiters kommt nun das Hintergrundbild "background-image:url(headerbg.jpg);" das ohne weiteren Attribute kachelt. Das gesamte Div soll natürlich keinen Rand "border: 0px;" und keinen Abstand "padding-top: 0px;" nach ihnen oder außen "margin: 0px;" haben.
Mit der CSS Classe "breadcrump", legen wir die Eigenschaften für dieses Menü fest. Alternativ kann man diese Breadcrump Navigation auch als Topmenü nehmen, wo man die wichtigsten Menüpunkte aus einzelnen Menü Kategorieren noch einmal übersichtlich präsentiert, siehe auch auf pixelmania.at.
Hier habe ich es einfach so gemacht, dass ich diese Classe einfach in den Überschrifts Tag <h1> eingebunden habe. CSS übernimmt für mich den Rest und gestaltet diese Überschrift nach meinen Wünschen.
Hier lege ich nun fest das die Schriftfarbe weiß "color: #fff;" sein soll, gleich als Html Wert geschrieben. Weiters soll die Hintergrundfarbe "background: #000;" schwarz sein. Nun verwende ich erstmal einen Innenabstand, also vom Div Rand soll zum innen liegenden Text ein Abstand gewonnen werden, damit die Schrift nicht am Rand klebt. Dazu verwende ich "padding: 5px 0 5px 5px;".
Hier hat man zwei Möglichkeiten, entweder man löst es so wie ich, indem man die werte hintereinander schreibt, oder man defeniert jeden padding einzeln. Macht man es so wie ich, gilt immer, die Randwerte werden von OBEN "5px", RECHTS "0", UNTEN "5px;" und LINKS "5px;" angegeben. Das gilt auch für Rahmen(border) oder außenabstände(margin).
Alternativ kann man die abstände auch einzeln angeben.
Bei der von mir verwendeten Variante ist schön zu erkennen das man sich jede menge Schreib arbeit erspart und der Quelltext darüber hinaus schlanker bleibt. Bei mehrfach angaben erpart man sich bei Null werten auch die Pixel angabe bei einzelnen Anweisungen muss auch der Null wert mit einer Massangabe versehen werden.
Mit "margin: 0;" geb ich den Abstand nach aussen an, in dem Fall soll keiner sein, sonst rückt die Navigation z.B. nach unten von dem Header weg, in diesem Layout keinesfalls gewünscht. Ich vergebe aber nach oben eine kleine optische Abtrennung zum darüber liegenden Header mit "border-top: 1px solid white;", so erscheint die dünne weiße Linie.
Und zu guter letzt leg ich nun die Schrifteigenschaften mit mehrfach angaben fest. "font: bold 12px verdana, sans-serif;" Schrift soll Fett "bold", "12px" 12 pixel groß, mit der Schriftfamilie "Verdana" dargestellt werden.
Nun kopiere ich das ganze, und schreibe ein "a" zu der Classe dazu. Somit formatiere ich alle Links die ja in Html mit dem Tag a eingeleitet werden. Natürlich kann man nun die Links anders formatieren als den normalen Text. Der Text wird mit "breadcrump" festgelegt, die Links mit "breadcrump a". Das könnte man noch mit Hover Effekten und Besuchten Links aus schmücken.
.breadcrump a:hover für einen Hover Effekt bei Links und
.breadcrump a:visited für bereits anklickte Links.
Nun lege ich auch gleich Seiten übergreifende Elemente wie den Html Tag "body" und allgemeine Links "a" fest. Auf diese gehe ich nicht weiter ein, dass meiste wurde schon durch die Breadcrump Navigation erklärt.
Die Css Datei sollte nun so aussehen :
Mit der angelegten Html und CSS Datei solltest du nun schon den kompletten Header gestalten können. Kommen wir im nächsten Teil zum Hauptmenü.
