héritage de transparence non voulue

flo3376
Les bases HTML/CSS

bonjour à tous,

je vais faire vite car je suis déjà à la boure pour mon boulot.

mon site

j'ai voulu mettre des transparance dans mes conteneur, mais les "onglet" des conteneurs les ont pris aussi alors que je le souahité pas

normalement il devrai être aussi fort que celui de vol en cours.

qu'ai je pu loupé ou dois je refaire des sous conteneur?

Merci d'avance FLO

le fichier CSS

.body {
background-color:white;
background-attachment:fixed;
}
.page
{ 
  width: 100%;
  height: auto;
  z-index: 2;
  position: relative;
}
.header
{ 
  width: 1098px;
  height: auto;
  margin-left: auto; 
  margin-right: auto;
  margin-bottom: 5px;
}
.menu
{ 
  width: auto;
  height: auto;
  //background-color: #4A1A2C;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
}
.optionsup
{ 
  margin: auto;
  margin-left: auto ; 
  margin-right: auto ;
  width: auto;
  height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.optionsupintpan
{ 
}
.cadremodhaut
{ 
  width: 1100px;
  height: auto;
  margin-left: auto; 
  margin-right: auto;
  border-width:5px;
  border-style:solid;
  border-color:#29CDB8;

  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;

}
.lateralg
{ 
  width: 15%;
  height: auto;
  //background-color: #FF358B;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
  display:inline-block;
}
.cadremodgau
{ 
 border-width:5px;
 border-style:solid;
 border-color:#29CDB8;
  width: 250px;
  height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
float: left;
background-color: #00FFDD;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);

}
.conteneurcent
{ 
 border-width:5px;
 border-style:solid;
 border-color:#29CDB8;
  width: 68%;
  height: auto;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;
  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
background: #00FFDD;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}
.conteneurcent2
{ 

  width: 1352;
  height: 100%;
  //background-color: #AEEE00;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;

}
.laterald
{ 
  width: 15%;
  height: auto;
  //background-color: #C03000;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}
.clear
{ 
clear: both;
}

.optioninf
{ 
  width: auto;
  height: auto;
  //background-color: #84815B;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.footer
{ 
  width: auto;
  height: auto;
  //background-color: #32331D;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
/*===================================================================================================================*/
/*=================================================mise en forme texte===============================================*/
/*===================================================================================================================*/
.H1L
{
  font:monospace; 
  font-size: 1.2em ;
  color: WHITE; 
  text-align: center; 
  background: #29CDB8;
  -moz-opacity:2;
opacity: 2;
filter:alpha(opacity=2);
}
.H1
{
  font-weight:bolder;
  font:monospace; 
  font-size: 1.2em ;
  color: BLACK; 
  text-align: left; 
   text-decoration: underline;

}
.H2
{
  font:monospace; 
  font-size: 1em ;
  color: BLACK; 
  text-align: left; 

}
/*===================================================================================================================*/
/*=================================================mise en forme texte===============================================*/
/*===================================================================================================================*/
/*===================================================================================================================*/
/*=========================================================horloge===================================================*/
/*===================================================================================================================*/
.horloge
{
  float:left;
}
/*===================================================================================================================*/
/*=========================================================horloge===================================================*/
/*===================================================================================================================*/

/*===================================================================================================================*/
/*=========================================================panair2===================================================*/
/*===================================================================================================================*/
.Panel 
{
width:900px;
  font:monospace; 
  font-weight:bolder;
  font-size: 14px;
  color: #FED401; 
  table-layout: fixed; 
  text-align: center; 
  background: #494949;
}
.PanelCell 
{
  min-width:18px;
  height:18px;
  border: 1 solid none;
  vertical-align: middle; 
  background: #000000;
}
.panneau
{
  width: 100%;
  height: auto;
  margin-left: auto; 
  margin-right: auto;
}
/*===================================================================================================================*/
/*=========================================================panair2===================================================*/
/*===================================================================================================================*/
/*===================================================================================================================*/
/*=====================================================diaporama petit===============================================*/
/*===================================================================================================================*/
.jDiaporama{
  position:relative;
}
.jDiaporama ul{
  -moz-box-shadow:1px 1px 0.5em #222;
  overflow:hidden;
}
.jDiaporama li{
  list-style-type:none;
  overflow:hidden;
  position:absolute
}
.jDiaporama li img{
  display:block
}
.jDiaporama li .desc{
  position:absolute;
  bottom: 0; left: 0;
  display:none;
  margin:0;
  color:#fff;
  font-size:12px;
  font-family: Arial;
  padding:5px;
  background:url(img/back_desc.png) repeat;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/back_desc.png',sizingMethod='scale'); _background-image:none;
  width:100%;
  height:30px
}
.jDiaporama li .title{
  position:absolute;
  top: 0; left: 0;
  display:none;
  margin:0;
  color:#fff;
  font-size:12px;
  font-family: Arial;
  padding:5px;
}
.jDiaporama li .count{
  position:absolute;
  top: 0; right: 0;
  display:none;
  margin:0;
  color:#fff;
  font-size:12px;
  font-family: Arial;
  padding:5px;
}
.jDiaporama_controls{
  display:none;
}
.jDiaporama_controls a{
  font-weight:normal;
  width:10px;
  height:13px;
  text-indent:-9999px;
  display:block;
  margin:0 3px;
  position:absolute;
}
.jDiaporama_controls .prev{
  background:url(img/controls2.png) no-repeat bottom;
  _background:url(img/controls.gif) no-repeat bottom;
  top:50%;
  margin-top:-16px;
  height:32px;
  width:32px;
  left: 0px
}
.jDiaporama_controls .next{
  background:url(img/controls2.png) no-repeat top;
  _background:url(img/controls.gif) no-repeat top;
  top:50%;
  margin-top:-16px;
  height:32px;
  width:32px;
  right: 0px
}
.jDiaporama_controls .pause{
  background:url(img/playpause.png) no-repeat top;
  _background:url(img/playpause.gif) no-repeat top;
  width:64px;
  height:48px;
  left:50%;
  top:50%;
  margin-left:-32px;
  margin-top:-24px;
}
.jDiaporama_controls .play{
  background:url(img/playpause.png) no-repeat bottom;
  _background:url(img/playpause.gif) no-repeat bottom;
  width:64px;
  height:48px;
  left:50%;
  top:50%;
  margin-left:-32px;
  margin-top:-24px;
}
/ ****Status**** /
.jDiaporama_status{
  text-align:center;
  margin-top:10px;
  position:absolute;
  left:50%;
  display:none
}
.jDiaporama_status a{
  background:url(img/bullets.png) no-repeat left;
  _background:url(img/bullets.gif) no-repeat left;
  float:left;
  width:10px;
  height:10px;
  text-indent:-9999px;
  margin-right:5px;
}
.jDiaporama_status a.active, .jDiaporama_status a:hover{
  background:url(img/bullets.png) no-repeat right;
  _background:url(img/bullets.gif) no-repeat right;
}
a{
  outline:none
}
ul{
  margin:0;
  padding:0;
}
p{
  font-style:normal;
  text-shadow:none
}
/*===================================================================================================================*/
/*=====================================================diaporama petit===============================================*/
/*===================================================================================================================*/

le module news 

<?php 
require ("ftpdl2.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
    </head>
<body>
    <div class="H1L">
    Les derniéres news de FFS2
    </div>
<?php 
$link = mysql_connect ($dbhost,$dbuser,$dbpass) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());
    mysql_query("SET NAMES 'utf8'");
    $sql="SELECT * FROM news";
    $result = mysql_query($sql,$link) or die ('Erreur : '.mysql_error() );
    $total = mysql_num_rows($result);
    if($total) 
    {
    while($row = mysql_fetch_array($result))
        {

            ?><div class="H1"><?php echo $row"titre"];?></div><?php
            echo "</br>";
            ?><div class="H2"><?php echo $row"message"];?></div><?php
            echo "</br>";
            ?><div class="H2"><?php echo $row"pseudo"];?></div><?php
            echo "</br>";
            ?><div class="H2"><?php echo $row"lien"];?></div><?php
            echo "</br>";
        }
    }
    else
        {
            echo "pas de nouvelles information pour le moments";
        }

    mysql_close();
?>

</body>
</html>

le module mumble 

<div class="cadremodgau">
                <div class="H1L">
                Membre sur Mumble
                </div>
                    <script type="text/javascript">
                    <!--
                    var port = 6801;
                    var width = 250;
                    var height = 400;
                    var srv = 8;
                    var cl = "000";
                    var bgcolor = "transparent";
                    var tc = "11";
                    var tu = "11";
                    //-->
                    </script>
                    <script type="text/javascript" src="http://srv02.serveurmumble.com/viewver/javascripts/viewver.js"></script>

            </div>

2 réponses

Shadouf
Réponse acceptée

Salut,
Je n'ai pas tout compris mais j'imagine que tu as utilisé 'opacity' pour faire ta transparence sur tes conteneurs. Utilise plutôt :

background: rgba(0,0,0,0.5);

Change le 0.5 entre un nombre compris entre 0 et 1 pour choisir l'intensité de ta transparence.
Bonne journée ! ;)

flo3376
Auteur

nickel, ça marche, petite question tous les navigateur vont savoir l'interprété ou il va y avoir encore le même qui va coincer?