[CSS]Links zijn vaag in opacity div

[FrameWork.]

Hallo,

Ik heb een probleem met de links in een div. Deze zijn namelijk doorzichtig net zoals de div background . Hoe kan ik dit oplossen? Hieronder staat een stukje van het stylesheet.

Cascading Stylesheet:

.linkbox {
/* Font settings */
font-family:Verdana, Geneva, sans-serif;
color:#FFFFFF;
font-size:12px;
/* transparant bar */
width:870px;
height:18px;
margin-top:0px;
text-align:left;
background:#333333;
/* for IE */
filter:alpha(opacity=50);
/* CSS3 standard */
opacity:0.5;
}

Via google kom ik op een aantal sites terecht, maar ik kan een oplossing voor dit probleem niet vinden. Het kan zijn dat ik verkeerd google.

Wat heb ik geprobeerd?
-Een aparte div plaatsen voor de links
-Verschillende methodes in het stylesheet toepassen

Alvast bedankt voor de moeite

ps. ik ben nieuw met div's / css (deels), heb tot 2 weken terug altijd gewerkt met table's.

[Ealanrian]

Ik zou dit oplossen door in de .linkbox nog een div te zetten met de achtergrond kleur en opacity en een absolute position. Ook zal er dan een position relative op de .linkbox moeten. dit is aangezien de opacity geld voor de container en alle child elementen.

[dcm360]

Een andere, weliswaar minder 'nette', oplossing kan ook zijn dat je een halfdoorzichtige PNG als achtergrond instelt. Het voordeel van deze manier is dat het minder werk is, het nadeel is dat het waarschijnlijk iets meer bandbreedte gaat kosten.

[Verwijderd]

Cascading Stylesheet:

.linkbox {
    background:rgb(51, 51, 51);
    background:rgba(51, 51, 51, 0.5);
}

Werkt in Firefox 3+ en Safari 3+ en Chrome. De 1e background declaratie is de fallback voor als het niet werkt.

[_Thanatos_]

Werkt in Firefox 3+ en Safari 3+ en Chrome. De 1e background declaratie is de fallback voor als het niet werkt.

En, niet onbelangrijk, Opera 10

[Barracuda_82]

Dit probleem heb ik ook wel eens gehad. Als je een element (semi)transparant maakt worden alle elementen daarin ook (semi)transparant. Ik heb dat toen opgelost door een semi-transparante PNG als background in te stellen icm een sleight png hack voor IE6.

[Mike2k]

laat anders je html eens zien?

Heb je al geprobeerd de content in een andere div te zetten en die een z-index: 1; te geven ?

[FrameWork.]

Alvast bedankt voor de replies.
@hierboven, nee ik heb nog niet geprobeerd om een z-index te gebruiken

Mijn html

HTML:

<div class="wrapper">
  <div class="topbar"></div>
  <div class="header">
    <div class="header_background">
      <div class="height_parameter"></div>
      <div class="linkbox"></div>
    </div>
  </div>
  <div class="content">
  </div>
  <div class="footer"></div>
</div>

[Mike2k]

Zet de content buiten de opacity div en gebruik een z-index voor die content...