div höhe skaliert nicht mit wenn inhalt absolut

gertnaster

hey ho!! ich habe ein kleines problem. ich versuche mich gerade erstmals an einem responsive design. das problem liegt im menü. hier seht ihr wie es aussehen soll:

http://tsv-leimbach.net/gerti/exp/index2.php

und hier wie es leider aussieht [Blockierte Grafik: http://www.css-info.de/forum/images/smilies/icon_mrgreen.gif]

http://tsv-leimbach.net/gerti/exp/index.php

ich habe um es zum laufen zu bringen dem container wrap_icons eine feste höhe gegeben. das ist natürlich schlecht, da diese wie der rest der seite ja mitskalieren sollen wenn man die fenstergröße ändert.

das problem trat auf seit ich die icons absolut positioniert hab. das hab ich gemacht damit ich 2 bilder hintereinanderlegen konnte, um sie beim mouseover "weich" zu animieren (opacity des oberen bildes per jquery langsam verringern)

ich hoffe ihr könnt mir weiterhelfen, bin mit meinem latein am ende. viele grüße und schon mal danke für die mühe!! [Blockierte Grafik: http://www.css-info.de/forum/images/smilies/icon_smile.gif] da gerti

gertnaster

ich konnte das problem lösen. zu sehen hier

http://tsv-leimbach.net/gerti/exp2

ich habe ein weiteres li-element hinzugefügt ohne absolut positionierten inhalt, ein wenig mit den einstellungen rumprobiert und es dann per visibility ausgeblendet. es funktioniert in allen aktuellen browsern, wie es in älteren aussieht habe ich noch nicht getestet. obwohl es funktioniert würde ich mich über eine lösung die nicht ganz so tricky ist freuen

synaptic

ohne jetzt in deinen code gesehen zu haben:

wieso die höhe nicht erkannt wird, liegt daran, dass bei einer absoluten positionierung die elemente aus dem kontext genommen werden.
position:absolute bezieht sich immer auf das zuletzt positionierte element (mit relative oder absolute, [glaube auch bei fixed, aber nicht bei static])
am sichersten ist es einen ständigen wechsel zu haben zwischen rel und abs, damit vermeidet man auch probleme in älteren browsern.
wenn man zwei absolute container ineinander positionieren möchte, empfiehlt es sich auch da nochmal nen wrapper zwischenzuschieben.

aber das nur als kleine info am rande

dieses aus dem kontext heben is natürlich mau bei solchen konstrukten. ich glaube du brauchst dafür javascript, um des anzupassen.
mir fällt ad hoc kein weg ein, wie man einen wrapper so dimensioniert, wie sein innenliegendes element.

alternativ könntest du auch mit einem img und einem background-image vom container arbeiten
dann brauchst du die positionierung gar nicht

Tags