Problème de transparance dans CSS

Bonjours à tous,

J'ai un énorme problème concernant le CSS 3.
J'ai une image de fond, et au dessus, j'ai différents div avec des couleur et une transparence. à l'extérieur de ces DIV, j'ai du texte que j'ai placé grâce au Margin sur les div. Le problème c'est que mon texte est blanc et que quand je le place sur un DIV, on dirait qu'il se met en transparence au qu'il se met derrière le div alors que ce n'est pas le cas, car si l'on supprime la transparence du Div, le texte apparaît en blanc au dessus. Je vous met le code CSS, pour que vous puissiez m'aider au mieux. je me permet de préciser que je ne suis pas débutant en CSS et que j'ai déjà codé de nombreux site et toute les notion d'héritage et autre je les connais.

Code CSS :

root { 
    display: block;
}

/*
Style généraux du template
*/
html{
	width: 1020px;
	margin: -10px auto;
	background: #8e8e8e;
	font-family: arial, helvetica, sans-serif;
}

/*
 * Mise en forme du Header
 */

#header {
	width: 1020px;
	height: 377px;
	background-image: url("../images/header/header.jpg");
	-moz-box-shadow: 0px 2px 10px #000;
	-webkit-box-shadow: 0px 2px 10px #000;
}

#header #haut_general #haut {
	opacity: 0.5;
	background-color: #000000;
	width: 1020px;
	height: 56px;
	-moz-box-shadow: 0px 2px 10px #000;
	-webkit-box-shadow: 0px 2px 10px #000;
}

#header #droite {
	width: 438px;
	height: 323px;
	float: right;
	background-color: #000000;
	opacity: 0.5;
}

#header #bas {
	width: 582px;
	height: 52px;
	margin-top: 270px;
	background-color: #000000;
	float: left;
	opacity: 0.5;
}

#header #haut_general h1 {
	font-size: 36pt;
	font-style: normal;
	color: white;
	margin-top: -55px;
	margin-left: 20px;
}

#header #haut_general h2 {
	font-size: 24pt;
	color: #ffffff;
	margin-top: -77px;
	margin-left: 400px;
	height: 17px;
}
#haut_test {
	color: white;
	margin-top: -200px;
	margin-left: 600px;
	float: left;
}

Merci de votre aide rapide

A bientôt
Modifié par lionmar (23 Jun 2010 - 12:22)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Pour ce qui est de ton problème, tout élément transparent transmet sa transparence à son contenu et a ses enfants. Le seul moyen pour ne pas être embêté est d'utiliser une image de fond en PNG semi-transparente.

Bonne continuation

Hello,

Merci pour ta réponse, je suis désolé, mais je pensait que le code se mettait automatiquement comme sur la plupart des site. néanmoins. j'ai essayé de mettre le code en forme, mais cela ne fonctionne pas. désolé, mais c'est un beug de votre côté.

Autrement, si tu regarde bien le code CSS, tu verra que ce n0'est pas une classe fille, mais belle est bien une classe indépendante de la classe gérant les transparence. ce qui est bizard, cêst que la transparence et gérer uniquement lorsqu'il passe la dessus, sinon tout fonctionne parfaitement.

Merci de ton aide et à bientôt

lionmar a écrit :
j'ai essayé de mettre le code en forme, mais cela ne fonctionne pas. désolé, mais c'est un beug de votre côté.

Oui, mais non... Les boutons ne positionnent pas les balises autours du texte sélectionné, mais en fin de message ; à toi de placer les balises au bon endroit.

Salut,

lionmar a écrit :
Merci pour ta réponse, je suis désolé, mais je pensait que le code se mettait automatiquement comme sur la plupart des site. néanmoins. j'ai essayé de mettre le code en forme, mais cela ne fonctionne pas. désolé, mais c'est un beug de votre côté.

C'est étrange, chez moi ça fonctionne :

.volonte {quand-on-veut-on-peut: +oo;}

C'est juste que si tu mets les balises autour de rien à la fin de ton message, ça ne fonctionne pas. Par contre si tu mets la balise [ code] avant et [ /code] après (sans les espaces à l'intérieur des crochets), là oui.

Hello,

Merci de ta remarque, mais je pense qu'elle n'est pas très constructive, car j'ai l'habitude d'aller sur les forum, et normalement il marche tous par une simple sélection ou souvent encore une détection automatique du code.

Bon bref, j'ai toujours le même problème que marqué plus haut, si quelqu'un pouvait m'aider ce serait super sympa. Je précise que la dedans entre mes deux div, il n'y a aucun notion d'héritage, vu que en regardant le code CSS, ce sont deux choses complétement séparée. j'ai même essayé de les séparer un peu mieux, mais cela change rien au problème.

Merci de votre aide précieuse et d'une rapidité sans égale.

A bientôt

Bonjours à tous,

J'ai toujours le même problème, pour vous aider à résoudre mon problème, je me permet de vous mettre encore le code HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <style type="text/css" >
          @import "style/style.css";
      </style>
    <title>Site Personnel de xxxxxx</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>

      <div id="header">
          <div id="haut_general">
              <div id="haut"></div>
              <div id="titre">
                  <h1>xxxxxxxx /</h1>
                  <h2>xxxxxxxx</h2>
              </div>
          </div>

          <div id="droite"></div>
          <div id="bas"></div>
      </div>
      <div id="haut_test">Test</div>
  </body>
</html>

Pour préserver mon anonymat, j'ai masqué mon nom et prénom et ma profession, par des X.

A bientôt

Bonjour,

Si j'ai bien compris, le problème d'origine vient du fait que tu utilises la propriété CSS opacity qui rend translucide l'élément complet auquel elle s'applique: bordure, fond (couleur/image), contenu (texte, éléments enfants...).

Si tu cherches à obtenir des couleurs de fond translucides, c'est du côté des couleurs RGBA en CSS qu'il faut regarder. Pas opacity qui n'est pas fait pour ça.
Modifié par Florent V. (24 Jun 2010 - 14:19)

Hello,

Merci beaucoup, mais pour finir j'ai utilisé une image en PNG d'un pixel, c'est plus simple.

J'ai un autre problème, maintenant est ce que vous seriez comment réaliser une ombre, mais interne et non externe comme on le fait d'habitude, si j'inverse les valeur, cela ne fonctionne pas.

Merci de votre aide précieuse et à bientôt

Merci à tous, j'ai réussi à faire ce dont je voulais grâce au paramètre inset que j'ai rajouter dans mon box-shadow.

Merci pour votre aide.

A bientôt