✔ Div oberhalb Elternelement ausrichten

A

anve

Mitglied
Hallo!

Ich möchte dass oberhalb meines absolut positionierten Elternelements, das Kindelement ausgerichtet wird.

Kindelement
____________
| Elternelemnt |

Das Kindelement soll genau am oberen Rand des Elternelement ausgerichtet werden.

Code: 
#Elternelement {
	margin-left:32px;
	position:absolute;
	top:281px;
}

Code: 
.Kindelement {
	width:1000px;
	height:auto;
	max-height:175px;
	position:absolute;
	bottom:0;
	left:0;
	padding:30px 10px;
}

Geht das? Da das ganze im Menü verschachtelt ist (ul li) kann ich das Kindelement nicht vorher positionieren. Momentan kann ich nur eine fixe Größe einstellen, ich möchte die Größe aber am Inhalt anpassen (height:auto).
 
Grundsätzlich benötigt das nach oben zu verrückende Element entweder einen negativen margin-top- bzw. top-Wert < 0, oder positiven margin-bottom- bzw. bottom-Wert > 0, aber ohne bekannte (feste) Höhe, aus der der jeweilige benötigte Regelwert resultiert, lässt sich dein Vorhaben mit CSS nicht umsetzen, damit die (im Markup folgende) innere Box außerhalb ihrer Mutterbox passgenau auf deren oberen Rand ausgerichtet wird.

Beispiele hierfür mit dieser CSS-Technik findest du z.B. hier:


Ohne CSS-Regelung bzgl. einer festen Höhe liesse sich dein Wunsch mittels Javascript erfüllen; Stichwörter zur Foren- u. Google-Recherche: offsetHeight und offsetTop.

JS-Referenz:

 
Zuletzt bearbeitet:
Verwirrt hat mich jetzt nur der zweite Link von dir (http://www.cssplay.co.uk/menus/anywidth-pullup.html). Denn da gibts genau das was ich suche, eine feste Höhenangabe habe ich auf die Schnelle nicht gesehen....

Also wenn ich dich richtig verstehe, dann geht es mit CSS so nicht (also ohne Höhenangabe). Da der Inhalt noch nicht ganz definiert ist, kann ich die Höhe momentan nicht festlegen (außer die max. Höhe).

Ansonsten werde ich es mal so lassen, außer es ist wirklich nötig JavaScript zu verwenden.
 
anve hat gesagt.:
Verwirrt hat mich jetzt nur der zweite Link von dir (http://www.cssplay.co.uk/menus/anywidth-pullup.html). Denn da gibts genau das was ich suche, eine feste Höhenangabe habe ich auf die Schnelle nicht gesehen....
Zum Vergrößern anklicken....
Dabei findet sie sich gleich zu Beginn in der zweiten Regelmenge an zweiter Stelle:

CSS: 
#menu {width:744px; height:25px; background:#b07e4b; text-align:center; border:3px solid #000;}


/* und im weiteren Verlauf erfolgt die entsprechende Positionierung der Submenüs */
#menu ul li:hover > ul {left:-2px; bottom:25px;}

anve hat gesagt.:
Also wenn ich dich richtig verstehe, dann geht es mit CSS so nicht (also ohne Höhenangabe). Da der Inhalt noch nicht ganz definiert ist, kann ich die Höhe momentan nicht festlegen (außer die max. Höhe).
Zum Vergrößern anklicken....
Die Höhe für #Elternelement lässt sich unabhängig vom Inhaltsumfang in .Kindelement festlegen, wie es das zweite Beispiel demonstriert, dessen Untermenüs eine variierende Anzahl von Links besitzt.
 
Zuletzt bearbeitet:
D.h. das Elternelement hat eine feste Höhe und das Kindelement übernimmt diese. Dadurch dass mehrere Kindelemente übereinander gestapelt werden (bottom:25px) funktioniert das ganze. Bei mir sind aber die Inhalte nicht immer nur eine Zeile groß.

Ansonsten werde ich es mal so lassen, außer es ist wirklich nötig JavaScript zu verwenden.
Zum Vergrößern anklicken....

Danke für deine Hilfe!
 
anve hat gesagt.:
D.h. das Elternelement hat eine feste Höhe und das Kindelement übernimmt diese. Dadurch dass mehrere Kindelemente übereinander gestapelt werden (bottom:25px) funktioniert das ganze. Bei mir sind aber die Inhalte nicht immer nur eine Zeile groß.
Zum Vergrößern anklicken....
Das Kindelement erbt keineswegs die Höhe des Elternelements!

Und wieviel Zeilen darin enthalten sind, spielt auch keine Rolle.

Besser, du studierst besagtes Demo nochmal in aller Ruhe, und vergleichst die Höhe der Submenüs untereinander.
 
Zuletzt bearbeitet:
Hallo spicelab!

Es stimmt, die Höhe wird nicht vererbt. Es gibt nur die Info die du schon beschrieben hast:

CSS: 
/* Höhe ist nur für Menüebene 1 */
#menu {width:744px; height:25px; background:#b07e4b; text-align:center; border:3px solid #000;}

/* jede neue Menübebene (ul li ul) wird um 25px nach oben geschoben */
#menu ul li:hover > ul {left:-2px; bottom:25px;}
/* Frage: gilt das nur für Menüebene 1? Es gibt ja noch ul ul li:hover ...

/* Zeilenhöhe hat noch Einfluss auf die Höhe der Box */
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px 0 10px;}

So wie ich das sehe kommt die Höhe der Submenüs nur durch die line-height zustande. Je mehr list items da sind, desto größer wird so ein Submenü. Ist das richtig?
 
Zuletzt bearbeitet:
Die line-height-Eigenschaft regelt hier die Zeilenhöhe der Links, und sorgt für eine vertikale Zentrierung ihres Elementinhaltes.

Ohne diese CSS-Regel fällt die Höhe der einzelnen Submenüs folglich geringer aus, sprich die Höhe ergibt sich dann durch Anzahl der Zeilen und der gesetzten Schriftgröße (reguläre Zeilenhöhe < 25px).
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück