Zum Positionieren von Objekten

Zum freien Positionieren von Objekten (Texte, Bilder, Tabellen, ...) auf dem Bildschirm bestehen in HTML nur beschränkte Möglichkeiten. Man behilft sich mit (unsichtbaren) Tabellen, auch Tabellen in Tabellen, was den Quelltext sehr schnell unübersichtlich macht, wie die Quelltexte zeigen, die mit WYSIWYG-Editoren (what you see is what you get) generiert wurden.


In manchen Fällen kann aber die Holzhammer-Methode "Leerbild" durchaus nützlich sein. Das Leerbild, z.B. "GIF-Bilder/Leerbild.gif", wird mit einem beliebigen Grafikprogramm generiert, es genügt die Größe 1*1 Pixel. Als Datei ist das GIF-Bild nur 43 Byte groß. Das Bild kann im img-Tag mit "width" und/oder "height" beliebig skaliert werden.
Text nach Leerbild, das mit "width" auf 100 Pixel und "height" auf 1 Pixel skaliert wurde.

Der relevante Teil des Quelltextes:

   
       <img src="GIF-Bilder/Leerbild.gif" alt="" width="100" height="1">Text nach Leerbild, das ...
   

Echtes freies Positionieren ist nur mit Cascading Style Sheets (CSS-Stilvorlagen) möglich.
Dieses Thema wird ausführlicher erst in späteren Kapiteln behandelt.
Für den sofortigen Gebrauch sei ein kleiner auszugsweiser Vorgriff erlaubt,
der aber einen großen Teil der Praxisfälle abdecken dürfte:

Blume
Blume
Mit Cascaded Style Sheets sind pixelgenaue Positionierungen und somit auch Überlappungen von Objekten möglich
Mit Cascaded Style Sheets sind pixelgenaue Positionierungen und somit auch Überlappungen von Objekten möglich




Der relevante Teil des Quelltextes (mit Vorgriff auf CSS-Stilvorlagen):

   
   <div style="position:absolute; top:350px; left:552px">
     <img src="GIF-Bilder/Blume-Tr.gif" alt="">Blume
   </div>
   <div style="position:absolute; top:375px; left:490px">
     <img src="GIF-Bilder/Blume-Tr.gif" alt="">Blume
   </div>

   <div style="position:absolute; top:485px; left:30px: color:black">
     Mit Cascaded Style Sheets sind pixelgenaue Positionierungen
     und somit auch Überlappungen von Objekten möglich
   </div>
   <div style="position:absolute; top:486px; left:31px; color:yellow">
     Mit Cascading Style Sheets sind pixelgenaue Positionierungen
     und somit auch Überlappungen von Objekten möglich
   </div>
  

Bei "position" sind folgende Positionsarten möglich:


Zurück zur Startseite