tutorials
  Positionierung
 

Positionierung:

 

Es gibt drei Möglichkeiten, die vom HTML erzeugten Kasten  auf einer Webseite zu positionieren:

  1. Flow: Zum normalen "Fluss" gehören nicht positionierte Block- und Inline-Elemente sowie Boxen mit relativer Positionierung (position:relative).

  2. Absolute Positionierung: Absolut positionierte Elemente werden aus dem Fluss herausgehoben und sind für die anderen Elemente nicht sichtbar. Dazu zählen position:absolute und position:fixed.

  3. Float: Schwebende, gefloatete Elemente sind ein Zwischending. Zuerst wird die Box im normalen Fluss positioniert, dann wird sie aus dem Fluss herausgehoben und schwebt so weit wie möglich nach rechts oder links.

Dies ist hervorragend, weil dies von allen Browsern nur gleich aufgefasst werden muss. 

Grafiken können mit float und clear einfacher und effektiver positioniert werden.

Oft wird  durch die Programmierung durch eine einfache Layout-Tabelle gelöst : die Positionierung von Grafiken im Fließtext einer Webseite.

Float: Schwebende Elemente:

Float ist eine CSS-Eigenschaft, die die Werte left oder right annehmen kann. To float heißt schweben und eine schwebende Box macht der Reihe nach drei Bewegungen:

  1. Sie erhebt sich aus dem normalen Fluss ("Flow") der Elemente.

  2. Sie schwebt  innerhalb der umgebenden Box so weit wie möglich nach oben.

  3. Oben angekommen schwebt sie soweit es geht nach links oder rechts.

Bestimmt die Art, wie die Positionsangaben verwendet werden.

absolute
Absolute Positionierung durch die Angaben left, top, right, bottom. Absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout. Die absolute Position wird relativ zu den Rändern des Eltern-Elements berechnet, wenn dieses ebenfalls positioniert ist, oder wenn es der Seiteninhalt (<body>) ist. Da sich der Seiteninhalt scrollen lässt, werden absolut positionierte Elemente mitgescrollt.
relative
Relative Positionierung vom normalem Fluß. Die normale Position ist wie bei static im normalem Textfluß. Die Positionierungsangaben left, top, right, bottom verschieben das Element aus dieser Position. Die nachfolgenden Elemente verhalten sich so, als wäre das Element nicht verschoben
fixed
Wie absolute, jedoch bleibt das Element beim Scrollen stehen.
static
Positionierung im Textfluss. Die Angaben left, top, right, bottom sind unwirksam.

 

<style type="text/css">
<!--
div.swfbanner{position:absolute;left:50%;top:48px;margin-left:-500px;}
-->
</style>

<div class="swfbanner">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="921" height="104" >
<param name="movie" value="SWF URL">
<param name="quality" value="High">
<embed src="SWF URL" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="921" height="104" ></object>
</div>



div kannst man auch durch id oder td ersetzen

swfbanner ist der Name der Klasse, der ist immer frei wählbar

URL von der swf-Datei, die wir upgeloded haben

Zentrierte Positionierung

heigth und width kann man anpassen


Der Flash Code

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="921" height="104" >
<param name="movie" value="SWF URL">
<param name="quality" value="High">
<embed src="SWF URL" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="921" height="104" ></object>


So kann man Bilder, Texte, Grafiken positionieren - Klasse definieren:

<div class="text">
Hier kommt mein Text hin.
</div>



und positionieren:

<style type="text/css">
<!--
div.text{position:absolute;left:50%;top:48px;margin-left:-500px;}
-->
</style>


so wird eine Bilddatei positioniert:

<style type="text/css">
<!--
img.bild_1{position:absolut;left:33px;top:33px;}
-->
</style>


und dieser Code dazu:

<img class="bild_1" src="BILD ADRESSE" />

 

 
 
Aktualisieren # Diese Seite Drucken ein Bild Zurück Vor ein Bild ein Bild ein Bild nur IE

Impressum | Rechtliche Hinweise | News

© success4you , Tutorials-Area 2007

 
 
http://www.bambusratte.com/taf.php?%20bgcolor=c5c5c5&txtcolor=000000&anrede=s&site=http:tutorials-%20area.de.tl&bgpic=http:img.webme.com/pic/t/tutorials-area/tutback2.gif&nametaf=Tell-A-Friend
Diese Webseite wurde kostenlos mit Homepage-Baukasten.de erstellt. Willst du auch eine eigene Webseite?
Gratis anmelden