|| Beitrag erstellt von: develop am 26. Oktober ||
CSS - Sprites
|| Beitrag erstellt von: develop am 27. August ||
CSS - Float / Clear
FLOAT
Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.
<**!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<**html><**head><**title>float<**/title>
<**/head><**body>
<**h1 style="width:400px; float:left; color:red">Überschrift mal anders<**/h1>
<**p style="font-size:120%">Eine Überschrift
muss nicht immer einen langweiligen, über die ganze
Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
seitlich vom Text stehen, und der Text fließt um die
Überschrift. Auch so kann man lange Texte mal anders gestalten als
sonst üblich.<**/p>
<**/body><**/html>
Erläuterung:
Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen. Folgende Angaben sind möglich:
left = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.
right = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.
none = Kein Umfluss (Normaleinstellung).
Beachten Sie:
Wenn Sie für ein Element eine Angabe zu float notieren, mussten Sie gemäß CSS2 auch eine Angabe zu nach oben width definieren. Gemäß CSS 2.1 (und der tatsächlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.
CLEAR
Wenn Sie mit nach oben float einen Textumfluss definieren, möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.
<**!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<**html><**head><**title>clear<**/title>
<**/head><**body>
<**div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center">
Kapitel<**br>
<**span style="font-family:Algerian,serif; font-size:96px; color:red">
1 <**/span><**/div>
<**p style="font-size:120%">In diesem Kapitel geht es um Einführendes.<**/p>
<**p style="clear:left">Dann kommen wir mal zur Sache: ...<**/p>
<**/body><**/html>
Erläuterung:
Mit clear: können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind möglich:
left = Erzwingt bei float:left die Fortsetzung unterhalb.
right = Erzwingt bei float:right die Fortsetzung unterhalb.
both = Erzwingt in jedem Fall die Fortsetzung unterhalb.
none = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt, eine seitliche, große Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.
Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float
|| Beitrag erstellt von: develop am 19. August ||
CSS - Seite zentrieren
body {
padding: 0;
margin: 0;
}
#zentrieren {
margin-left:auto;
margin-right:auto;
Width: 800px;
}
aufzurufen:
<**div id="zentrieren">
Dieses 800px breite Div ist zentriert!
<**/div>
** entfernen
|| Beitrag erstellt von: develop am 30. Juli ||
CSS - Externe Css Datei einbinden
<**link rel="stylesheet" type="text/css" href="yourfile.css">
** Entfernen
|| Beitrag erstellt von: develop am 29. Juli ||
CSS Architektur / Syntax
<**style type="text/css"> // ohne**
body {background-color: Black ; color: White }
.eineclass { color: Red }
#eineID { color: Blue }
a:link { text-decoration:none; }
div { width: 800px }
<**/style> // ohne**