[minimunk]

Har allvarliga problem med att få till det när jag använder opacitet. Har en div som har opacitet, men hur får jag text på den som inte är genomskinligt.

Jag har satt ihop ett exempel:
http://develop.itmaskinen.se/labs/munk/

och cssen: http://develop.itmaskinen.se/labs/mu...lude/style.css

[melin]

går inte.. sätter du opacitet på ett lager så påverkar det allt i den diven..

så har du ett element med 0.5 op. och ytterligare ett i det elementet med 0.5 op. så får det sista alltså 0.25 op.

Det du kan göra är att ha 2 divs - en med op. på och sedan en över den med text och innehåll

[digiArt]

eller lägga en png med opacitet som bakgrundsbild på det lager där du vill ha texten, då behöver du inte ange opacitet öht i css

Inte lika "bra" eller snygg lösning som ovan nämnda, men kan fungera som ett alternativ (om du nonchalerar alla läsare som inte klara png med opacitet)

[DeSoto]

Den största läsare som inte klarar png-opacitet idag är ju IE6, och det är ganska enkelt att med * html-hacket slänga på ett filter i CSS för att få IE6 att fatta. Känns som att de läsare som inte klarar png-opacitet inte heller klarar CSS-opacitet, men jag har kanske fel.

[melin]

IE6 fixar opacitet på element

[DeSoto]

Visst gör IE6 det, men den klarar inte PNG-genomskinlighet utan att använda IE-specifik CSS.

[minimunk]

Originally posted by melin@Jul 4 2007, 15:14
går inte.. sätter du opacitet på ett lager så påverkar det allt i den diven..
så har du ett element med 0.5 op. och ytterligare ett i det elementet med 0.5 op. så får det sista alltså 0.25 op.
Det du kan göra är att ha 2 divs - en med op. på och sedan en över den med text och innehåll

Men lagret som har opacitet har inte text i sig. Så här ser koden ut i korthet:
<div id="workshop_menu">

<div id="workshop_background"></div>
<div id="workshop_text">
text text text
</div>
</div>

Det är "workshop_background" som har opacitet på sig, och jag vill att den ska lägga sin under texten. How? Z-index verkar ignoreras i både ff och ie när jag har ett lager med opacitet.

Edit:
Problemet är löst. Om jag plockade bort "float" på mina divar och positionerade dem absolute så började z-index att fungera perfekt!

[robert.liljedahl]

, och så är det alltid. för att z-index ska fungera så _måste_ du köra position:absolute;

[minimunk]

Rent teoretiskt så borde man kunna använda z-index även på position:relative eftersom det även där kan uppstå lägen där olika element ligger på varandra.

Och om något som är positionerat absolute och ligger över ett float-element så borde man kunna tvinga ner den under floaten genom att sätta ett negativt z-index på diven som är positionerad absolute.