28173 sujets

CSS et mise en forme, CSS3

[Abandon] Problème avec Opacity

Bonjour a tous,
Le plus simple est de vous montrer le code
#affichage{
background-color:#FFFFFF;
filter:alpha(opacity=10);
-Moz-Opacity:0.1;
opacity:0.1; 
float: left;
margin-top: 50px;
width: 500px;
height: 500px;
overflow-y: scroll;
}

Le problème est que le texte qui s'affiche à lui aussi une opacité réduite (on ne voi pas du tout ce qui est écrit),
comment est-ce que je peux régler ce problème ?
Modifié par Slipki (30 Dec 2006 - 17:58)
Hé bien oui, c'est un comportement logique non? Que voudrais-tu faire exactement? Appliquer cette opacité uniquement à une image? à un background?
Il te suffirait dès lors de cibler uniquement l'élément voulu...
Oui c'est un comportement logique, le div dont l'opacité a été reduite affiche un texte, je voulais savoir si il y avais un moyen pour que l'opacité ne s'applique qu'au div, et non au texte, c'est la première foi que j'utilise cette propriété et je n'ai pas trouvé d'info sur le net
Bonjour,
Cela vient peut-être du placement de ta déclaration color:
dans ta css. Pour être prioritaire elle doit se trouver en aval
de tes déclarations d'opacité.
<div id="affichage" class="texteaffichage">texte</div>


.texteaffichage{
color: #000000;
}
#affichage{
color:#000000;
background-color:#FFFFFF;
filter:alpha(opacity=10);
-Moz-Opacity:0.1; (pour moz 1.6 notamment)
opacity:0.1; 
float: left;
margin-left: 0px;
margin-top: 50px;
width: 500px;
height: 500px;
overflow-y: scroll;
}

Voila ce que je vien d'essayer
Modifié par Slipki (30 Dec 2006 - 15:10)
ça ne fonctionnera pas puisque les id ont un niveau de spécité
(priorité) supèrieur aux class. Pourquoi faire compliqué qd on peut faire simple: essayes avec ça
#affichage{
background-color:#FFFFFF;
filter:alpha(opacity=10);
-Moz-Opacity:0.1; (pour moz 1.6 notamment)
opacity:0.1; 
color:#000;
float: left;
margin-left: 0px;
margin-top: 50px;
width: 500px;
height: 500px;
overflow-y: scroll;}

Modifié par Hermann (30 Dec 2006 - 15:13)
non toujours la même chose, pour les priorités je n'étais pas encore au courant, on en apprend tous les jours, surtout a mon niveau
Pour comprendre comment fonctionne les niveaux de spécificité,
je te conseille vivement d'aller lire cet article
Je n'ai encore jamais utilisé ces propriétés, il se peut donc que
je te dise des bêtises.
Ceci dit pour qu'on puisse identifier plus facilement la source du
problèlme, tu devrais donner un lien ou la totalité de ton code.
Ou alor si je met le div en class et que je met une id au texte en définissant la couleur, l'id étant prioritaire, ca devrais fonctionner ?!
Merci j'avais deja fais une recherche mais j'étais tombé sur un post qui n'avais rien a voir, je pense que je vais avoir recour au flash, car la solution du opacity m'arrangais dans la mesure ou on ne voyais plu le scrollbar ...
Je vais essayer de ne pas éclater mon ordinateur sur le coup de l'enervement, merci Hermann pour ton aide
Bonjour,

Méthode sandwich mais pratique des fois ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
			
<style>
*{margin:0; padding: 0;}

#conteneur{
width: 300px;
height: 200px;
margin: auto;
border: 1px solid blue;
position: relative;
}

#sous_centre 
{   
   position: absolute;
   width: 90%;
   height: 150px;
   top: 20px;
   left: 50%;
   margin-left: -45%;
   margin-top: 0px;
   margin-bottom: 0px;
   padding: 0;
   background-color: red;
   opacity : 0.5;
   filter : alpha(opacity=50);
   z-index: 10;  
}

#centre 
{
   position: absolute;   
   width: 90%;
   top: 20px;
   left: 50%;
   margin-left: -45%;
   height: 150px;
   padding-bottom: 40px;
   z-index: 20;  
} 
</style>

</head>


	<body>
<div id="conteneur" 
	<div id="sous_centre">
	</div>	
	<div id="centre">
	 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisi lacus, varius porta, porttitor sed, tristique id, sem. Vestibulum aliquet. Fusce porttitor felis vel mi. Phasellus velit neque, venenatis ut, vestibulum eu, posuere sed, dui. Maecenas erat lectus, tempor id, vestibulum sed, suscipit a, purus.
	</p>
	</div> 

</div>
	</body>
</html>
Merci de t'etre donné du mal, mais je pense que je vais arréter la, si j'applique ta méthode je vais galérer sous IE ... je laisse tomber Smiley cligne merci !
Re,

Autant pour moi, c'était pas le bon code !!! (c'est celui d'un intranet 100% FF)
Celui ci devrait être compatible ... (enfin j'espère!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>

<style>	

#conteneur{
width: 300px;
height: 200px;
margin: auto;
position: relative;
}

#contenant{
position: absolute;
width: 300px;
height: 200px;
left: 0;
top: 0;
background-color: blue;
}

#sous_centre{ 
position: absolute;
width: 150px;
top: 30px;
left: 30px;
height: 150px;
background-color: #fff;
opacity : 0.8;
filter : alpha(opacity=80);
z-index: 10; 
}

#centre{ 
position: absolute;
width: 150px;
top: 0;
left: 0;
height: 150px;
z-index: 20; 
} 

</style>
</head>
	<body>
<div id="conteneur">
	<div id="contenant"</div> 
		<div id="sous_centre">
		<div id="centre">
	 	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisi lacus, varius porta, porttitor sed, tristique id, sem. 	
		</p>
	</div> 
	</div>
</div>
	</body>
</html>
Je vien de faire un test avec la même méthode, sans c/c exactement ce que tu m'a donné et ca ne fonctionne toujours pas ... je comprend vrément pas pourquoi
Tu as raison et jamais 2 sans 3 ...
Faudra que j'arrête de faire le reveillon tous les soirs ... ou que je me mette plutot à trier les dossiers de mon DD !!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style>	
#conteneur{
width: 300px;
height: 200px;
margin: auto;
position: relative;
}

#contenant{
position: absolute;
width: 300px;
height: 200px;
left: 0;
top: 0;
background-color: blue;
}

#sous_centre{ 
position: absolute;
width: 150px;
top: 30px;
left: 30px;
height: 150px;
background-color: #fff;
opacity : 0.4;
filter : alpha(opacity=40);
z-index: 10; 
}

#centre{ 
position: absolute;
width: 150px;
top: 30px;
left: 30px;
height: 150px;
z-index: 20; 
} 

</style>
</head>
<body>
<div id="conteneur">
	<div id="contenant"</div> 
		<div id="sous_centre"></div>
		<div id="centre">
	 	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisi lacus, varius porta, porttitor sed, tristique id, sem. 	
		</p>
	</div>
</div>
</body>
</html>


En espérant que ce soit la bonne !!

ps : de mémoire il ne faut pas s'attendre à ce qu' IE5.5 tolére cet arrangement !!
Concrettement, qu'est ce qu'il faut faire pour que la couleur ne prenne pas l'opacité du div ? ou qu'est-ce qu'il ne faut pas faire ... parce que la ... j'ai reessayé et ca ne fonctionne toujours pas
Sujet clos
Aller à