CSS und Tabellenlayout

[illbert]

Mal wieder so eine richtig schöne Anfängerfrage. Thema: CSS Layerpositionierung.

mit position:relative sage ich einem Element, dass es sich relativ zu sich selbst irgendwo hinschieben soll.

mit position:absolute, dass es sich gemessen zu seinem Elternelement irgendwo parken soll. Dies aber nur therorethisch, weil zumindest der IE extrem dämlich ist und bei absolute vom Bildschirmrand aus misst.

Die eigentliche Frage: wie sage ich einem Element, dass es sich relativ zu einem anderen Element irgendwo hintun soll, z.B. genau drüber?

[Cheatah]

Hi,

mit position:absolute, dass es sich gemessen zu seinem Elternelement irgendwo parken soll.

gemessen zum innersten Vorfahr, welcher ein position != static besitzt, bzw. bei Nichtvorhandenseins eines solchen am Viewport.

Dies aber nur therorethisch, weil zumindest der IE extrem dämlich ist und bei absolute vom Bildschirmrand aus misst.

Ausnahmsweise verhält sich der IE hier mal korrekt.

Cheatah

[Hans-Peter]

hallo Illbert,

mit position:relative sage ich einem Element, dass es sich relativ zu sich selbst irgendwo hinschieben soll.

wie kann ein element sich zu sich selbst positionieren?
natürlich positioniert es sich relativ zu einem anderen element.

mit position:absolute, dass es sich gemessen zu seinem Elternelement irgendwo parken soll.

hier positionierst du, wie der name schon sagt absolut. zum browserfenster, nicht elternelement (es sei denn html, dann ist das elternelement sozusagen das browserfenster)

Dies aber nur therorethisch, weil zumindest der IE extrem dämlich ist und bei absolute vom Bildschirmrand aus misst.

hier ist er (ausnahmsweise) mal korrekt.

gruß
HP

[Cheatah]

Hi,

wie kann ein element sich zu sich selbst positionieren?
natürlich positioniert es sich relativ zu einem anderen element.

möchtest Du das nicht noch mal nachlesen?

hier positionierst du, wie der name schon sagt absolut. zum browserfenster, nicht elternelement (es sei denn html, dann ist das elternelement sozusagen das browserfenster)

Auch hier hast Du noch ein wenig Nachholbedarf.

Cheatah

[Hans-Peter]

hi zurück,

wie kann ein element sich zu sich selbst positionieren?
natürlich positioniert es sich relativ zu einem anderen element.

möchtest Du das nicht noch mal nachlesen?

ähm, also, naja ... gib mir tips

hier positionierst du, wie der name schon sagt absolut. zum browserfenster, nicht elternelement (es sei denn html, dann ist das elternelement sozusagen das browserfenster)

Auch hier hast Du noch ein wenig Nachholbedarf.

nun komm schon, lass dich nicht drängeln ...

es ist heiss hier

gruß
HP

[Cheatah]

Hi,

wie kann ein element sich zu sich selbst positionieren?
natürlich positioniert es sich relativ zu einem anderen element.
möchtest Du das nicht noch mal nachlesen?
ähm, also, naja ... gib mir tips

Tipp: Mit position:relative positioniert man ein Element relativ zu seiner Position.

hier positionierst du, wie der name schon sagt absolut. zum browserfenster, nicht elternelement (es sei denn html, dann ist das elternelement sozusagen das browserfenster)
Auch hier hast Du noch ein wenig Nachholbedarf.
nun komm schon, lass dich nicht drängeln ...

Siehe mein anderes Posting in diesem Thread. Die Details erfährst Du - wie immer - beim W3C.

Cheatah

[Hans-Peter]

danke Cheatah, habs gelesen.

ja, ja, mit der relativitätstheorie ist das net ganz so eifach.

gruß
HP

[Gernot Back]

Hallo Illbert,

mit position:relative sage ich einem Element, dass es sich relativ zu sich selbst irgendwo hinschieben soll.

mit position:absolute, dass es sich gemessen zu seinem Elternelement irgendwo parken soll. Dies aber nur therorethisch, weil zumindest der IE extrem dämlich ist und bei absolute vom Bildschirmrand aus misst.

Nein, so wie es der IE macht, amchen es alle anderen Browser auch, sie beziehen sich auf den absoluten Nullpunkt des Bildschirms oben links, und das ist auch richtig so.

Die eigentliche Frage: wie sage ich einem Element, dass es sich relativ zu einem anderen Element irgendwo hintun soll, z.B. genau drüber?

Vielleicht hilft dir das hier weiter?

http://de.selfhtml.org/javascript/objekte/all.htm#offset_parent

Gruß Gernot

[illbert]

ich versuche, meine Frage mal anders zu stellen...
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?

[schwarze Piste]

Tachchen!

Den Tipp mit position:relative hast du schon bekommen.
(inkl. Lehrstunde über die Bedeutung von relative)

Tipp von mir: Es sind auch negative Werte erlaubt!

Gruß

Die schwarze Piste

[Axel Richter]

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">&nbsp;</div>
   <div id="d2">&nbsp;</div>
   <div id="d3">&nbsp;</div>
 </td>
</tr>
</table>
<p>nachher</p>
</body>
</html>

viele Grüße

Axel

[illbert]

Vielen Dank für die Ausführliche Antwort :-)
Das Prinzip ist glasklar - nur leider dem Netscape (7.1) nicht - der bläst das sample total auseinander.

Nunja, werde ich mir mal was anderes überlegen. Aber zumindest kann ich für heute behaupten, mal wieder was gelernt zu haben ;-)

[Axel Richter]

Hallo,

Das Prinzip ist glasklar - nur leider dem Netscape (7.1) nicht - der bläst das sample total auseinander.

Ja, das liegt an der dummen LayoutTabelle ;-)). So sollte es auch dort gehen:

<!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 {margin-left:100px;}
#BehaelterDIV {position:relative; width:300px; height:300px; border:1px solid black; 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="BehaelterDIV">
    <div id="d1">&nbsp;</div>
    <div id="d2">&nbsp;</div>
    <div id="d3">&nbsp;</div>
   </div>
 </td>
</tr>
</table>
<p>nachher</p>
</body>
</html>

Man könnte die dumme LayoutTabelle auch ganz weglassen. Außerdem sollte man die DIV#d1-DIV#d3, je nach Elementinhalt, sinnvoller auszeichnen, etwa als A- oder P-Elemente.

viele Grüße

Axel