×
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
HTML
HTML
Der Anfang
Tabellen
Block
Inline
Formate
Noch mehr?
Beispiele
 
CSS ist valide!
Herzlich willkommen auf meiner Homepage!
Heute ist der

Formatieren mit HTML / CSS

Formatierungen dienen natürlich in erster Linie dem Zweck, deine Inhalte hübsch, leserlich und über­sichtlich zu prä­sentieren! Dem Besucher deiner Webseite soll gefallen, wie du deine Seite aufgebaut hast, er soll möglichst auf Anhieb erkennen, worum es geht und sich auch schnell mit dem Angebotenen zurecht finden. Und heee... er soll vor allem keinen Augen­krebs und keine epileptischen Anfälle bekommen!
Also bitte immer prüfen, ob es gut lesbar ist, ob die Farb­gestaltung passt, ob die Über­sichtlichkeit stimmt... na ja, man trifft zwar nicht immer Jeder­manns Geschmack, aber wenn es dir selbst gefällt, dann ist das wohl schon ok!

Alle HTML- Elemente bringen irgendeine Formatierung mit. Diese ist in der Programm­ierung deines Browsers enthalten, kann aller­dings von Browser zu Browser unter­schiedlich sein.
Es gibt jetzt in HTML mehrere Möglichkeiten diese 'Vorein­stellung' nach deinen Wünschen anzupassen. Auf den vorhergehenden Seiten haben wir das ja auch schon ein paar mal gemacht.

Möglichkeit 1 - wir nutzen die HTML eigenen Tag- Ergänzungen / Attribute

Dabei aber bitte beachten, dass einige von diesen Attributen, zumindest in HTML 5, als veraltet und missbilligt gelten und wenn immer möglich durch CSS ersetzt werden sollten. Im Einzel­fall solltest du immer prüfen (z.B. bei SelfHTML), welches Attribut für welches Element zulässig ist?
Diese Attribute werden im öffnenden Tag des HTML- Elements notiert - zwischen den einzelnen Attributen muss mindestens ein Leer­zeichen stehen.

Beispiel für Attribute im öffnenden HTML- Tag:
<a href="eine_internet_adresse" target="_self" title="Ein Hyperlink" id="link1">Beschreibung</a>

Hier mal eine (nicht vollständig) Liste:

