[css] Height wordt niet aangepast.

[Verwijderd]

Ik heb 2 divs, deze moeten over elkaar heen vallen, maar mogen niet in elkaar staan.
Dat moet eigenlijk geen probleem zijn.

Maar ik heb het probleem dat de hoogte van #d3 zich niet aanpast als #d2 groter wordt.

Cascading Stylesheet:

#d1 {
    border:1px solid gray;
    position:relative;
}
#d2 {
    padding:5px;
    position:relative;
    z-index:1;
    background:#fff;
}
#d3 {
    width:100%;
    height:100%;
    border:1px solid #a00;
    top:0;
    left:0;
    z-index:2;
    position:absolute;
}

HTML:

<div id="d1">
    <div id="d2">blaat blaat<br>blaat</div>
    <div id="d3"> </div>
</div>

#d3 blijft 1 regel hoog, waarom wordt deze niet gewoon even groot als de andere 2 div`s

( Ik heb het trouwens over IE )

[mosymuis]

Misschien is dit een oplossing?

[Sappie]

Verwijderd schreef op dinsdag 20 september 2005 @ 09:55:
Ik heb 2 divs, deze moeten over elkaar heen vallen, maar mogen niet in elkaar staan.
Dat moet eigenlijk geen probleem zijn.

Ik begrijp het niet helemaal hoor, leg es wat duidelijker uit ajb

Maar ik heb het probleem dat de hoogte van #d3 zich niet aanpast als #d2 groter wordt.

Je hebt d3 ook uit de normale flow gehaald door hem absoluut te positioneren.

[Verwijderd]

Ik wil dat d2 en d3 over elkaar heen komen en even groot zijn, zodat het één element lijkt.
Normaal zet je dan d2 in d3 en is het probleem opgelost,
maar nu kan dat niet omdat ik een alpha filter ga gebruiken die ge-interhit wordt en daarom moeten deze divs appart.

Ik kreeg toen het idee om d1 te maken en die aan te laten passen door d2,
en dan d3 met height/width 100% even groot te laten worden als d1 ( wat tenslotte d3`s parent is )
Dan zijn alle 3 de divs even groot en kan ik die filter gewoon op d3 zetten zonder dat alles semi-transparant wordt.

Maar de height 100% op d3 past zich niet aan aan de hoogte van d1.

hoop dat mijn probleem nu wat duidelijker wordt.

Het zou idd opgelost kunnen worden met javascript, maar als het ook met css kan dan is dat natuurlijk beter.

[Sappie]

Aangezien je d3 uit de normale flow haalt heeft het in principe 'nix meer te maken' (qua layout) met d1 en d2. Op deze manier zul je niet om wat javascript heen kunnen denk ik.

Verder begrijp ik niet precies wat je met dat alpha filter wilt bewerkstelligen (semi-transparante png's?) en hoezo je dan een aparte div daarvoor nodig hebt?

Heb je geen voorbeeld online staan? Misschien is het wel op een andere manier op te lossen

[Verwijderd]

omdat p1 position:relative heeft is de 100%-hoogte van p3 tog even hoog als p1,
netzoals normaal 100% hoogte de hoogte van de body is...

het heeft idd te maken met semi-transparante png´s
het is als vervanging daarvan, maar de bekende png-hack kan ik niet gebruiken omdat daarbij background-position niet fatsoenlijk werkt.

mijn site is offline, dus heb geen online voorbeeld.

[Sappie]

vreemd dat Firefox het wel 'snapt' (had ik nog niet bekeken). In mijn ogen is het logisch dat de height 100% niet gesnapt wordt aangezien d3 zoals ik al zei uit de normale flow wordt gehaald (100% van wat?).

http://www.w3.org/TR/REC-...html#absolute-positioning

Qua markup is het nog wel een child / afhankelijk van d1, echter qua layout niet meer. Tenminste zo heb ik het altijd geïnterpreteerd. Misschien heb ik het dus fout en heeft iemand anders wel een oplossing voor je probleem.

Verder is het idd wachten op fatsoenlijke png ondersteuning in IE.. IE7 dus

edit: het werkt in IE dus ook als je een vaste hoogte opgeeft voor d1 (de parent container), echter is dat uiteraard ook niet wat je wilt. Wel geeft het aan dat ik het niet helemaal bij het juiste eind had. Iemand die het wel exact weet?

[ Voor 19% gewijzigd door Sappie op 20-09-2005 12:13 ]