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 :

1 2 3 4 5

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

Code :

1 2 3 4 5 6 7 8 9

.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:

• http://www.cssplay.co.uk/menus/cssplay-showup.html
• http://www.cssplay.co.uk/menus/anywidth-pullup.html

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:

• http://de.selfhtml.org/javascript/ob...#offset_height
• http://de.selfhtml.org/javascript/ob...htm#offset_top

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.

Zitat von anve

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....

Dabei findet sie sich gleich zu Beginn in der zweiten Regelmenge an zweiter Stelle:

Code css:

1 2 3 4 5

#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;}

Zitat von anve

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).

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.

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.

Danke für deine Hilfe!

Zitat von anve

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ß.

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.

Hallo spicelab!

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

Code css:

1 2 3 4 5 6 7 8 9

/* 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?

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).

Wieso nicht

Code :

1	bottom: 100%;

inkl. fester Höhe?

Zitat von threadi

Wieso nicht

Code :

1	bottom: 100%;

inkl. fester Höhe?

In diesem Fall ist es Jacke wie Hose, ob "25px" oder "100%".

Fragen:

Kann ich nun mit CSS mein Vorhaben umsetzen oder nicht?
Was ist das Ergebnis des Vergleichs der Höhe der Submenüs? Unterschiedlich groß? Was wolltest du mir damit sagen?
In meinen geposteten Code-Stück habe ich Anmerkunge/Fragen gemacht. Sind meine Aussagen korrekt?

Code css:

1 2 3 4 5 6 7 8 9

/* 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;}

Wo liegt nun die Kernessenz dieses Beispiels? Wie funktioniert es nun wirklich? Mit bottom:25px wird nur das 1. Submenü positioniert. Wie ist es mit den anderen? Es gibt das Elternelement und das ist die Basis (Höhe) für die Submenüs. Woher weiß der Browser wo das 1. Element des Submenüs ist? Durch eine Addition der Zeilenhöhe/Schriftgröße aller Links im Submenü?

Sag, wenn ich nerve.

Ob und wie du deinen Plan mit CSS realisieren kannst, hatten wir hier doch schon ausgiebig erläutert.

Und das Verständnis für die detailierte Funktionsweise des Menüs solltest du durch Experimentieren mit den einzelnen gesetzten bottom-Regeln selbst erlangen können.