AW: CSS Bild Horizontal positionieren
Die Positionierung, an sich um ganz sicher zu gehen und auch html4 bzw. xhtml1 strict valide zu machen.
mittig:
Code:
[COLOR=#800000]<style type="text/css">[/COLOR]
[COLOR=#000080].[/COLOR][COLOR=#ff00ff]centerImage[/COLOR] [COLOR=#000080][B]{[/B][/COLOR]
[COLOR=#000080]text-align:[/COLOR][COLOR=#ff0000]center[/COLOR][COLOR=#000080];[/COLOR]
[COLOR=#000080]margin-top:[/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#ff0000]px[/COLOR][COLOR=#000080];[/COLOR][COLOR=#000080]
margin-bottom:[/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#ff0000]px[/COLOR][COLOR=#000080];[/COLOR][COLOR=#000080]
padding:[/COLOR][COLOR=#0000ff]0[/COLOR][COLOR=#ff0000]px[/COLOR][COLOR=#000080];[/COLOR]
[COLOR=#000080][B]}[/B][/COLOR][COLOR=#800000]</style>[/COLOR]
Code:
[COLOR=#008000]<div class="centerImage">[/COLOR]
<img src="imgName.gif" alt="image description" height="100" width="100">[COLOR=#008000]
</div>[/COLOR]
Im Endeffekt wird dadurch das Element was das Bild umschließt genutzt um das Bild zu zentrieren.
Links:
einfach "float:left" als style für das/die bild/bilder
Rechts:
einfach "float:right" als style für das/die bild/bilder
---
bezüglich dem "clear".
"Clear" benötigst du dann wenn du ein float aufheben möchtest.
Das ist schon ein recht umfangreiches Thema. Ich versuch es mal kurz zu umreißen.
Dazu erst einmal vorrausgeschickt (stichwort dokumentenfluss):
Webseiten Seiten werden durch sogenannte Auszeichnungssprachen
"erstellt" (bsp. XML und HTML).
Der Unterschied zu Programmiersprachen ist das diese z.B. nicht im Code
hin und her springen. Sondern der Browser nimmt sich quasi eine Datei und "rendert" ("zeichnet") diese entsprechend der Angaben nacheinander (von oben ach unten).
Stell dir das vor wie ein Mensch dieser hat einen Körper (body).
Nun möchte man diesen Mensch als Seite darstellen.
Der Körper hat ein paar bestimmte Dinge die man als Standard ansehen kann: Kopf, Oberkörper und Unterkörper ...
Das sieht als HTML z.B. wiefolgt aus:
HTML:
...
<body> <!-- hier beginnt der Körper -->
<div id="Kopf">
... alles was in den kopf gehört ...
</div>
<div id="Oberkoerper">
</div>
<div id="Unterkoerper">
</div>
</body> <!-- hier hört der Körper auf -->
...
Der Browser würde nun schritt für Schritt von Oben nach unten
den "Menschen" zeichnen. Angenommen du hättest zu diesem html code per css jedem Teil des Körpers ein passendes Hintergrundbild (und größe natürlich)festgelegt. Dann würden wir nun einen Menschen vor uns sehen.
Nun könntest du in jeden Bereich noch Unterbereiche machen um z.B.
spezifische Körperregionen darzustellen.
Der Browser würde also immer Stück für Stück alles Zeichnen
beim Kopf z.B. erst Haare, Stirn, Augen, Nase und Mund. Eines nach dem anderen.
Das ist Quasi der "Dokumentenfluss", eines nach dem anderen, alles braucht einen bestimmten Platz und da Haare, Stirn, Augen, Nase und Mund einen bestimmen Platz brauchen ist der Kopf größer als würde eines davon fehlen.
Es geht quasi Stück für Stück nach unten.
...
Nun ist eine Website aber kein Mensch und man möchte bestimmte Dinge
spezifisch darstellen.
Für sagen wir mal einen Artikel heißt das z.B.
Text + Bild
HTML:
<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
<img src="bild.jpg"/>
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</p>
Das würde hier bedeuten, der Browser zeichnet Text dann ein Bild und weiter Text. Ganz normaler Dokumentenfluss (da alles inline (also fließend in einer reihe) Elemente).
Nun könntest du für den absatz (p) generell sagen linksbündig, rechtsbündig oder zentriert. Je nachdem wird von dem Punkt ausgehend
in die entgegengesetzte richtung bzw. in beide Richtung Platz beansprucht der benötigt wird um den Inhalt darzustellen. Dies gilt jedoch allgemein, text und Bild.
---
bla bla bla
bla bla bla
---
bla bla bla
bla bla bla
---
---
Schön und gut, nun möchtest du aber gern genrell ganz normal linksbündigen Text haben aber das Bild soll rechts dargestellt werden.
Das Text soll links sein und das Bild umfließen.
----
bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
----
Das geht einfach mit "align" per css nicht. Du benötigst "float"
Was macht "float"?
"floated" man ein Element links oder Rechts wird es quasi aus dem Dokumentenfluss herausgenommen und links bzw. rechts an den Rand gesetzt.
Das geht auch mit mehreren Elementen. Es wird aber beim floaten der Elemente der Dokumentenfluss als die Reihenfolge wie die Elemente im Dokument stehen beachtet (auch wenn sie für nicht gefloatete Elemente nicht mehr in diesem Dokumentenfluss existieren /platz beanspruchen).
Besispiel:
Angenommen unser HTML sieht wie folgt aus
HTML:
<p>
<span id="1">-1-</span>
<span id="2">-2-</span>
<span id="3">-3-</span>
</p>
Nun sagen wir im css "span {float: left;}"
Nun sagen wir im css "span {float: right;}"
Also erst span 1 nach rechts, dann span 2 nach rechts und dann span 3.
Wozu braucht man nun aber "clear"
Beim floaten von Elementen passiert neben dem eben aufgeführten sichtbarem (und erwünschtem) noch folgendes.
Zurück zum Beispiel Mensch und Kopf.
Wie festgestellt hat der Kopf unter anderem "Haare, Stirn, Augen,
Nase und Mund".
Als HTML sieht das also z.B. wie folgt aus:
HTML:
<div id="kopf">
<p id="haare">...</p>
<p id="stirn">...</p>
<p id="augen">...</p>
<p id="mund">...</p>
</div>
Nun kommen wir bei unseren "Mensch-website"
auf die Idee die Augen und den Mund nach links zu floaten.
Im Normalfall ohne float stellt der Kopf für jedes Element mehr Platz zur Verfügung. Er zieht sich vertikal in die Länge da die Elemente Platz benötigen.
Mit float nehmen wir nun augen und mund aus dem Dokumentenfluss.
Sie werden (je nach größe und verfügbarem Platz) nebeneinander dargestellt.
Der Kopf stellt aber von sich aus nur Platz für Elemente im Dokumentenfluss bereit. Da Augen und Mund in dem beim Rendern nicht mehr drinnen sind, wird der Kopf quasi kleiner.
Um den Kopf dazu zu zwingen eine korrekte Größe zu haben müssen wir den normalen Dokumentenfluss wiederherstellen. Dazu geben wir in den Kopf nach dem Mund einfach noch das Kinn ein (was ja sowieso noch fehlte).
Und für das Kinn legen wir fest das es das Floaten unterbrechen soll (sonst würde es wenn platz ist auch noch neben die gefloateten Elemente kommen) und den normalen Dokumentenfluss wiederherstellen soll.
Anders gesagt wir geben dem Element die Eigenschaft "clear".
Was bedeutet das für den Fall von Artikel + text.
Ohne clear bei gefloatetem Bild gibt es z.b. folgende möglich Szenarien:
- Rote Rahmen stellt ein Absatz (p) mit rotem Rand dar Darstellung entspricht defakto dem Verhalten (einfach mal nachbauen und probieren)
Ich hoffe, das hat geholfen zu verstehen. wozu "clear" ist.
ich weiß das ist ein etwas längerer Beitrag geworden, aber
wann und wie man "clear" verwendet kann man glaub ich nur
richtig verstehen wenn man eben Weiß was der "Dokumentenfluss"
ist und in welcher Art und Weise "float" ihn "beeinflusst".
MfG
jack