align=""
Dient zur Ausrichtung von Elementen - mögliche Werte sind 'left', 'right', 'center', 'justify'. Die 'Ausrichtung' wird zwischen den Anführungs­zeichen ("left") angegeben. Dieses Attribut wird von HTML 5 nicht unter­stützt!
alt=""
Alternativtext, der angezeigt wird, wenn das betreffende Element (z.B. ein Bild) nicht verfügbar ist. Der Text wird zwischen den Anführungs­zeichen ("Ein Text") angegeben.
border=""
Mit 'border' wird die Rahmenbreite in Pixeln für ein Element festgelegt. Die gewünschte Breite wird zwischen den Anführungs­zeichen ("x") als Zahl angegeben. Dieses Attribut wird von HTML 5 nicht unter­stützt!
class=""
Universalattribut - kann auf alle Elemente angewendet werden. Es zeichnet ein Element als zugehörig zu einer mit CSS definierten Klasse (=class) aus. Der Klassenname wird zwischen den Anführungs­zeichen ("name") angegeben. WICHTIG! Den brauchen wir sehr oft!
colspan=""
Mit 'colspan' wird in Tabellen die aktuelle Zelle um eine beliebige Anzahl von Spalten nach rechts ausgedehnt und damit diese Anzahl von Zellen zu einer zusammengefasst. Die Anzahl von zusammen­zufassenden Zellen wird zwischen den Anführungs­zeichen ("x") als Zahl angegeben.
height=""
Weist einem Element eine Höhe (=height) in Pixeln zu. Der Höhe wird zwischen den Anführungszeichen ("138") als Zahl angegeben. Dieses Attribut wird von HTML 5 nicht unterstützt!
id=""
Universalattribut - kann auf alle Elemente angewendet werden. Weist einem Element eine eindeutige Identi­fizierung zu. Das Element wird damit eindeutig gekenn­zeichnet und kann (z.B. mit Java Sript) angesprochen werden. Die 'id' kann auch als Sprung­anker für Verweise genutzt werden, ebenso ist eine Format­zuweisung mit CSS möglich. Die 'id' wird zwischen den Anführungs­zeichen ("nur einmal pro Seite") angegeben.
rowspan=""
Mit 'rowspan' wird in Tabellen die aktuelle Zelle um eine beliebige Anzahl von Zeilen nach unten ausgedehnt und damit diese Anzahl von Zellen zu einer zusammen­gefasst. Die Anzahl von zusammen­zu­fassenden Zellen wird zwischen den Anführungs­zeichen ("y") als Zahl angegeben.
style=""
Universalattribut - kann auf alle Elemente angewendet werden. Mit 'style' werden einem Element direkt CSS- Formatierungen zugewiesen. Die CSS- Formatierungen werden zwischen den Anführungs­zeichen ("format: wert;") notiert und jeweils durch ein Semikolon (;) voneinander abgegrenzt. WICHTIG! Den brauchen wir sehr oft!
tabindex=""
Hiermit wird bei fokussierbaren Elementen die Reihen­folge festgelegt, mit der diese Elemente durch drücken der Tab- Taste angesprungen werden.
target=""
Hiermit wird das 'Ziel' (=target) für das Öffnen eines Hyperlinks festgelegt.
title=""
Die meisten Browser zeigen den hier angegebenen Text als Sprechblase/ Tool- Tipp an, wenn der Mauszeiger über auf dem Element ruht. Der Text wird zwischen den Anführungs­zeichen ("Ein Text") angegeben.
width=""
Weist einem Element eine Breite (=width) in Pixeln zu. Der Breite wird zwischen den Anführungs­zeichen ("888") als Zahl angegeben. Dieses Attribut wird von HTML 5 nicht unterstützt!

Mit einigen der oben aufgelisteten Attribute haben wir uns ja auf den vorher­gehenden Seiten schon beschäftigt - vor Allem dem style- und dem class-Attribut solltest du besonders Augenmerk widmen.
Nachteil bei dieser Formatierungsart ist, sie wirkt sich immer nur auf dieses eine HTML- Element aus, wo sie eben eingefügt ist. Wenn man mehrfach die gleiche Formatierung anwenden will, wird dass dann sehr schnell mühsam und unübersichtlich!
Was uns dann gleich zur nächsten Methode der Format­zuweisung bringt...

Möglichkeit 2 - einbinden eines zentralen CSS- Stylesheets

Was ist ein Stylesheet? Nun - ein Stylesheet ist nichts weiter als eine Liste, in der du HTML- Elementen an einer zentralen Stelle im Dokument die gewünschten Formatierungen zuweisen kannst. So ein Stylesheet sieht so aus:


<style type="text/css">
<!--
Hier werden deine Formatierungen eingefügt!
-->
</style>



Bitte dieses <style> </style> nicht mit der Tag-Ergänzung style="" verwechseln. Beides dient zwar der Formatierung, es sind aber zwei unterschiedliche Methoden!

Das sollte dir mittlerweilen aber bekannt vorkommen! Das übliche HTML- Konstrukt <style> </style>, mit dem die Liste geöffnet und geschlossen wird. Dann eine Tag-Erweiterung type="text/css", mit der dem Browser gesagt wird, was in dem folgend Bereich drinsteht.. und dann noch was Neues! Dieses <!-- -->. Das ist die Kennzeichnung für einen Bereich in dem ein Kommentar/ eine Bemerkung steht. Das kann man überall im Dokument benutzen, um eben Kommentare einzufügen, die aber nicht angezeigt werden sollen. Im Falle dieses Stylesheets dient diese Kenn­zeichnung als Kommentar dem Zweck, dass ältere Browser nicht aus Versehen deine Formatierungen auf dem Bild­schirm als Text anzeigen.

