HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Position ] [ Textumfluss ]

Position

Mit Hilfe von position können Sie Bereiche auf Ihrer Webseite genau positionieren.
Folgende Angabe zu position sind möglich:

position:absolute = Absolute Positionierung zum Elternelement
position:fixed = Absolute Positionierung zum Broserfnster (bleibt beim Scrollen sehen)
position:relative = Relative Positionierung zum Elternelement
position:static = Keine spezielle Positionierung (Normale Einstellung)

Der InternetExplorer und Netscape bis 6.0 unterstützt fixed nicht. In Kurs Browserweiche wird Ihnen ein Beispiel gezeigt, wie Sie den InternetExplorer dazu bewegen können, trotzdem fixierte Bereiche anzulegen, deshalt werde ich erst in diesen Kurs weiter darauf eingehen.

Mit position: absolute im zusammenhang mit top: ..px; und left: ..px; legen Sie fest, wo das Element absolute zum Elternelement positoniert wird. Dieses Funktioniert allerdings nur, wenn das Elternelement eine andere Positionsart hat, als static oder keine Angabe hat.

Mit position: relative im zusammenhang mit top: ..px; und left: ..px; legen Sie fest, wo das Element relative zum Elternelement positoniert wird. Wenn Sie z.B. left: 10px angeben, bedeutes das, dass dieses Element 10 Pixel weiter links positioniert wird, als dies normalerweise der Fall währe.

Gibt es bei absolute Position Überlappungen, wird normalerweise das zuerst notierte Element vom zuletzt notierten Element überdeckt. Mit z-index können Sie die Reihenfolge ändern.

  <html>
  <head>
   <title>Test</title>
   <style type="text/css">
    #box1 { 
      position:absolute; top:10px; left:10px; 
      width:100px; height:100px; z-index:1; 
      background:red; color:white; 
      border:solid 2px black;    
    }
    #box2 { 
      position:absolute; top:20px; left:120px; 
      width:100px; height:100px; z-index:2; 
      background:blue; color:white; 
      border:solid 2px black;    
    }
    #box3 { 
      position:absolute; top:200px; left:10px; 
      width:100px; height:100px; z-index:3; 
      background:green; color:white; 
      border:solid 2px black;    
    }
    #box4 { 
      position:absolute; top:220px; left:30px; 
      width:100px; height:100px; z-index:4; 
      background:navy; color:white; 
      border:solid 2px black;    
    }
    #box5 { 
      position:absolute; top:10px; left:300px; 
      width:200px; height:200px; z-index:5; 
      background:purple; color:white; 
      border:solid 2px black;    
    }
    #box6 { 
      position:absolute; top:50px; left:20px; 
      width:100px; height:100px; z-index:6; 
      background:yellow; color:black; 
      border:solid 2px black;    
    }
   </style>
  </head>
  <body>
    <div id="box1">Bereich 1</div>
    <div id="box2">Bereich 2</div>
    <div id="box3">Bereich 3</div>
    <div id="box4">Bereich 4</div>
    <div id="box5">Bereich 5
      <div id="box6">Bereich 6</div>
    </div>
  </body>
  </html>

Das ganze sieht so aus

Textumfluss

Mit float können Sie um ein Elelement den Text fließen lassen. Folgende angaben sind möglich:

float: left = Element wird links ausgerichtet
float: right = Element wird rechts ausgerichtet
float: none = Kein Textumfluß (normale Einstellung)

Der Textumfluss kann mit <br style="clear:left;"> normal fortgesetzt werden.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
   <title>float-Beispiel</title>
   <style type="text/css>
    * {
      font-family: Arial, Helvetica, sans-serif;
    }
    h1 { 
     float: left;
     font-size: 20px;
     color: #00A;
    }
    p {
     font-size: 14px;
     color: #000;
    }
   </style>
  </head>
  <body>
    <h1>Überschrift</h1>
    <p>Überschriften müssen nicht immer langweilig in der ersten Zeile stehen.<br>
    Mit float fließt der Text um die Überschrift herum.<br>
    Um den Textumfluß zu beenden benutzen Sie eine Zeilenumbruch mit dem Stylesheet 
    clear: left<br  style="clear:left;">
    Dann geht alles normal weiter</p>
  </body>
  </html>

Das ganze sieht so aus
Weitere Beispiele finden Sie unter Text um Grafik fließen lassen und Tabellen ausrichten.

back top next