Grundlagen CSS
Der letzte "Schliff"
So, und damit sind wir schon - beinahe - an Ende unseres kleinen "Grundlagen-Kurses" für CSS. Das letzte Thema, womit wir uns noch beschäftigen wollen ist das Thema "Positionieren von HTML-Elementen". Viele haben vielleicht bis heute standardmässig Tabellen eingesetzt, mit den Sie Elemente im HTML-Dokument positioniert haben. Die "Umstellung auf CSS" heisst nun: Durch pixelgenaues Verschieben einzener Elemente kann ich sie genau an den von gewünschten Platz setzen, ohne eine Grundstruktur, wie sie eine Tabelle darstellt, zu benötigen.
Positionierung
Kapitel 14
Positioniert wird in CSS mit einer Kombination mehrerer Eigenschaften. Die Eigenschaft position ist für die Art der Positionierung zuständig und kann Werte enthalten wie absolute (absolut zum Browserfenster), relative (relativ zur DER Position die das Element EIGENTLICH einnehmen würde), sowie fixed (verhält sich wie "absolute", ist jedoch nicht scrollbar) und static (benutzt die Voreinstellung).
Auch hier kann ich wieder mit weiteren Angaben wie top (Abstand von oben), left (Abstand von links), bottom (Abstand von unten) und right (Abstand von rechts) arbeiten - und auch hier wird als Wert eine numerische Angabe erwartet, die in einer in CSS üblichen Masseinheit angegeben werden muss. Dabei KöNNEN, aber MüSSEN nicht immer alle 4 Angaben gleichzeitig gemacht werden.
Beispiel
(Absolute Positionierung)
Die Anweisung:
#kasten1 { position:absolute; top:1150px; left:450px; }
erzeugt zum Beispiel:
Das Fenster erscheint also - absolut zum Browserfenster gesehen, genau an DER Position, die ich definiert habe: 1150 Pixel vom oberen Rand und 450 Pixel von linken Rand entfernt.
Wenn ich nun Elemente NEBENEINANDER positionieren möchte, ist es auch wichtig, die Breite eines Elementes festzulegen. In der CSS wird diese Angabe mit der Eigenschaft width definiert, der als Wert wiederum eine numerische Angabe zugewiesen wird.
Beispiel
(Absolute Positionierung mit Breitenangabe)
Unsere Box im oberen Beispiel ragt nun etwas über den Rand der "Beispielbox" hinaus. Unter anderem ist ein Grund dafür DER, dass wir der Box keine Breite mitgegeben haben, was wir aber nun nachholen wollen. Die korrigierte Anweisung lautet also:
#kasten2 { position:absolute; top:1690px; left:410px; width:270px;}
erzeugt dann:
Breitenangaben können auch relativ gemacht werden (z.B. %-Angaben). Diese beziehen sich dann auf die Grösse des Elternelementes.
Was fehlt denn jetzt noch? Ach ja, die Höhe! Selbstverständlich kann ich einem Element auch ein feste (oder relative) Höhe zuweisen. Die CSS-Eigenschaft, die das bewirkt, heisst height und erwartet als Wert - wie wir das bereits kennen - eine numerische Angabe als Wert.
Aber Achtung! Habe ich einem Element sowohl eine feste Höhe, als auch eine feste Breite zugwiesen, so kann es passieren, dass der Inhalt dieses Elementes zu gross ist für den ihm zugewiesenen Platz. Das hätte zur Folge, dass alles an Inhalt, welches über die fest definierte Grösse hinausgeht, einfach "abgeschnitten" würde. Um dieses Problem zu vermeiden, kann ich in der CSS einem Element noch die Eigenschaft overflow zuweisen mit den möglichen Werten scroll (Scrollbalken wird angezeigt), auto (je nach Grösse des Inhaltes wird ein Scrollbalken angezeigt oder auch nicht) und hidden (es wird grundsätzlich kein Scrollbalken angezeigt).
Beispiel
(Fest positionierte Elemente mit und ohne overflow)
Um das zu verdeutlichen, passen wir nochmals unsere hellgrüne Beispielbox an. Zunächst einmal bekommt sie eine neue Positionierung, damit auch da erscheint, wo wir sie hin haben wollen - zusätzlich versehen mit fester Höhe und Breite:
#kasten3 { position:absolute; top:2520px; left:410px; width:270px; height:45px; overflow:hidden;}
Und da ist dann wieder....
Wir sehen deutlich, dass hier der Inhalt "abbricht". Scheinbar sollte der Text eigentlich länger geworden sein, aber mehr als die von mir definierten 270 x 45 Pixel Platz habe ich leider nicht zur Verfügung.
Also ändere ich meine CSS-Angabe in "overflow:auto". Die Anweisung lautet also nun:
#kasten4 { position:absolute; top:2870px; left:410px; width:270px; height:45px; overflow:auto;}
Es wird also automatisch entschieden, ob ein Scrollbalken - horizontal oder vertikal - benötigt und dieser bei Bedarf angezeigt wird.
Wie wir sehen, hat die 2. Beispielbox oben nun einen Scrollbalken erhalten und wie sind wieder in der Lage, den gesamten Inahlat dieses Elementes - trotz begrenzter Grössen - lesen zu können.
Das letzte Thema, welchem wir uns in unserem Kleinen Grundlagenkurs widmen wollen, ist das Thema "Textfluss". Hiermit lassen sich schöne Effekte in Verbindung mit Boxen, Rahmen, Bildern und anderen Elementen erzielen, die von dem umgebeneden text quasi umflossen werden. Die CSS-Eigenschaft hierzu heisstfloat. Dieser Eigenschaft wird als Wert die Richtung des Textumflusses mitgegeben - also left, wenn das Element links steht und der Text rechts daran vorbeifliesssen soll und right, wenn das Element rechts steht und de Text links vorbeifliessen soll.
Beispiel
(Die Floart-Anweisung)
Und auch hierfür ein kleines Beispiel:
Wir kreieren eine neue Box, in der wir einiges an Infotext zur Verfügung stellen wollen. Diese Textbox soll jedoch von dem EIGENTLICHEN Haupttext umflossen werden. Unsere Infobox placieren wir daher an den linken Rand:
#kasten5 { width:150px; height:170px; position:relative; top:10px; left: 0px; font-style:normal; overflow:hidden; background-color:#00FF00; color:#000000; font-size:10px; line-height:100%; padding: 5px; margin: 5px; border: 5px inset; border-color:#fff;}
Unsere Infobox ist fertig...
Nun möchte ich meinen Bekannten "Lorem ipsum" Blindtext um diese Infobox "herumfliessen lassen. Dazu ergänze ich meine obige Anweisung für den "Kasten5" um die Angabe float:left;. Damit erhalte ich dann in der Praxis folgendes Ergebnis:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Am letzten Beispiel können wir wunderbar sehen, dwie der Haupttext rechts um unsere Infobox "fliesst", während die Box (das Element) links steht. ich werde es mir an diese Stell sparen, das gleiche Beispiel für den umgekehrten Fall zu zeigen - also wenn das Element rechts steht und der Text es links umfliessen soll. Der einzige Unterschied dazu ist nämlich nur die Anweisung, die in diesem Fall heissen müsste: float:right;.
Und das war es erst einmal in unserem CSS-Grundlagen-Kursus. Ich hoffe, dass Sie daraus einiges mitnehmen konnten, was Ihnen dabei hilft, die in den nächsten Kapiteln - in den "CSS-Spielereien" - das eine oder andere zu verstehen und nachbauen zu können. Vielen Dank für Ihre Aufmerksamkeit.