Version complète: sur le forum Webmaster Hub : Transparence de conteneur - héritage
Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site > Le Webdesign
Kreestal
Bonjour à toutes et à tous smile.gif

Depuis quelques jours je passe mes nuits sur le net à la recherche de tous les topics qui concernent la transparence des div. J'ai trouvé ce topic sur Alsacréations, qui m'a été fort utile.

Vous pouvez voir un exemple de ce que j'ai fait ici. (C'est tout moche, mais ce n'est qu'un essai! ;-) )

Comme vous le voyez, la div #conteneur est rendu transparente à 50% grâce à la css. Cependant, comment faire en sorte que le contenu des div #haut, #gauche, #centre et #pied échappe à l'héritage de la div #conteneur, et donc n'apparaisse pas transparent à 50%?

D'avance, je suis désolée si la réponse a déjà été donnée (ou si elle est évidente), vous avez tout à m'apprendre. wink.gif
Edit: si mon sujet est posté dans la mauvaise catégorie, je remercie d'avance les modérateurs de bien vouloir le déplacer. happy.gif

Merci pour vos réponses! B)
Dudu
Salut

(terrible l'ambiance, chez Alsa huh.gif)

J'ai peur de ne pas avoir compris ta question, et je serais tenté naïvement de te répondre: mets une couleur de fond aux div concernés.
Non ? unsure.gif
Kreestal
CITATION(Dudu @ mardi 08 novembre 2005, 13h11)
Salut

(terrible l'ambiance, chez Alsa huh.gif)


Salut Dudu! Merci pour ta réponse! ;-)
(Oui, en effet, y'a visiblement eu une légère incompréhension entre eux...)

CITATION(Dudu @ mardi 08 novembre 2005, 13h11)
J'ai peur de ne pas avoir compris ta question, et je serais tenté naïvement de te répondre: mets une couleur de fond aux div concernés.
Non ? unsure.gif
*


Ma question est toute simple en fait: comment faire en sorte que tout ce qui est contenu dans la div #conteneur (sauf la div#conteneur elle-même, puisque la transparence de sa couleur de fond est précisément l'effet recherché) ne soit pas transparent?...

Si je mets une couleur de fond aux div concernées, elle sera transparente aussi, vu l'héritage (toutes les div concernées sont situées entre les balises <div id="conteneur"></div>).

- L'héritage des attributs de la div #conteneur est-il contournable? Si oui, comment?
- Si non, y a-t-il une solution pour préciser que le contenu des autres div ne doit pas être transparent?
- Si aucune solution n'existe, trouvez-vous gênant que le texte du site soit transparent à 50%? (moi oui blush.gif )

D'avance merci wink.gif

Edit: _AT_Dudu: en fait, certaines des div concernées ont déjà une couleur de fond: #centre, #header... Or, elles sont transparentes. Il faudrait trouver une autre solution. tongue.gif
Dudu
En fait, c'est bien ce que je pensais: j'avais compris de travers wink.gif
Je pensais à des histoires de couleurs de fond alors que le problème vient de l'opacité (le mot "transparence" m'a un peu dérouté).

CODE
#gauche, #droite, #centre, #pied {opacity: 1}
çà devrait marcher wink.gif
Kreestal
CITATION(Dudu @ mardi 08 novembre 2005, 13h36)
En fait, c'est bien ce que je pensais: j'avais compris de travers wink.gif
Je pensais à des histoires de couleurs de fond alors que le problème vient de l'opacité (le mot "transparence" m'a un peu dérouté).

CODE
#gauche, #droite, #centre, #pied {opacity: 1}
çà devrait marcher wink.gif
*


Désolée, j'ai employé le mauvais terme blush.gif (Décidément les boulettes aujourd'hui laugh.gif )

Super le code, je pense aussi que ça devrait marcher! J'essayerai ça ce soir, et bien sûr je te dirai si ça fonctionne.
Merci smile.gif
Anaon
Bonjour tout le monde,

Est-ce que ça fonctionne? smile.gif (le sujet m'intéresse aussi)
Kreestal
Héhé coucou Anaon wub.gif

_AT_Dudu: ton conseil semble ne pas fonctionner malheureusement :nono: J'y ai cru, mais non: je te laisse voir par toi-même

J'ai essayé ton code:

CODE
#gauche, #droite, #centre, #pied {opacity: 1}

[(même s'il me semble qu'il manque un ";" blush.gif ]

ça ne marchait pas mieux.

Donc j'ai essayé comme ça:

CODE
#gauche, #droite, #centre, #pied {-moz-opacity:1;opacity: 1;filter:alpha(opacity=100);}


Mais ça ne marche pas mieux... huh.gif

D'autres idées s'il vous plaît? D'avance merci à tous! smile.gif
Niconemo
Non effectivement je ne pense pas qu'on puisse outrepasser l'héritage de l'opacité. C'est d'ailleurs ce qui est dit dans le sujet d'Alsacreation (si on arrive à lire entre les messages du boulet de base).

Cela dit dans l'exemple que tu donnes il n'y a rien qui ne puisse se faire sans transparences (ou presque rien : je serais embêté pour faire coïncider le motif d'arrière plan du pied de page avec le fond). Excuse-moi si ça ne répons pas tout à fait à ta question. blush.gif
kilo
Coucou Kreestal
je ne suis pas sûr d'être tout à fait réveillé ce matin mais (à tout hasard) je dirais de déplacer

background-color:#857D99;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);

vers #center, sans rien mettre à la place

Joli coup de crayon en tout cas ^_^ ! (les prints sur aenemya...)
Kreestal
CITATION(Niconemo @ mercredi 09 novembre 2005, 07h58)
Non effectivement je ne pense pas qu'on puisse outrepasser l'héritage de l'opacité. C'est d'ailleurs ce qui est dit dans le sujet d'Alsacreation (si on arrive à lire entre les messages du boulet de base).

Cela dit dans l'exemple que tu donnes il n'y a rien qui ne puisse se faire sans transparences (ou presque rien : je serais embêté pour faire coïncider le motif d'arrière plan du pied de page avec le fond). Excuse-moi si ça ne répons pas tout à fait à ta question.  blush.gif
*


Bonjour Niconemo,

Argh, c'est bien ce que je craignais. -_- J'ai bien essayé de mettre une image de fond PNG transparente dans #conteneur, mais ça ne fonctionne pas (mais je dois mal m'y prendre, car j'ai Mozilla, et même là le PNG s'affiche sans transparence).


CITATION(kilo @ mercredi 09 novembre 2005, 09h09)
Coucou Kreestal
je ne suis pas sûr d'être tout à fait réveillé ce matin mais (à tout hasard) je dirais de déplacer

background-color:#857D99;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);

vers #center, sans rien mettre à la place

Joli coup de crayon en tout cas  ^_^  ! (les prints sur aenemya...)
*


Bonjour kilo,

J'ai essayé ton conseil, mais ça ne donne pas le résultat escompté.
Merci pour le compliment wink.gif



Bon... Je suis coincée. wacko.gif
Si quelqu'un a une autre idée, qu'il n'hésite pas à la poster ici! D'avance merci!
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.