KLAUS: Grafik unten rechts ausrichten

Beitrag lesen

Hallo Timmy

in CSS ist die Ausrichtung auf das Browserfenster abgestimmt. Probiere mal mit der <div>-LayerTechnik, und du wirst überrascht sein, wie einfach das geht:

<HEAD>
<TITLE>::: LAYER-StilTechnik :::</TITLE>
<style type="text/css">
<!--
body { background-image:url(hleiste01.gif); }

#bild001 { position:absolute; left:300px; top:100px; z-Index:1; }
#bild002 { position:absolute; right:170px; top:150px; z-Index:2; }
#bild003 { position:absolute; right:12px; bottom:220px; z-Index:3; }
#bild004 { position:absolute; left:240px; bottom:220px; z-Index:4; }
#txtfeld001 { position:absolute; left:180px; top:70px; z-Index:5; }
#txtfeld002 { position:absolute; right:12px; bottom:140px; z-Index:6; }

#bild001[id] { position:fixed; }
#textfeld002[id] { position:fixed; }

//Extra-ID.fixed für alle Browser (IEs), die die Fixierung nicht verstehen; sie setzen die Position immerhin auf absolute.
Den Ausdruck #bild001[id] OHNE Leertaste setzen!
//-->
</style>

</HEAD>
<BODY>
<div id="bild001"><img src="name01.gif" width="70" height="58" border="0 title="xxx"></div>
<div id="bild002"><img src="name02.jpg" width="70" height="58" border="0" title="xxx"></div>
<div id="bild003"><img src="name03.jpg" width="70" height="58" border="0" title="xxx"></div>
<div id="bild004"><img src="name04.gif" width="70" height="58" border="0" title="xxx"></div>

<div id="txtfeld001">
<table width="100px" height="160px">
 <td>1111</td>
 <td>2222</td>
</table>
</div>

<div id="txtfeld002">
<table width="140px" height="80px">
 <td>xxxx</td>
 <td>yyyy</td>
</table>
</div>

</BODY>

Anmerkung:
Layout wie im Printbereich !
TEXT in Tabellen formatieren !
BILD als Einzelbild ohne Text setzen !

z-Index:1; gibt die Layerlage an, wobei 1 ganz unten ist und 999 ganz oben
Fixierte Position bleibt beim Scrollen in der voreingestellten Position (scrollt nicht mit!), was jedoch nur Netscape 6++ und Opera 7 verstehen, der IE kapiert die Fixierung nicht.

right: Abstand vom rechten FensterRand,
left: Abstand vom linken FensterRand,
top: Abstand von oben,
bottom: Abstand von unten.

Gruss KLAUS