nicht angemeldet
position? block-level? inline? - von allem ein bischen!
Liebes Forum,
zu folgendem Code quält mich ein Problem:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>noch kein Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#el_1 {position:relative;background-color:red}
-->
</style>
</head>
<body>
<p id="el_1">Mein Element</p>
</body>
</html>
Das P-Element mit der id="el_1" ist ein ganz normales Block-Level Element. Gemäß CSS-Spec wird bei der Angabe background-color der Content- und der Padding-Bereich der Element-Box mit der Hindergrundfarbe eingefärbt.
Bis hierhin ist die Sache klar.
Aber: Wenn ich die Eigenschaft position auf absolute setze, dann wird aus meinem Block-Level-Element plötzlich ein Inline-Element. Jedenfalls verhält es sich so, denn die Hintergrundfarbe ist direkt auf die Schrift begrenzt.
Frage: Ist das richtig so? Wird bei absoluter Positionierung aus einem Block-Level-Element ein Inline-Element? Hab ich irgendetwas übersehen? Bahnhof?
Meine Suche in der CSS-Spec hat mich noch zu keiner befriedigenden Erklärung geführt. Vielleicht hat sich ja einer von euch schon Gedanken dazu gemacht und kann mir weitere Sucherei ersparen.
Ach ja, eine Erklärung fällt flach: Ich hatte anfangs auf ein Standard-Compliance-Problem des IE6.0 getippt, aber Mozilla 1.0 verhält sich genauso. Daher sitzt das Problem wohl bei mir _vor_ dem Bildschirm, aber ich komm nicht drauf...
Viele Grüße
Pidder Lüng
-
Hallo,
IMHO ist es so, das position:relative dafür sorgt, daß die Ausrichtung am übergeordneten Element (body) erfolgt. Bei position:absolute mußt Du "Koordinaten" (left, top, width, height) mit angeben, ansonsten wird der Bereich nur am Inhalt orientiert.
HTH
Gruß Frank -
Hi!
Wenn ich http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position richtig verstehe, wird bei absolute und static die Dimension am Inhalt des Elements ausgerichtet, also bei dir an der Länge des Textes. m das zu ändern mußt du width & height definieren oder mit top,left,bottom,right bestimmen.
Gruß Herbalizer
-
Hallo Herbalizer, hallo Frank,
sorry, dass ich erst jetzt zum Antworten komme, ich hoffe, ihr lest die Antwort noch. Ich ordne das Posting der Antwort von Herbalizer zu, weil er direkt eine Quellenangabe genannt hat (ich liebe Quellenangaben :))) )
Mir ist noch immer nicht ganz klar, wo das definitiv gesagt ist, dass es so ist, wie es ist. Konkreter: an der Stelle, die du, Herbalizer, nennst, steht "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties". Sollte der Sachverhalt nur in diesem "and possibly size" stecken? Vielleicht hat das W3C an dieser Stelle wirklich mit Erklärungen gegeizt? Oder steht da noch etwas woanders, was ich übnersehen habe?
Wenn ich http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position richtig verstehe, wird bei absolute und static die Dimension am Inhalt des Elements ausgerichtet...
Der Effekt tritt nur bei absolute auf, static ist ja der Normalzustand, also ohne Position-Eigenschaft überhaupt, und da tritt der Effekt auch nicht auf.
Gut, ich weiß nicht, ob ich heute noch ins Forum reinschauen werde, morgen werde ich es auf jeden Fall tun. Sollte der Thread dann noch lesen, werde ich eure evtl. Antworten auf jeden Fall lesen, egal wie weit unten das Thema dann schon ist.
Bereits jetzt ganz vielen Dank für eure Mühe und Gruß
Pidder Lüng
-
Hi Pidder Lüng!
Der Effekt tritt nur bei absolute auf, static ist ja der Normalzustand, also ohne Position-Eigenschaft überhaupt, und da tritt der Effekt auch nicht auf.
Ups. Ich meinte absolute und fixed, nicht static.
"The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties." soll heissen das ein Element, wenn position: absolute angegeben wird, mittels top,left,right und bottom positioniert wird. "These properties specify offsets with respect to the box's containing block." Werden alle 4 dieser Positionsarten benutzt ergibt sich automatisch eine bestimmte Größe des Elements, abhängig vom Abstand zum oberen,linken,rechten und unteren Rand des Elements (containing block) welches das Element enthält. Das possible steht drin, weil ohne die Angabe aller 4 Eigenschaften die Größe dadurch nicht festgelegt wird und somit sich am Elementinhalt orientiert.
Gruß Herbalizer
-
-