nicht angemeldet
Positionierungsproblem bei verschachtelten Containern
Hallo zusammen,
ich habe mit nachfolgendem Problem zu kämpfen:
Um Bildschirmunabhängigkeit zu erreichen, habe ich zunächst einen zum Bildschirm relativen und mittig angeordneten 700x460 px großen Container definiert:
<body style="text-align:center; background-color:#000000">
<div id="inhalt">
...
</div>
Innerhalb des Containers "Inhalt" sind weitere Container definiert,welche ich mit position:absolute... relativ zum Inhaltscontainer ausrichten möchte.
Nichts desto trotz richtig sich der Container "rahmen_h1" am absoluten Bildschirm-Rand aus.
Leider bin ich jetzt mit meinem Latein am Ende und würde mich über Lösungsvorschläge ziemlich freuen!!!
Viele Grüße aus Kölle,
Melanie
Nachfolgend der Code:
#inhalt
{
width:700px;height:460px;
margin:10px auto;
text-align:left;
}
#menue
{
width:140px;
float:left;
margin-top: 80px;
margin-left: 20px;
}
#rahmen_h1
{
position: absolute;
top: 0px;
left: 0px;
background-color: #ee6d05;
height: 70px;
width:700px;
border-bottom: 1px solid #000000;
}
</style>
</head>
<body style="text-align:center; background-color:#000000">
<div id="inhalt">
<div style="position:absolute; left:130px; top:4px;>
<img src="bilder/linie.jpg">
</div>
<!--Rahmen-top-->
<div id="rahmen_h1">
<p></p>
</div>
<!--Menüpunkte-->
<div id="menue">
<p class="text_regulaer"> Leistungen<br>
Preisübersicht<br>
Referenzen<br>
Über webcreazione<br>
Kontakt
</p>
</div>
</div>
-
Hallo Melanie,
Innerhalb des Containers "Inhalt" sind weitere Container definiert,welche ich mit position:absolute... relativ zum Inhaltscontainer ausrichten möchte.
position: absolute; bezieht sich immer auf das übergeordnete _positionierte_ Element. Wenn Du das zentrierte <div> aber nicht positionierst, dann funktioniert das ganze nicht.
Probiere mal, dem mittigen div (#inhalt) noch folgende CSS-Eigenschaften zu geben:
position: relative; top: 0; left: 0;
Könnte klappen, bin mir aber nicht ganz sicher, da Du es ja zusätzlich noch zentrierst. (die Kombination habe ich noch nie probiert)
Viele Grüße,
Christian-
Hallo Melanie,
Innerhalb des Containers "Inhalt" sind weitere Container definiert,welche ich mit position:absolute... relativ zum Inhaltscontainer ausrichten möchte.
position: absolute; bezieht sich immer auf das übergeordnete _positionierte_ Element. Wenn Du das zentrierte <div> aber nicht positionierst, dann funktioniert das ganze nicht.
Probiere mal, dem mittigen div (#inhalt) noch folgende CSS-Eigenschaften zu geben:
position: relative; top: 0; left: 0;
Könnte klappen, bin mir aber nicht ganz sicher, da Du es ja zusätzlich noch zentrierst. (die Kombination habe ich noch nie probiert)
Viele Grüße,
ChristianChristian,
Du bist spitze!
Hat auf Anhieb geklappt!!!
Vielen lieben Dank!
Melanie
-
-
Um Bildschirmunabhängigkeit zu erreichen, habe ich zunächst einen zum Bildschirm relativen und mittig angeordneten 700x460 px großen Container definiert:
<div id="inhalt">
Innerhalb des Containers "Inhalt" sind weitere Container definiert,welche ich mit position:absolute... relativ zum Inhaltscontainer ausrichten möchte.
Nichts desto trotz richtig sich der Container "rahmen_h1" am absoluten Bildschirm-Rand aus.
ELemente mit position:absolute richten sich nach ihrem Container, dem "containing block", aus (siehe http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position), soweit ist Deine Annahme richtig. Das dieser Container das HTML-mäßig übergeordnete Element ist, siehst Du allerdings falsch: Die Definition besagt in http://www.w3.org/TR/REC-CSS2/visudet.html#containing-block-details unter dem für Dich relevanten Punkt 4 folgendes:
"If the element has 'position: absolute', the containing block is
established by the nearest ancestor with a 'position' other than
'static', [..]"static ist der Normalzustand. Die Lösung für Dein Problem ist also, einfach Deiner Mutter aller <div>s ein position:relative zu verpassen.
Beachte nebenbei bemerkt, daß Du mit einer festen <div>-Größe kaum bildschirmunabhängig agierst, denn Deine Unabhängigkeit wird gewissermaßen dadurch definiert, daß Du sagst "Etwas anderes gibt es nicht".
Gruß,
soenk.e-
Hi,
ganz herzlichen Dank für Deine Ausführung:tatsächlich klappt es jetzt auch mit der Vergabe des Attributs "relative" für den (aus meienr Sicht) übergeordneten Container!
Super!!
Viele Grüße,
Melanie
-
-
Tag auch
Um Bildschirmunabhängigkeit zu erreichen, habe ich zunächst einen zum Bildschirm relativen und mittig angeordneten 700x460 px großen Container definiert:
Das mit der "Bildschirmunabhängigkeit" mußt Du mir mal genauer erklären.
<body style="text-align:center; background-color:#000000">
Damit erreichst Du zunächst nur, daß sämtlicher Text in Blockelementen zentriert ausgerichtet wird.
Nachfolgend der Code: ...
Ich denke, Du schießt mit der falschen Waffe in die falsche Richtung.
Du hast also eine Art Container mit einer festen Breite. Darin soll (vermutlich für eine Logo/Titelbalken etc.) zunächst weiterer Bereich mit einer festen Höhe sein.
Dafür reicht ein einfaches <div style="width:100%;height:70px">.Thomas J.