nicht angemeldet
Hallo Doc,
Kann man da nicht wie float:left oder float:right etwas mit top und bottom machen?
Ich habs jetzt nicht ausprobiert, aber kannst du nicht zwei Blockelemente nehmen und eines eben top:0; und das andere bottom:0; ausrichten?Hmh, habs ausprobiert, da tut sich nix! Es wäre ja dann eine relative Angabe innerhalb des <td> Elements, aber nichts tut sich. Klar, wenn ich es absolut setze dann rührt sich was, aber ich will ja innerhalb der Tabellenzelle bleiben und nicht absolut zum Bildschirmrand arbeiten.
folgende nicht besonders schöne Konstruktion führt zum gewünschten Ergebnis:
a) packe die zwei Textbereiche in ein Containerelement.
b) sorge z.B. mit position: relative dafür, dass das Containerelement
nicht position: static besitzt.
c) gib dem Containerelement eine angemessene Höhe
d) Lass den ersten Textbereich im normalen Fluss, somit klebt er oben.
e) Positioniere den zweiten Textbereich absolut mit bottom: 0.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
[code lang=css] table {
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid black;
width: 400px;
}
.container {
position: relative;
width: 400px;
height: 100px;
border: 1px solid green;
}
.oben {
border: 1px solid blue;
}
.unten {
position: absolute;
width: 100%;
border: 1px solid red;
bottom: 0;
}
~~~ </style>
</head>
<body>
<h1>Positionierung innerhalb einer Tabellenzelle</h1>
<table>
<tr>
<td>
<div class="container">
<div class="oben">Oben</div>
<div class="unten">Unten</div>
</div>
</td>
</tr>
</table>
</body>
</html>[/code]
Lass Dir diese table-Suppe mit div-Einlage gut schmecken ...
Freundliche Grüße
Vinzenz
apsel