![[Tutorial Nr. 1] Zusammenspiel von CSS und DIV](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/tutorial-nr-1-zusammenspiel-von-css-und-div_ltr.gif){kind=small}
DIV-Tutorial
Ein paar Kenntnisse sollten vorhanden sein.
1. Basis
Wir legen uns ein ganz normales HTML-Dokument mit dem HTML-Grundgerüst an.
auf xmlns und META wurde absichtlich verzichtet
Als erstes steht dort die Dokumenttyp-Deklaration, also die Angabe zur momentan verwendeten HTML-Version. Die ist wichtig (z.B. für den auslesenden Web-Browser), da es viele unterschiedliche Versionen von HTML gibt und wir uns ja für eine entscheiden müssen
Hier benutzen wir, wie man unschwer erkennen kann, die Version 4.01.
Das alles ist generell für einen DIV-Aufbau unwichtig, gehört aber zu einem vernünftigen Seitengerüst und wird deswegen hier erklärt!
2. Stylesheet
Es gibt drei unterschiedliche Varianten, in einem HTML-Dokument CSS anzuwenden:
-externen Stylesheet importieren
-innerhalb des Dokumentes deklarieren
-innerhalb der Tags deklarieren
Klären wir erst einmal, was ein Stylesheet und CSS überhaupt ist.
CSS (Cascading Style Sheet) ist eine Sprache zum Formatieren von HTML-Elementen. Es gibt auch eine HTML-Formatierung, doch CSS bietet weit aus mehr Möglichkeiten, zum Beispiel Rahmen, Farben, Innen- Außenabstände, Positionen etc.
Der Unterschied HTML- und CSS-Formatierung:
dies wäre eine HTML-Formation. Nicht besonders valide und kein Standard. So ist es auch zum Beispiel mit dem Attribut height
dies wäre nun eine CSS-Formation und gleichzeitig ein Beispiel für unsere dritte Möglichkeit, CSS in einem Dokument anzuwenden. Näheres dazu weiter unten...
Die zweite Möglichkeit, CSS innerhalb eines Dokumentes anzuwenden ist, das Stylesheet in den Header des HTML-Grundgerüstes zu schreiben:
Hier haben wir zwischen den Head-Segmenten einen neuen Stil (engl. style) eröffnet, vom Typ CSS. Dazwischen können wir nun unsere HTML-Elemente ansprechen. Solch eine Deklaration beginnt immer mit einer Identifikation des Elementes / der Elemente gefolgt von einer öffnenden geschweiften Klammer und einer geschlossenen geschweiften Klammer. Zwischen diese Klammern schreiben wir unsere Formationen, zum Beispiel welche Farbe der Hintergrund eines Div-Containers haben soll. Hinter jede Formatierung schließt ein Strichpunkt ab.
1. Möglichkeit: der Tag
Generell kann man gesamte HTML-Tags in einem Stylesheet ansprechen. Obiges Beispiel würde nun alle <div>-Tags im gesamten Dokument ansprechen. Würden wir dort table stehen haben, würden alle Tabellen des Dokumentes angesprochen und entsprechend formatiert werden.
2. Möglichkeit: die ID
Will man nur ein einziges Element ansprechen, weißt man diesem einfach eine ID zu. Diese ID darf nur einmal im gesamten Dokument genannt und verteilt werden, ansonsten ist das nicht valide!
Eine ID-Deklaration wird immer nur das Nummern-Zeichen # eingeführt. Innerhalb des HTML-Tags muss natürlich auch die ID mittels des Attributes ID benannt werden. Wie gesagt, pro Element nur [/u] ID.
3. Möglichkeit: die Klassen
Mit ID konnten wir nun ein bestimmtes Element ansprechen, wollen wir aber eine Regel erstellen, welche für mehrere Elemente gleichzeitig gilt, benutzen wir die Klasse.
Eine Klasse wird im Stylesheet immer durch einen Punkt definiert. Wir haben zum Beipiel wie oben genannt mehrere Links, die alle in der Schriftfarbe rot erscheinen sollen. Nun wäre es ja Schwachsinn, jedem Link eine individuelle ID zuzuweisen und dann im Stylesheet ein paar Mal die gleiche Formation für mehrere IDs zu schreiben. Deswegen nutzt man Klassen. Die Links haben nun alle die Klasse rot, also werden alle Elemente, welche dieser Klasse zu gewiesen sind, in der Schriftfarbe rot formatiert. Der letzte Link hat keine Klassen-Zuweisung bekommen, dieser wird standardmäßig erscheinen.
Und nun zu guter Letzt auch noch die erste der oben genannten Möglichkeiten, CSS innerhalb eines Dokumentes anzuwenden, nämlich das exportieren externer Stylesheet-Dateien. Diese Dateien besitzen die Endung .css. Innerhalb der Dateien wird munter darauf los getextet, also ohne einführenden <style>-Tags. Man führt sofort das erste Element, die erste Klasse oder ID auf.
Innerhalb des HTML-Dokumentes müssen wir nun diese Datei einfügen.
Dies schreiben wir zwischen die <head></head>-Tags im Dokument. Link (dtsch. Verknüpfung) beinhaltet hier drei Attribute. Erst einmal die bekannte Typisierung, gefolgt von rel (engl. relation / verwandt) und leitet eine logische Dateibeziehung ein. Hier in unserem Fall natürlich das Stylesheet. Mit href (engl. hyper reference / Hyper(text)-Referenz) geben wir das Verweisziel an, wo unser Stylesheet liegt. In diesem Fall liegt es im gleichen Verzeichnis. Da der Tag <link> keinen abschließenden Tag (</link>) besitzt, beenden wir diesen mit einem Slash innerhalb des führenden Tags.
Somit ist unser Stylesheet eingebunden!
Für welche Art ihr euch entscheidet, bleibt euch überlassen. Ich binde meist ein externes Stylesheet ein, da diese sehr groß werden können und unnötig Platz im HTML-Dokument verbrauchen.
3. DIV-Container
Ein einleitender Tag und einen schließenden Tag. Dieses Beispiel würde nun, wie oben zitiert, keinen Platz im Dokument nehmen, da es leer ist. Verleihen wir dem DIV doch einmal ein paar Formatierungen.
Ein 50px hoher und 200px breiter DIV-Container mit einem 1px-breiten, durchgehenden (solide) schwarzen (#000000) Rahmen (border).
Mit dem HTML-Element <p></p> habe ich zwischen den beiden DIV-Containern einen Absatz erzeugt, wie wir jetzt sehen, wird das bald nicht mehr nötig sein!
4. DIVs positionieren
Wir können unsere Container nach Belieben verschieben und auf dem Dokument platzieren.
Unser Container nimmt nun im Dokument vom Seitenrand des Browser nach oben hin einen Abstand von 50px und zur linken Seite hin einen Abstand von 100px ein. Der Abstand nach rechts und unten ist, da er nicht definiert wird, 0px.
Hier nimmt nun unser Container nach allen Seiten (links, rechts, oben und unten) einen Abstand von 50px ein.
Zusatz:
Abstand unten: margin-bottom: 50px;
Abstand rechts: margin-right: 50px;
Außerdem können wir dem Container noch ein bestimmtes Positions-Attribut mitgeben.
Folgende Werte für position sind möglich:
Die beiden Container haben nun einen Abstand zueinander von 10px.
5. Let us float!
Das sieht doch schon etwas nach Layout aus, oder
Oben der Header und darunter zwei Boxen mit unterschiedlichen Inhalten.
Nun verbinden wir mehrere Ansprech-Möglichkeiten in einem Stylesheet. Ich möchte, dass alle DIV-Container eine Höhe von 50px haben, spreche daher generell alle Container an. Darunter weise ich einer Klasse eine BReite von 195px, sowie einen Rahmen zu.
Mein erster Container umschließt alle nachfolgenden Container. Er hat die Breite 400px. Darin erstelle ich mir einen ebenfalls 400px breiten Container mit einem schwarzen Rahmen und einem Abstand nach unten von 10px. Das soll mein "Header" ergeben.
Darunter erstelle ich meine zwei Boxen. Diese sind der Klasse "box" zugewiesen, welche wir ja oben definiert haben. Was allerdings dort nicht definiert ist, ist der float-Wert. Float bedeutet soviel wie "schwimmen" oder "schweben" und ist eigentlich eine Positionierung der Container. Man bestimmt hiermit, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen.
Hier "schweben" unsere Blöcke einmal nach rechts und einmal nach links, sie sind bestrebt, soweit wie möglich die jeweilige Richtung einzunehmen.
Ein kleines Rechenexempel zeigt uns den Abstand zwischen den beiden Blöcken:
Oben der Header, darunter links die Navigation, in der Mitte der Inhalt und rechts Boxen für Login, News usw. Ein ganz simples Standard-Layout.
Wir ändern unser Stylesheet und nehmen bei der Klasse die Breite heraus und fügen einen Seitenabstand rechts von 10px ein.
Hier nehmen wir nun unseren Begrenzungscontainer weg, denn wir lassen alles nach links floaten! Oben wieder unser Header, genau das gleiche wie eben.
Darunter haben wir diesmal drei Boxen, welche wir alle nach links schweben lassen. Damit die Boxen nicht anstoßen, packen wir einen Seitenabstand rechts von 10px mit drauf.
Wollen wir nun wieder einen "normalen" Container (bsp.weise als Footer) darunter setzen, müssen wir erst das floaten wieder beenden. Dies machen wir mit der Eigenschaft clear. Clear kann, logischerweise, drei Werte annehmen (right, left, none). None (dtsch. nichts) ist Schwachsinn, denn dann haben wir auch nix gefloatet
Dem nachfolgenden Container (zum Beispiel der Footer, also ID footer) geben wir also dieses clear mit:
Selbstverständlich können wir nur das clearen, was wir auch zuvor gefloatet haben
(float:left; --> clear:left
Und das würde dann unser Gesamtbild ergeben. Der letzte Container hat also nun den Float beendet und setzt sich ganz normal wieder unter die drei gefloateten Boxen.
Ein paar Kenntnisse sollten vorhanden sein.
1. Basis
Wir legen uns ein ganz normales HTML-Dokument mit dem HTML-Grundgerüst an.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Seiten-Titel</title> </head> <body> </body> </html>
Als erstes steht dort die Dokumenttyp-Deklaration, also die Angabe zur momentan verwendeten HTML-Version. Die ist wichtig (z.B. für den auslesenden Web-Browser), da es viele unterschiedliche Versionen von HTML gibt und wir uns ja für eine entscheiden müssen
Hier benutzen wir, wie man unschwer erkennen kann, die Version 4.01.Das alles ist generell für einen DIV-Aufbau unwichtig, gehört aber zu einem vernünftigen Seitengerüst und wird deswegen hier erklärt!
2. Stylesheet
Es gibt drei unterschiedliche Varianten, in einem HTML-Dokument CSS anzuwenden:
-externen Stylesheet importieren
-innerhalb des Dokumentes deklarieren
-innerhalb der Tags deklarieren
Klären wir erst einmal, was ein Stylesheet und CSS überhaupt ist.
CSS (Cascading Style Sheet) ist eine Sprache zum Formatieren von HTML-Elementen. Es gibt auch eine HTML-Formatierung, doch CSS bietet weit aus mehr Möglichkeiten, zum Beispiel Rahmen, Farben, Innen- Außenabstände, Positionen etc.
Der Unterschied HTML- und CSS-Formatierung:
Code:
<table background="bild.gif">
Code:
<table style="background:url("bild.gif");">
Die zweite Möglichkeit, CSS innerhalb eines Dokumentes anzuwenden ist, das Stylesheet in den Header des HTML-Grundgerüstes zu schreiben:
Code:
<html> <head> <style type="text/css"> </style> </head> <body> </body> </html>
Code:
div {
background: #000000;
}
Generell kann man gesamte HTML-Tags in einem Stylesheet ansprechen. Obiges Beispiel würde nun alle <div>-Tags im gesamten Dokument ansprechen. Würden wir dort table stehen haben, würden alle Tabellen des Dokumentes angesprochen und entsprechend formatiert werden.
2. Möglichkeit: die ID
Will man nur ein einziges Element ansprechen, weißt man diesem einfach eine ID zu. Diese ID darf nur einmal im gesamten Dokument genannt und verteilt werden, ansonsten ist das nicht valide!
Code:
<style type="text/css">
#meinDiv {
background: #000000;
}
</style>
<div id="meinDiv"></div>
3. Möglichkeit: die Klassen
Mit ID konnten wir nun ein bestimmtes Element ansprechen, wollen wir aber eine Regel erstellen, welche für mehrere Elemente gleichzeitig gilt, benutzen wir die Klasse.
Code:
<style type="text/css">
.rot {
color: #ffff00;
}
</style>
<a href="#" class="rot">Startseite</a>
<a href="#" class="rot">Impressum</a>
<a href="#">Kontakt</a>
Und nun zu guter Letzt auch noch die erste der oben genannten Möglichkeiten, CSS innerhalb eines Dokumentes anzuwenden, nämlich das exportieren externer Stylesheet-Dateien. Diese Dateien besitzen die Endung .css. Innerhalb der Dateien wird munter darauf los getextet, also ohne einführenden <style>-Tags. Man führt sofort das erste Element, die erste Klasse oder ID auf.
Innerhalb des HTML-Dokumentes müssen wir nun diese Datei einfügen.
Code:
<link type="text/css" rel="stylesheet" href="layout.css" />
Somit ist unser Stylesheet eingebunden!
Für welche Art ihr euch entscheidet, bleibt euch überlassen. Ich binde meist ein externes Stylesheet ein, da diese sehr groß werden können und unnötig Platz im HTML-Dokument verbrauchen.
3. DIV-Container
Ein DIV-Container sieht so aus:Quote:
mediaevent.de schrieb:
Das <div>-Tag ist ein Behälter für weitere HTML-Elemente. Das öffnende und schließende <div>-Tag führen jeweils zu Zeilenumbrüchen – div-Tags bilden Block-Elemente. Ein div-Element bringt keine weiteren Eigenschaften mit und ohne Inhalte nimmt ein DIV-Element ohne Höhen- und Breitenangaben durch CSS-Regeln keinen Platz im HTML-Dokument ein.
Code:
<div> </div>
Code:
div {
border: 1px solid #000000;
height: 50px;
width: 200px;
}
Ein 50px hoher und 200px breiter DIV-Container mit einem 1px-breiten, durchgehenden (solide) schwarzen (#000000) Rahmen (border).
Code:
<div>DIV 1</div> <p></p> <div>DIV 2</div>
Mit dem HTML-Element <p></p> habe ich zwischen den beiden DIV-Containern einen Absatz erzeugt, wie wir jetzt sehen, wird das bald nicht mehr nötig sein!
4. DIVs positionieren
Wir können unsere Container nach Belieben verschieben und auf dem Dokument platzieren.
Code:
div {
margin-top: 50px;
margin-left: 100px;
}
Code:
div {
margin: 50px;
}
Zusatz:
Abstand unten: margin-bottom: 50px;
Abstand rechts: margin-right: 50px;
Außerdem können wir dem Container noch ein bestimmtes Positions-Attribut mitgeben.
Code:
div {
position: absolute;
}
Nun können wir auch unsere Container fein säuberlich voneinander trennen, ohne HTML-Tags zu nutzen.Quote:
selfhtml schrieb:
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
relative = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, das nicht die Normaleinstellung position:static aufweist. Scrollt mit.
fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
Code:
<div>DIV 1</div> <div style="margin-top: 10px;">DIV 2</div>
5. Let us float!
Das sieht doch schon etwas nach Layout aus, oder
Oben der Header und darunter zwei Boxen mit unterschiedlichen Inhalten.
Code:
div {
height: 50px;
}
.box {
width: 195px;
border: 1px solid #000000;
}
Code:
<div style="width:400px;"> <div style="width:400px; border:1px solid #000000; margin-bottom:10px;">DIV 1</div> <div class="box" style="float:right;">DIV 2</div> <div class="box" style="float:left;">DIV 3</div> </div>
Darunter erstelle ich meine zwei Boxen. Diese sind der Klasse "box" zugewiesen, welche wir ja oben definiert haben. Was allerdings dort nicht definiert ist, ist der float-Wert. Float bedeutet soviel wie "schwimmen" oder "schweben" und ist eigentlich eine Positionierung der Container. Man bestimmt hiermit, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen.
Hier "schweben" unsere Blöcke einmal nach rechts und einmal nach links, sie sind bestrebt, soweit wie möglich die jeweilige Richtung einzunehmen.
Ein kleines Rechenexempel zeigt uns den Abstand zwischen den beiden Blöcken:
6. Layout mit DIV-ContainernQuote:
ein Container mit 400px ist die Begrenzung. Darin befinden sich jeweils zwei Container der Breite 195px, macht zusammen eine Gesamt-Containerbreite von 390px. Da die Container jeweils nach außen streben, haben wir nun einen Abstand von 400-390=10px dazwischen
Oben der Header, darunter links die Navigation, in der Mitte der Inhalt und rechts Boxen für Login, News usw. Ein ganz simples Standard-Layout.
Code:
div {
height: 50px;
}
.box {
border: 1px solid #000000;
margin-right: 10px;
}
Code:
<div style="width:400px; border:1px solid #000000; margin-bottom:10px;">DIV 1</div> <div class="box" style="float:left; width:50px;">DIV 2</div> <div class="box" style="float:left; width:275px;">DIV 3</div> <div class="box" style="float:left; width:50px;">DIV 4</div>
Darunter haben wir diesmal drei Boxen, welche wir alle nach links schweben lassen. Damit die Boxen nicht anstoßen, packen wir einen Seitenabstand rechts von 10px mit drauf.
Wollen wir nun wieder einen "normalen" Container (bsp.weise als Footer) darunter setzen, müssen wir erst das floaten wieder beenden. Dies machen wir mit der Eigenschaft clear. Clear kann, logischerweise, drei Werte annehmen (right, left, none). None (dtsch. nichts) ist Schwachsinn, denn dann haben wir auch nix gefloatet
Dem nachfolgenden Container (zum Beispiel der Footer, also ID footer) geben wir also dieses clear mit:
Code:
#footer {
clear: left;
}
(float:left; --> clear:left
Und das würde dann unser Gesamtbild ergeben. Der letzte Container hat also nun den Float beendet und setzt sich ganz normal wieder unter die drei gefloateten Boxen.
Greetz
