Position: absolute, niet absoluut?

[devhouse]

Hallo allemaal!

Ik ben bezig met een website, waarbij ik een schaduw heb, waar tekst onder moet kunnen komen. Dit is me gelukt met de volgende code:

code:

* { margin: 0; padding: 0; }
body {
    background-color: #3c3c86;
}
.container {
    width: 1074px;
    height: 1000px;
    margin: 0 auto;
}
.left-shadow {
    width: 25px;
    height: 1000px;
    float: left;
    background-image: url('../images/shadow_left.png');
}
.right-shadow {
    width: 25px;
    height: 1000px;
    float: right;
    background-image: url('../images/shadow_right.png');
}
.middle-shadow {
    width: 25px;
    height: 1000px;
    background-image: url('../images/shadow_left.png');
    position: absolute;
    left: 50%;
    margin-left: 257px;
}
.content-container {
    width: 794px;
    height: 1000px;
    float: left;
}
.sidebar-container {
    width: 230px;
    height: 1000px;
    float: left;
}

het gaat hierbij om het stukje .middle-shadow. Het leek allemaal goed te werken. totdat ik mijn browser scherm had verkleind. De shadow beweegt dan mee. Ik heb geen idee hoe ik dit op kan lossen. Heeft iemand misschien een idee?

Omdat het op mijn home-server staat, heb ik er maar een filmpje van gemaakt:
http://www.youtube.com/watch?v=QSQKON46gU8

Iemand een idee?

[MoietyMe]

Als je je conteinter position:relative meegeeft dan kun je daar binnen absolute positioneren. Want nu gebruikt hij gewoon het hele venster. En dan is het ook niet zo vreemd dat hij op een resize zich verplaatst.

[kaesve]

dat de schaduw met je browserscherm mee beweegt is niet zo gek. je geeft immers mee dat de positie van de schaduw afhankelijk moet zijn van de breedte van je scherm, met left: 50%

tenminste, ik neem aan, gebaseerd op het filmpje, dat je het schaduw-element (een div-je?) niet in de container hebt gezet. dat is namelijk wel wat je wilt volgens mij: de schaduw moet zich helemaal aan de rechter kant van de container bevinden, waar ook die tekst in zit. ik zou m daar gewoon dus in zetten en dan misschien met z-index wat aankloten totdat je alles in de juiste volgorde hebt (== schaduw over text)

[mithras]

Good Fella schreef op dinsdag 13 oktober 2009 @ 10:51:
Als je je conteinter position:relative meegeeft dan kun je daar binnen absolute positioneren. Want nu gebruikt hij gewoon het hele venster. En dan is het ook niet zo vreemd dat hij op een resize zich verplaatst.

Hierop een aanvulling: dat zijn containing blocks. Een position relative zorgt voor een nieuw containing block. Meer informatie: http://www.w3.org/TR/CSS2/visuren.html#containing-block

[devhouse]

ok bedankt allemaal, het werkt nu. ik zal die link even doorlezen.

[R4gnax]

mithras schreef op dinsdag 13 oktober 2009 @ 10:57:
[...]
Hierop een aanvulling: dat zijn containing blocks. Een position relative zorgt voor een nieuw containing block. Meer informatie: http://www.w3.org/TR/CSS2/visuren.html#containing-block

En dan moet je nog even héél goed opletten met Internet Explorer, want die heeft zo z'n eigen idee van wat een containing block inhoudt.

Sterker nog: eigenlijk kent IE de hele terminologie omtrendt containing blocks zoals gesteld door de W3C standaarden niet eens. Het enige wat IE kent is een nieuwe layout context die gegenereerd wordt door elk element wat 'layout' heeft. Layout is dan weer zo'n fantastisch IE-only concept waar IE's baggere Trident rendering engine op gebaseerd is. (En ligt ook ten grondslag aan 9 op de 10 CSS bugs in IE...)