[xhtml/css] geneste elementen nemen opacity parent over

[tombo_inc]

ik ben eens bezig om een website projectje van mij wat op te fleuren met wat mooie graphics. nu ben ik eens wat bezig geweest met layer opacities en dat leverde het volgende probleem op. ik heb namelijk een container div die een 3-tal andere div's bevat. nu wil ik dat de container div lichtelijk transparant is, en dat de divs die erin staan gewoon solid zijn. het probleem is echter dat de opacity van de container div alles blend wat erin staat, dus ook de child div's. ongeacht of ik de opacity van de child div's gewoon uit zet(op solid zet). dit vind ik uiterst vervelend en ik vroeg me af of dit gewoon zo is (niks aan te doen dus), of dat er iets tegen te doen is. ik heb zo'n beetje alles al geprobeerd maar niks wil helpen. de enige oplossing die ik kan bedenken is de div's niet meer te nesten maar ze gewoon over mekaar te zetten. dit vind ik echter uit semantisch oogpunt niet zo'n nette oplossing. ik zou graag horen wat jullie hierover weten/vinden.

[krvabo]

Er zijn afaik 2 oplossingen:
1: absoluut positioneren zonder nesten
2: plaatjes gebruiken (gif /png-a) om de achtergrond transparant te maken.

[tombo_inc]

ok, zoiets dacht ik al.
is de enige oplossing, of heeft er iemand nog ideeen/suggesties?

[frickY]

De childs een position: relative geven was bij mij de oplossing
[code=css].transparent {
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity:0.9;
}

.transparent * {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
position: relative;
}[/]

[ Voor 2% gewijzigd door frickY op 01-01-2006 14:37 . Reden: Voorbeeld werkt na controlle idd niet ]

[tombo_inc]

dat werkt bij mij echt niet . alles wat in de parent div staat word gewoon transparant.

[frickY]

Ik was bezig een voorbeeld te maken, maar toen zag ik dat dit bij mij inderdaad ook nog het geval is. Maar doordat ik slechts een opacity van 90 gebruik was het me niet eerder opgevallen. Excsues, bovenstaand voorbeeld werkt inderdaad niet

[tombo_inc]

ok, dan ligt het toch niet aan mij
iemand anders nog suggesties?

[Skaah]

Ik heb hier een website mee onderhouden en halfdoorzichtige dingen zijn gewoon kut. Vooral foto's in een halfdoorzichtige div zijn lastig omdat je de achtergrond er in ziet. Het makkelijkst voor jou is om een stukje Javascript te schrijven die de elementen kopiëert en er absoluut precies overheen positioneert.

[tombo_inc]

je bedoelt alle childs uit de parent div kopieeren en die er overheen zetten?

[djluc]

Tombo_inc schreef op maandag 02 januari 2006 @ 15:25:
je bedoelt alle childs uit de parent div kopieeren en die er overheen zetten?

Zoiets zou inderdaad kunnen. Redelijk simpel misschien zelfs? Of is dit te simpel?

Java:

//javascript

//from quirksmode.org:
function findPosX(obj)
{
    var curleft = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}

function findPosY(obj)
{
    var curtop = 0;
    if (obj.offsetParent)
    {
        while (obj.offsetParent)
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}

//the function:
function transparantNode(node) {
  var newNode=node.cloneNode(true);
  newNode.style.left=findPosX(node);
  newNode.style.top=findPosY(node);
  node.style.display='none';
  newNode.className='transparantNode';
  document.appendChild(newNode);
}

[Skaah]

Tombo_inc schreef op maandag 02 januari 2006 @ 15:25:
je bedoelt alle childs uit de parent div kopieeren en die er overheen zetten?

Ja, en wat djluc heeft gemaakt, zoiets.

[tombo_inc]

ok bedankt. dat zal idd wel de enige oplossing zijn. ik kan zelf verder ook niks vinden of werkend krijgen.