Dieses Stylesheet muss/sollte im Kopfbereich (<head> </head>) des Dokumentes stehen, damit es auch für das ganze Dokument wirksam wird. Der Browser arbeitet das Dokument sequentiell ab und alle Anweisungen werden erst dann wirksam, wenn der Browser sie auch gelesen hat.

Aber nun zum Inhalt des Stylesheets.

<head>
...

<style type="text/css">
<!--
p {
font-family: 'Times New Roman';
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #000000;
}
-->
</style>

...
</head>

Alle CSS- Formatanweisungen sind wie folgt aufgebaut:

Als Erstes steht das Element, für das die Formatierung gelten soll - im Beispiel oben das 'p', also der Text­absatz.
Damit legst du für alle Textabsätze in deinem Dokument, die mit <p> </p> aus­gezeich­net sind, die danach stehenden Eigen­schaften fest.

Diese Eigenschaften müssen in geschweiften Klammern '{' und '}' eingeschlossen sein!
Die öffnende geschweifte Klammer '{' findest du auf deinem Keyboard mit der Tastenkombination 'Alt Gr' + '7'.
Die schließende geschweifte Klammer '}'mit der Tastenkombination 'Alt Gr' + '0'.

Innerhalb dieser geschweiften Klammern werden dann nacheinander die gewünschten Eigenschaften aufgelistet und jeweils mit einem Semikolon ';' abgeschlossen. Hier ist etwas Vorsicht geboten, CSS ist ein Sensibelchen in Sachen richtiger Schreibweise - was verkehrt geschrieben ist, wird nicht ausgeführt und kann dazu führen, dass auch die folgenden Formatierungen nicht mehr erkannt werden. Aber wenn du dich an folgende einfache Regel hältst, sollte alles gut sein! Vor der Anweisung dürfen beliebig viele Leerzeichen sein, aber in der Anweisung nur Eines, nämlich das Leerzeichen hinter dem Doppelpunkt ':'. Und auch das kann noch weggelassen werden.

Aber zurück zu den Formatierungsanweisungen. Sie beginnen mit einer CSS- Eigenschaft, direkt gefolgt von einem Doppelpunkt. Dann kann ein Leerzeichen folgen und anschließend der Wert, der dieser Eigenschaft zugeordnet werden soll. Wenn der Wert aus einem numerischen Wert und einer Bezugseinheit besteht (z.B. 0.8em), dann ist der Dezimalpunkt (.) nur als Punkt zulässig! Und natürlich darf auch hier kein Leerzeichen sein, es folgt direkt nach der Zahl die Bezugseinheit und das Semikolon als Zeichen, dass diese Anweisung zu Ende ist!
Warum ist das mit den Leerzeichen so wichtig? Nun.. in CSS gibt es auch Wertzuweisungen, die aus mehreren Werten bestehen - z.B.
border: 1px solid #ffffff;
Hier dient das Leerzeichen als Trennungs­zeichen zwischen den Attributen und genau so würde CSS reagieren, wenn du Leer­zeichen an der falschen Stelle einfügst - deine Anweisung würde am Leer­zeichen getrennt und CSS versteht dich nicht mehr.

Eine vollständige Liste von CSS- Eigenschaften und was du sonst noch alles wissen solltest, findest du HIER!

Ein paar wenige Formatierungen, eben die, die man sehr oft benutzt will ich dir aber hier auch vorstellen.
Wir fangen mal mit Textformatierungen an.

