nicht angemeldet
Hallo,
ich habe eine Tabelle mit einer Zelle. Innerhalb der Zelle möchte ich mehrere genau gleich große Elemente genau kongruent übereinanderlegen, und zwar, ohne auf den Abstand zum Bildschirmrand angewiesen zu sein, da dieser variieren kann. Gibt es hier eine Lösung ohne Javascript?
Ja, die Lösung heißt CSS, genauer position: ;-)).
Erklärung zu den Angaben bei position:
Die Standardposition eines Elements ist static. Damit bekommt das Element seine Position durch den Elementfluss, in Abhängigkeit von den anderen Elementen des Dokuments.
Mit position:relative kann dem Element über top: left: right: und bottom: eine Verschiebung seiner Position relativ zu seiner normalen (static) Position vorgegeben werden. Außerdem wird das Element aus dem normalen Elementfluss genommen und kann nun, als Elternelement, die Basis für absolute Positionen seiner Kindelemente sein.
Mit position:absolute orientieren sich die Position des Elements und auch die Angaben von top: left: right: und bottom: an dem nächsten Elternelement, welches _nicht_ static positioniert ist. Gibt es kein solches Elternelement, dann orientieren sie sich am Viewport.
Wenn man also ein Elternelement auf position:relative setzt, ohne zusätzlich top: left: right: oder bottom: anzugeben, dann sieht es weiterhin wie static aus, kann aber als Basis für position:absolute dienen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positionen</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#dummeLayoutTabelle {position:relative; width:300px; height:300px; border:1px solid black; margin-left:100px;}
#dummeLayoutTabelle td {background-color:#FFFF00;}
#d1 {position:absolute; top:0; left:0; background-color:#FF0000; width:50px; height:50px;}
#d2 {position:absolute; top:125px; right:125px; background-color:#00FF00; width:50px; height:50px;}
#d3 {position:absolute; bottom:0; right:0; background-color:#0000FF; width:50px; height:50px;}
-->
</style>
</head>
<body>
<h1>Vorher</h1>
<table id="dummeLayoutTabelle">
<tr>
<td>
<div id="d1"> </div>
<div id="d2"> </div>
<div id="d3"> </div>
</td>
</tr>
</table>
<p>nachher</p>
</body>
</html>
viele Grüße
Axel