Element "on the fly" als Child eines anderen definieren?
Thomas Touzimsky
- css
0 Hopsel
Angenommen, ich habe zwei Elemente in meiner HTML-Datei...
<div id="layerEins">...</div>
<div id="layerZwei">...</div>
Gibt es eine Möglichkeit, das zweite Element über CSS als Child dem ersten Element unterzuordnen? Das zweite Element ist nicht immer automatisch ein Child des ersten, daher soll dies dynamisch geschehen.
Ist sowas überhaupt machbar?
Hi Thomas!
Ist sowas überhaupt machbar?
Nein.
Aber vielleicht erläuterst du uns dein Problem etwas genauer?
MfG H☼psel
Aber vielleicht erläuterst du uns dein Problem etwas genauer?
Klar doch.
Ich habe mehrere Elemente in meiner HTML-Seite, also in etwa so...
<div id="container">
<div id="element-1">...</div>
<div id="element-2">
<div id="element-2-1>...</div>
<div id="element-2-2>...</div>
</div>
<div id="element-3">...</div>
</div>
...
<div id="zusatzelement">...</div>
Anregung hierzu ist der CSS Zen Garden, der in seiner HTML-Datei auch acht zusätzliche <div>-Elemente bereitstellt, um - je nach Design - zusätzliche Platzhalter für Bilder bereitzustellen.
Nun habe ich auf unserer Seite aber das Problem, daß der Inhalt innerhalb des Browserfensters zentriert ist. Liegt nun das Zusatzelement außerhalb des #containers, kann ich es zwar über absolute Positionierung an die richtige Höhe setzen (z.B. 40 Pixel vom oberen Rand aus), aber eine vertikalte Positionierung fällt flach, weil sich das Element nicht mitbewegt, wenn sich der #container bei unterschiedlichen Größen des Browserfensters neu zentriert.
Innerhalb des #containers kann ich es auch nicht setzen, weil hier zwar die vertikale Ausrichtung klappt und es sich mitverschiebt, ich aber die Höhe nicht korrekt setzen kann, weil es innerhalb des #containers ja relativ positioniert werden muss. In der HTML-Seite liegt das Zusatzelement aber am Ende des Dokuments, also "unterhalb" aller anderen Elemente - ich müsste also die Position über "top: -600px" setzen. Wenn sich jetzt die Menge des Seiteninhalts ändert und damit auch die Länge des #containers, verschiebt sich das so relativ positionierte Element nach oben oder unten, was es aber auch nicht machen soll.
Wenn ich nun sagen könnte: "Hey, das #zusatzelement ist ein Child von #container und steht gleich am Anfang, könnte ich es von der linken oberen Ecke aus immer 60px nach unten und 10px nach rechts verschieben". Nur leider scheint das nicht machbar zu sein...
hi,
Wenn ich nun sagen könnte: "Hey, das #zusatzelement ist ein Child von #container und steht gleich am Anfang, könnte ich es von der linken oberen Ecke aus immer 60px nach unten und 10px nach rechts verschieben". Nur leider scheint das nicht machbar zu sein...
Doch - wenn man erst mal verstanden hat, worauf absolute Positionierung Bezug nehmen kann.
gruß,
wahsaga
Doch - wenn man erst mal verstanden hat, worauf absolute Positionierung Bezug nehmen kann.
Hmmm... dazu steht aber im entsprechenden Abschnitt:
"absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat."
Nur, in meinem Fall ist das nächsthöhere Elternelement ja schon <body>, und da bringt mir die absolute Positionierung nicht viel, wenn sich der Rest der Seite nach links und rechts verschiebt.
Was ich jetzt noch probieren könnte - den <body> auf die gleiche Breite zu setzen wie den #container und genauso zentrieren... wenn er das macht.
Was ich jetzt noch probieren könnte - den <body> auf die gleiche Breite zu setzen wie den #container und genauso zentrieren... wenn er das macht.
Nein, es geht nicht. Sobald ich den <body> auf die gleiche Breite setze und die Außenabstände auf : auto; setze, damit er den zentriert, setzt er mir das #zusatzelement wieder ganz nach links oben.
Hallo,
Was ich jetzt noch probieren könnte - den <body> auf die gleiche Breite zu setzen wie den #container und genauso zentrieren... wenn er das macht.
Nein, es geht nicht. Sobald ich den <body> auf die gleiche Breite setze und die Außenabstände auf : auto; setze, damit er den zentriert, setzt er mir das #zusatzelement wieder ganz nach links oben.
Nein, nicht, wenn das BODY-Element "nicht die Normaleinstellung position:static hat".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
* { margin:0; padding:0; }
html { background-color:#FFF; }
body { position:relative; width:500px; background-color:#00AFFF; margin:auto; margin-top:10px; }
#container { background-color:#00FFAF; border:10px solid #00AFFF; } /*border, weil margin-top mit BODY-margin-top zusammenfällt*/
#zusatzelement { position:absolute; top:70px; left:20px; background-color:#00AFAF; } /*60px + 10px border = 70px; 10px + 10px border = 20px*/
-->
</style>
</head>
<body>
<div id="container">
<div id="element-1">...element-1...</div>
<div id="element-2">
<div id="element-2-1">...element-2-1...</div>
<div id="element-2-2">...element-2-2...</div>
</div>
<div id="element-3">...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... ...element-3... </div>
</div>
...
<div id="zusatzelement">...zusatzelement...</div>
</body>
</html>
Vom Funktionieren abgesehen wäre mir das aber zu wenig HTML, sprich "Elemente, weil der Inhalt dort eine Überschrift, eine Liste, eine Tabelle, einen Textabsatz enthält" und zuviel Design, sprich "Elemente, weil _es_ so aussehen soll".
viele Grüße
Axel
hi,
Nur, in meinem Fall ist das nächsthöhere Elternelement ja schon <body>, und da bringt mir die absolute Positionierung nicht viel
Ja, aber nur weil du das so gewollt hast.
Wenn ich dich richtig verstanden habe, besteht kein absoluter Zwang, die Elemente außerhalb des Inhaltscontainers zu platzieren - ob "drin" oder "nicht drin" war doch nur von deinen bisherigen Versuchen, es per CSS wie gewünscht zu gestalten, abhängig.
gruß,
wahsaga
Wenn ich dich richtig verstanden habe, besteht kein absoluter Zwang, die Elemente außerhalb des Inhaltscontainers zu platzieren - ob "drin" oder "nicht drin" war doch nur von deinen bisherigen Versuchen, es per CSS wie gewünscht zu gestalten, abhängig.
An sich schon, aber wenn ich es innerhalb des #containers jetzt an die passende Stelle im Quelltext schiebe, habe ich mit dem nächsten Layout das gleiche Problem, wenn ich das #zusatzelement z.B. an das Ende der Seite setzen wollte, deren Länge sich dynamisch ändern kann.
hi,
An sich schon, aber wenn ich es innerhalb des #containers jetzt an die passende Stelle im Quelltext schiebe, habe ich mit dem nächsten Layout das gleiche Problem, wenn ich das #zusatzelement z.B. an das Ende der Seite setzen wollte, deren Länge sich dynamisch ändern kann.
Ich dachte, du wolltest dieses Zusatzelement absolut positionieren?
gruß,
wahsaga
Ich dachte, du wolltest dieses Zusatzelement absolut positionieren?
Das funktioniert aber nur vertikal, weil sich der Rest der Seite ja horizontal verschiebt, wenn man das Browserfenster vergrößert oder verkleinert.
hi,
Ich dachte, du wolltest dieses Zusatzelement absolut positionieren?
Das funktioniert aber nur vertikal, weil sich der Rest der Seite ja horizontal verschiebt, wenn man das Browserfenster vergrößert oder verkleinert.
Langsam verstehe ich immer weniger, was du jetzt _wirklich_ erreichen willst, bzw. wo dein Problem dabei liegt.
gruß,
wahsaga