 |
|||
| HSG |
|
Experimente
Benutze exp.html mit der css-Datei exp.css.
- Schaue dir zunächst die Ausgangspositionen an.
- Ergänze in der css-Datei bei #a1 'float:left; width:100px;'. Der erste Absatz wird dadurch aus dem normalen Fluss der Elemente herausgenommen. Der zweite Absatz 'kümmert' sich nicht um den ersten. Das sieht man an der Hintergrundfarbe. Allerdings 'fließt' der Text um das 'schwebende' Element.
- Ergänze für #a1 '#margin-top:2px;'. Was passiert?
- Beachte, dass vertikal aneinander stoßende Ränder (margins) sich überlappen. Diese Überlappung ist für 'floatende' Elemente ausgenommen. Setze für h1 einen dünnen Rand. Experimentiere mit margin-bottom von h1 und margin-top von #a1 und #a2, um das zu bestätigen.
- Was passiert, wenn mehrere Elemente mit float:left aufeinander folgen? Achte auf die Ränder.
- Schaue dich ein wenig bei selfhtml um.
float und clear
Bilder (oder andere Elemente) kann man z.B. in einen Absatz einfügen und mit float:left links an den Rand setzen. Der nachfolgende Text fließt dann rechts um das Bild herum. Zusammen mit float muss die Breite mit width angegeben werden. Sehr angenehm ist, dass das Bild fest mit dem Absatz verbunden ist und z.B. auch mitscrollt.
<img src="bild.gif" width="154" height="78" alt="Bild" style="float:left; width:154px" />
Das Ganze funktioniert auch mit float:right. Es gibt leider keine einfache Möglichkeit,
das Bild so zwischen dem linken und rechten Rand zu positionieren, dass der Text es umfließt.
Mit clear:left oder clear:right oder auch mit clear:both im Nachfolgeelement wird das
'Hochfliessen' verhindert. Hier im Beispiel bei der folgenden Überschrift.
Beispiel
Absolute und relative Positionierung
Man kann mit CSS einem Element einen genauen Platz auf der Seite zuweisen. Dabei beziehen sich die Koordinaten immer auf das übergeordnete Element. Will man beispielsweise dem Schriftzug ABC einen Ort zuweisen, so steckt man ihn zunächst in einen 'Container', z.B. in ein div-Element und gibt Positionsart und die Koordinaten an.
<div style="position:absolute; top:540px; left:1200px; color:blue; font-size:70px"> ABC <div style="position:absolute; top:-20px; left:70px; color:cyan; font-size:70px"> DEF </div> </div>
Bei der Positionierungsart 'relative' beziehen sich die Koordinaten auf die Stelle , wo das Element ohne Positionierung wäre. So wurde im letzen Satz das Wort 'Stelle' 10px nach oben und 20px nach links verschoben.
<span style="position:relative; top:-10px; left:-20px; color:red;">Stelle</span>
Links
- Einführung in CSS-basierte Layouts bei selfhtml
- CSS Positioning - www.brainjar.com