font-family: Schriftartname1, 'zweite Schrift', Schrift3;
Hiermit wird die Schriftart (engl. font) festgelegt. Allerdings können Browser nur Schriftarten anzeigen, die auch auf dem betreffenden Rechner installiert sind. Es werden in der font-family: Anweisung deswegen üblicherweise mehrere Schriftarten angegeben. Der Browser arbeitet diese Liste von links nach rechts ab und benutzt die erste ihm bekannte (installierte) Schriftart. Schrift­arten­namen, die Leer­zeichen beinhalten, sind in einfache Anführungszeichen (' ') einzutragen.
Hier mal ein paar häufiger verwendete 'Fonts':
Arial
Arial Black
Comic Sans MS
Courier New
Impact
Lucida Console
Tahoma
Times New Roman
font-size: Wert;
Hiermit wird die Schriftgröße festgelegt.
Erlaubt sind numerische, absolute Werte, z.B. 0.8cm, 5mm, 24px, 0.3in....,
oder relative Angaben wie 1.2em ('em' ist die Größe des Eltern­elements), smaller, larger...
font-style: Wert;
Hiermit wird der Schriftstil festgelegt.
Erlaubt sind Angaben: normal=normal, italic=kursiv, oblique=schräggestellt
font-weight: Wert;
Hiermit wird der Strichstärke der Schrift festgelegt.
Erlaubt sind Angaben: normal=normal, lighter=dünner als Elternelement, bold=fett, bolder=fetter als Elternelement
line-height: Wert;
Hiermit wird die Höhe der Textzeile / Abstand zwischen den Zeilen festgelegt.
Erlaubt sind absolute und relative Größenangaben (Details siehe SelfHTML)
text-align: Wert;
Hiermit wird die Textausrichtung festgelegt.
Erlaubt sind die Angaben left, right, center, justify
color: Wert;
Hiermit wird die Schriftfarbe festgelegt.
Erlaubt sind hier Farbnamen wie red=rot, green=grün, blue=blau, yellow=gelb....
Ebenso auch ein alphanumerische Zahlencode in Form eine Hexadezimalzahl (#xxxxxx). Das vorgestellte # ist das Kennzeichen, dass der folgende Ausdruck eine Hexadezimal ist. Es folgen 3 Blöcke, bestehend aus je 2 Zeichen, wobei der erste zweistellige Block den Anteil von rot festlegt, der zweite Block den Anteil von grün und der dritte Block den Anteil von blau! Rein optisch vielleicht am ehesten so zu visualisieren #xxxxxx.
Jedem dieser Blöcke kann ein Wert von #00 bis #ff - entspricht dezimal dem Werte­bereich 0 biss 255 - zugewiesen werden. Daraus ergeben sich dann 2563 = 16.777.216 möglicher Farben.
Der Wert #000000 entspricht der Farbe schwarz.
Der Wert #ffffff entspricht der Farbe weiß.
Alle Werte, in denen die 3 Blöcke den gleichen Wert haben (z.B. #8b8b8b) ergeben einen mehr oder weniger hellen Grauton (zwischen schwarz und weiß)

Hier mal die möglichen Grautöne von #000000 bis #ffffff:

Und mit den anderen Farben darfst du jetzt gerne selber etwas spielen!
Ändere den Rotanteil und die Grafik zeigt dir, wie sich der Grünanteil (senkrecht von #00 - #ff) und der Blauanteil (waagerecht von #00 - #ff) auswirken.

Für diese hexadezimale Farbangabe gibt es auch noch eine 'Kurzform'. Hierbei werden statt der sechs Ziffern nur noch drei angegeben - #xxx.
Im Prinzip ist dann die Systematik identisch mit der, die für die sechs­stellige Hexzahl gilt, außer dass man für jeden Anteil (rot, grün, blau) nur noch einen Wertebereich von #0 bis #f (dezimal 0 bis 15) benutzt. Daraus ergeben sich dann 163 = 4096 unterschiedliche Farbtöne - immer noch mehr als genug für die meisten Zwecke. #fff ist immer noch weiß und #000 ist immer noch schwarz und alles dazwischen probiere am besten selber aus!

So... Schluss mit bunt, jetzt geht es wieder mit #000 auf #ccf weiter, denn ein paar CSS- Formatierungen möchte ich her noch vorstellen.

Zum Beispiel wie man Hintergründe von den meisten Block-Elementen etwas interessanter gestalten kann.... das gilt auch für die Elemente <html> </html> und <body> </body>, denn die sind ja auch nichts weiter als 'Container', in die man was reinpacken kann!

background-color: Wert;
Legt die Hintergrundfarbe für ein Element fest. Erlaubt sind alle CSS- Farbwerte.
background-image: url(pfad/dateiname);
Ein Hintergrundbild wird diesem Element zugewiesen. Wenn keine weiteren Angaben gemacht werden, wird das Bild über den gesamten Hintergrund 'gekachelt'.
Der Code für Hintergrundbild
<head>
<style type="text/css">
<!--
div.beispiel {
background-image: url(pfad/bild.jpg);
width: 90%;
height: 200px;
}
-->
</style>
</head>
<body>
<div class="beispiel"></div>
</body>
so sieht es aus - zunächst das Bild alleine
und so als Hintergrund zum <div>


background-repeat: Anweisung;
Legt die Art und Weise fest, wie und ob Hintergrundbilder wiederholt (gekachelt) werden.
background-attachment: Anweisung;
Legt das Verhalten des Hintergrundes beim Scollen der Seite fest - mögliche Anweisungen fixed, scoll, local.
background-image: linear-gradient(Wert1, Wert2, ...);
Fügt einen Farbverlauf in den Hintergrund ein - sehr vielseitig, da sich mehrere Farben und die Orientierung des Verlaufes in einer Anweisung zusammen fassen lassen.
Der Code für Farbverlauf
<head>
<style type="text/css">
<!--
div.beispiel {
background-image: linear-gradient(#aaaaff , transparent , #aaffaa);
width: 90%;
height: 200px;
}
-->
</style>
</head>
<body>
<div class="beispiel"></div>
</body>
Farbverlauf im Hintergrund


Uhh... da ist auch was Neues! Siehst du im Code die Zeile div.beispiel? Also die Element­bezeichnung div, gefolgt von einem Punkt und dann ein Name... hier zum Beispiel beispiel?
Dadurch wird mit CSS eine 'Klasse' definiert. Diese Klasse (engl. 'class') kann man dann im Dokument mit der Tag- Ergänzung class="Klassenname" mehrfach einem <div> zuweisen.
Der Code mit unterschiedlichen Klassen
<head>
<style type="text/css">
<!--
div {
width: 90%;
height: 30px;
border: 1px solid #0000ff;
float: left;
}
div.mit_bild {
background-image: url(pfad/bild.jpg);
}
div.einfarbig {
background-color: #aaffaa;
}
div.bunt {
background-image: linear-gradient(to right, yellow, #33ff33);
}
-->
</style>
</head>
<body>
<div>Das <div> ohne Klasse</div>
<div class="mit_bild">mit Bildhintergrund</div>
<div class="bunt">mit Farbverlauf</div>
<div class="einfarbig">einfarbiger Hintergrund</div>
</body>
<div>'s mit unterschiedlichen Klassen
Das <div> ohne Klasse

mit Bildhintergrund

mit Farbverlauf

einfarbiger Hintergrund


Warum machen wir sowas? Nun, mit der Formatzuweisung an <div> sind alle div's gemeint - mit der Formatzuweisung mittels CSS- Klasse, kann man nun gezielt den mit class="Klassenname" ausgezeichneten div's eine abweichende Formatierung zuweisen. Aber bitte beachten, das definierte Format des Elternelements (div) wird an die Kindelemente (div.Klassenname) vererbt. Wie in obigem Beispiel - alle Kindelemente sind mit der Größe und Rahmen des Elternelementes ausgestattet. Wenn du da was anders haben willst, dann musst du das in der Klasse eben anders festlegen.

Man kann auch eine mehr generelle Klasse definieren, die nicht an ein HTML- Element gebunden ist, sondern jedem Element zugewiesen werden kann. Dazu wird einfach in der style-Definition der Klassennamen mit dem vorstehenden Punkt (.Klassenname) mit den gewünschten Eigenschaften angegeben.
Der Code Zuweisung einer 'Klasse'
<head>
<style type="text/css">
<!--
.alles_rot {
color: #ff0000;
background-color: #ffaaaa;
}
-->
</style>
</head>
<body>
<h1 class="alles_rot">Eine Überschrift</h1>
<p class="alles_rot">Einen Text</p>
<p>Einem <span class="alles_rot">Span</span> im Text</p>
</body>
so sieht es aus

Eine Überschrift

Einen Text

Einem Span im Text


Aber zurück zu den Formatanweisungen. Rahmen (border) hatten wir ja schon einige male in den Beispielen angewendet - und hier jetzt etwas mehr im Detail.

border: Rahmendicke Rahmentyp Rahmenfarbe;
Mit der border: Anweisung werden in der Regel mehrere Formatzuweisungen gleichzeitig getätigt. Und zwar die Rahmendicke, der Rahmentyp und die Rahmenfarbe, jeweils durch ein Leerzeichen getrennt.
Für die Rahmendicke und Rahmenfarbe können alle in CSS zulässigen Werte für Dimension bzw Farben angegeben werden.
Für den Rahmentyp sind die Werte solid, dashed, dotted, double, groove, ridge, inset und outset zulässig.
Der Code für Rahmen
<head>
<style type="text/css">
<!--
div {
width: 90%;
height: 30px;
float: left;
}
div.solid {
border: 1px solid red;
}
div.dashed {
border: 2px dashed blue;
}
div.dotted {
border: 0.3em dotted #00ff00;
}
div.double {
border: 1mm double pink;
}
div.groove {
border: 5px groove #abc;
}
div.ridge {
border: 6px ridge yellow;
}
div.inset {
border: 4px inset #000000;
}
div.outset {
border: 4px outset black;
}
-->
</style>
</head>
<body>
<div class="solid">border: 1px solid red;</div>
<div class="dashed">border: 2px dashed blue;</div>
<div class="dotted">border: 0.3em dotted #00ff00;</div>
<div class="double">border: 1mm double pink;</div>
<div class="groove">border: 5px groove #abc;</div>
<div class="ridge">border: 6px ridge yellow;</div>
<div class="inset">border: 4px inset #aaaaaa;</div>
<div class="outset">border: 4px outset black;</div>
</body>
so sieht es aus
border: 1px solid red;


border: 2px dashed blue;


border: 0.3em dotted #00ff00;


border: 1mm double pink;


border: 5px groove #abc;


border: 6px ridge yellow;


border: 4px inset #000000;


border: 4px outset black;



Jede Menge Möglichkeiten zum spielen und ausprobieren!
Mit der Angabe 'border:' wird immer der Rahmen an allen vier Seiten des Elements formatiert - man kann jedoch auch mit 'border-top:', 'border-right:', 'border-bottom:' und 'border-left:' jede Seite individuell ansprechen und gestalten.
Und um die Verwirrung jetzt komplett zu machen, man kann auch einzelne Eigenschaften der vier Rahmenseiten mit 'border-color:', 'border-width:' und 'border-style:' festlegen. Wobei dann jeweils 4 Angaben folgen, die von oben - weiter im Uhrzeigersinn über rechts, unten nach links, die jeweiligen Werte zuweisen! Die Wertzuweisungen sind wieder jeweils durch ein Leerzeichen getrennt.
Der Code für Rahmen
<head>
<style type="text/css">
<!--
div.alles_einzeln {
width: 90%;
height: 50px;
float: left;
border-width: 5px 0.4em 3mm 6px;
border-style: dotted double groove solid;
border-color: red #00ff00 blue #000;
}
-->
</style>
</head>
<body>
<div class="alles_einzeln"></div>
</body>
so sieht es aus



... oh neeee... sieht gruselig aus, aber ich will ja keinen Schönheitspreis gewinnen, sondern nur zeigen, wie es geht!
Ach ja - wenn du auf runde Ecke stehst, dann kann man mit 'border-radius: Wert;' auch das einstellen! Oh ja... und das auch noch für jede Ecke einzeln - schau hier!

Aber nun zum letzten Bereich, den ich dir vorstellen möchte. Positionierung und Abstände:
position: Anweisung;
Hiermit wird die Positionierung eines Elementes im Textfluss festgelegt. Erlaubte Werte sind:
'absolute' - positioniert das Element unabhängig vom Textfluss. Das Element scrolled mit.
'fixed' - positioniert das Element unabhängig vom Textfluss. Das Element scrolled nicht mit.
'relative' - positioniert das Element relativ zum Elternelement.
'static' - positioniert das Element im Textfluss. Wenn nicht anders festgelegt, verhalten sich alle Elemente static.
left: Wert;
right: Wert;
top: Wert;
bottom: Wert;
Hiermit wird der Abstand der mittels absolute, fixed und relative positionierten Elemente relative zum linken, rechten, oberen und unterem Rand des Elternelementes festgelegt.
float: Anweisung;
Bestimmt das Verhalten eines mit 'position: static' positionierten Elementes im Textfluss. Mögliche Werte sind 'left' und 'right'. Das Element 'schwimmt' (float) am jeweils bestimmten linken oder rechten Rand seines Elternelementes. Ist genügend Platz vorhanden stapeln sich 'float-Elemente an der vorgegebenen Begrenzung.

Nicht ganz so einfach zu verstehen, aber mit etwas Ausprobieren kommt man dann doch recht schnell dahinter wie es funktioniert.
Wie sich zum Beispiel mit 'position: fixed' gekennzeichnete Elemente verhalten siehst du auf dieser Seite an den Navigationselementen oben und links. .. ach ja, dieser große Bereich, in dem hier die Inhalte stehen, ist ein div, der mit 'position: absolute' formatiert wurde.
Zu beachten ist, dass Elemente - gerade die, die mit 'fixed' und mit 'absolute' positioniert werden - nicht mehr im Textfluss stehen, sondern eben da eingefügt werden, wo du es eben festlegst. Inhalte, die sich im Textfluss an dieser Stelle befinden, werden dann einfach überdeckt.
Ebenso können sich auch positionierte Elemente gegenseitig überdecken und um dann zu bestimmen welches dieser Elemente im Vordergrund ist und welches dahinter angezeigt wird, gibt es folgende Anweisung:

z-index: Wert;
Hiermit wird die Positionierung des Elementes auf der Z-Achse angegeben. Wert ist als ganzzahlige Zahl anzugeben. Je größer Wert ist, um so näher ist das Element am Betrachter.
Der Code für z-index
<head>
<style type="text/css">
<!--
div {
position: absolute;
width: 150px;
height: 50px;
}
div.hintergrund {
left: 40px;
top: 10px;
border: 2px solid #f00;
background-color: #ccc;
z-index: 1;
}
div.vordergrund {
left: 50px;
top: 30px;
border: 2px solid #00f;
background-color: #0f0;
z-index: 2;
}
-->
</style>
</head>
<body>
<div class="hintergrund">z-index: 1;</div>
<div class="vordergrund">z-index: 2;</div>
</body>
so sieht es aus
z-index: 1;
z-index: 2;

Mit diesen Positionierungen solltest du dich ruhig etwas näher beschäftigen, denn der Aufbau und das Layout deiner Seite lässt sich damit ganz einfach realisieren.

Wir sind fast fertig - zum Schluss noch ein paar Worte zu Abständen in und um Elementen.
Dem Ganzen liegt das sogenannte Box-Modell zu Grunde, mit dem die Systematik des Aufbaues von Block-Elementen beschrieben wird:

margin: Wert;
margin: oben rechts unten links
;
Mit 'margin' wird der Rahmen / Abstand zu benachbarten Elementen festgelegt. Erlaubt sind alle in CSS zulässigen absoluten und relativen Größenangaben.
Folgt nur ein Wert 'margin: Wert;', so wird damit der Abstandsrahmen um das gesamte Element festgelegt.
Ebenso können vier Werte notiert werden 'margin: Wert1 Wert2 Wert3 Wert4;', die dann in der Reihenfolge 'oben', 'rechts', 'unten', 'links' die individuellen Abstände zu den Seiten des Elementes festlegen.
Mit 'margin-top: Wert;', 'margin-right: Wert;', 'margin-bottom: Wert;' und 'margin-left: Wert;' können die Abstände auch einzeln festgelegt werden.
Als Wert ist hier auch 'auto' zulässig:
Mit 'margin-left: auto; margin-right: auto;' werden Elemente (z.B. Bilder und Tabellen) zentriert dargestellt.
padding: Wert;
padding: oben rechts unten links
;
Mit 'padding' wird der Abstand festgelegt, den Inhalte des Elementes zum Rand des Elementes einhalten müssen. Erlaubt sind alle in CSS zulässigen absoluten und relativen Größenangaben.
Folgt nur ein Wert 'padding: Wert;', so wird damit der Innenabstand zu allen vier Seiten des Elementes festgelegt.
Ebenso können vier Werte notiert werden 'padding: Wert1 Wert2 Wert3 Wert4;', die dann in der Reihenfolge 'oben', 'rechts', 'unten', 'links' die individuellen Innenabstände zu den Seiten des Elementes festlegen.
Mit 'padding-top: Wert;', 'padding-right: Wert;', 'padding-bottom: Wert;' und 'padding-left: Wert;' können die Innenabstände auch einzeln festgelegt werden.
Der Code für margin und padding
<head>
<style type="text/css">
<!--
div {
width: 200px;
height: 80px;
border: 2px solid #f00;
background-color: #ccc;
}
div.aussenrand {
margin: 20px;
}
div.innenrand {
padding: 20px;
}
div.innen_und_aussen {
margin: 20px;
padding: 20px;
}
-->
</style>
</head>
<body>
<div>ohne 'margin' und ohne 'padding'</div>
<div class="innenrand">ohne 'margin' / mit 'padding'</div>
<div class="aussenrand">mit 'margin' / ohne 'padding'</div>
<div class="innen_und_aussen">mit 'margin' / mit 'padding'</div>
</body>
so sieht es aus
ohne 'margin' und ohne 'padding'
ohne 'margin' / mit 'padding'
mit 'margin' / ohne 'padding'
mit 'margin' / mit 'padding'

So - fertig! Fehlt jetzt nur noch die letzte und auch zu bevorzugende Methode, wie du deine Formatierungen in dein Dokument bekommst!

Möglichkeit 3 - einbinden eines externen CSS- Stylesheets

Wir haben uns jetzt eine ganze Weile mit CSS- Formaten beschäftigt und diese immer schön in eine interne Liste innerhalb dieses
<style type="text/css">
<!--
Deine Formatanweisungen
-->
</style>
Bereiches hineingeschrieben! Und das ist auch schon mehr als nur die halbe Miete. Nachteil bei diese Methode - in der Regel bestehen Webseiten aus mehreren Dokumenten und dieses interne Style-Sheet formatiert nur dieses eine Dokument, in dem es eben drin steht.
Um die selben Formatierungen auch in den anderen Dokumenten meiner Webseite nutzen zu können, müsste ich es in jedes Dokument nochmal hinein kopieren. Das ist sehr aufwendig und vor allem auch sehr schwer zu pflegen. Jede Änderung müsste ich ja x-mal wiederholen.
Einfacher und besser ist es ein externes Style-Sheet zu benutzen. In diesem externen Style-Sheet werden genau so deine Formatanweisungen eingetragen, wie wir es bisher gemacht haben, nur dass wir eine separates Textdokument dafür benutzen. Dieses Textdokument speichern wir mit einem beliebigem Namen und der Endung '.css' auf unsere Festplatte und teilen dann jedem Dokument unseres Webauf­trittes mit, wo es die Formatierungen findet:

<!DOCTYPE html>

<html lang="de">

<head>
<meta charset="utf-8">
<title>Name deiner Seite</title>

<link rel="stylesheet" type="text/css" href="beliebiger_name.css">

</head>

<body>

Deine Inhalte stehen hier!

</body>

</html>


Jede Änderung, die wir dann in dem externen Style-Sheet vornehmen, wird automatisch von allen zugehörigen Dokumenten erkannt und ist dort wirksam.


 

Achtung!

Diese Seite verwendet Cookies.
Wenn Du weiter auf dieser Seite
bleibst, eklärst Du Dich damit
einverstanden.

Für mehr Informationen bitte die
DATENSCHUTZBESTIMMUNGEN
zur Kenntnis nehmen.