28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'héritage de transparence entre deux divs

Bonjour à tous !

pour ne pas encombrer le forum, j'ai fait une page où mon problème est décrit :

http://www.soulmaker.info/pbbloc.html

Je répète ici le contenu de cette page :


Voila mon probleme : je désire faire un effet d'ombrage sur mon site pour que le texte soit plus lisible.
Pour cela j'ai crée un bloc parent 'ombre' avec une certaine opacité dans lequel je place un bloc 'contenu' pour mon texte.
Ainsi, mon bloc 'ombre' s'adapte automatiquement en hauteur à mon bloc 'contenu'.
Tout marche bien sous IE (depuis que j'ai rajouté 'position:relative' dans le css du bloc 'contenu') mais sous Firefox le bloc 'contenu' hérite de l'opacité du bloc 'ombre' et je n'obtient pas du tout l'effet recherché (merci de voir cette page sous chaque navigateur pour bien comprendre).
J'aimerais vraiment savoir où je me plante... Si il s'agit des z-index mal géré ou quoi que ce soit d'autre. La seule combine que j'ai trouvé pour obtenir cet effet est de placer les deux blocs en 'position:absolute' mais je ne veux pas de cette solution car elle me forcerait à indiquer la hauteur de mon bloc 'ombre' pour qu'il s'adapte à mon contenu.
Si quelqu'un à la solution, merci de répondre sur le forum.
Vous pouvez consulter la source librement.


Bien sur, j'ai fait une recherche sur votre site mais je n'ai pas été très satisfait des reponses apportées... Si la seule solution consiste à créer une image transparente, merci de m'indiquer la démarche car je ne maitrise pas trop ce qui est graphique...

Merci d'avance à tous ceux qui prendront la peine de me répondre !
Modifié par aethrileth (29 Sep 2005 - 16:42)
Modérateur
bonjour,
tu peut par exemple te servir, d'une image "png" (sans couleur de fond pour #ombre)pour tout les navigateur et utiliser le filtre que pour IE .
en lui ajoutant ce code dans le html apres que tu ais chargé le css principal



<!--[if IE]>
<style type="text/css">
	#ombre
	{
background-image:url(none);/*pour enlever l'image*/
background-color:black;
filter: alpha(opacity =30);

}
</style>
<![endif]-->


et dans le css normal:
 	#ombre
	{
		width:770px;
background-color:transparent;
background-image:url(l_image-opaque.png);
		border-top:gray solid 1px;
		border-bottom:gray solid 1px;
		z-index:1;

	}


a plus
La technique de gcyrillus fonctionne, par contre sous IE, si l'on place des images en CSS (pour faire des rollovers par exemple), elles héritent de la transparence, même en forçant un z-index à 3 et une opacité à 100 dans #contenu et même en la re-forçant dans les rollovers css...
a écrit :
sous Firefox le bloc 'contenu' hérite de l'opacité du bloc 'ombre'
opacity est une propriété de CSS3 je crois. Cette norme n'est pas définitive, mais pour l'instant il est bien spécifié que la propriété touche l'élément et ses descendants dans le cadre d'un traitement "postprocessing".

Le plus simple à mon avis (simplification CSS, simplification XHTML également (car actuellement tu as une div sans contenu qui sert au rendu uniquement)) c'est de faire une petite image en noir transparent que tu répètes dans le fond de ton contenu.

Une autre solution qui reprend ton idée, serait de mettre ta div ombre dans ta div contenu. Le contenu reste en relatif, mais l'ombre serait en absolu avec une largeur et hauteur à 100% (<== même si le résultat est obtenu, ça ne me parait pas la meilleure idée de la terre Smiley cligne )
Modifié par Xavier (29 Sep 2005 - 13:38)
Enfin, ça marche !!!

J'ai appliqué ta méthode Gcyrillus et ça fonctionne à merveille (je ne connaissais pas ce truc du [if IE] et j'ai failli mettre du javascript dans ma page pour charger la bonne feuille de style en fonction du navigateur)
Grâce à toi, pas de javascript dans mes pages !!! Rien que pour ça, tu seras cité sur mon site dès qu'il sera fini (plus bien sûr lien vers ta page).

Pour les autres, merci d'avoir apporté votre contribution. Je garde la méthode de Gcyrillus car c'est celle qui me convient le mieux.

Gcyrillus : Smiley jap
Grand merci Saï, que vos journées soient longues et vos nuits plaisantes.
Modérateur
je suis content que le forum t'ai permis de regler ton probleme,
j'apprecie ton geste de vouloir mettre un lien vers mon site, pourquoi pas, mais il me semble etre hors sujet par rapport a ton site, et puis le mien est mal fini, j'oserais dire bordelique et sur un hebergement free, donc amener a disparaitre tot ou tard, ...
sinon la methode [if IE] est pour ceux qui font usage de hack, celle qui permettrat la maintenance du css la plus facile si il s'averait que IE7 se comporte bien avec les standard, je n'ai plus le lien, mais ce [if IE] peut etre utiliser pour utiliser chaque version de IE, on pourra donc exclure IE 7 (ou inclure seulement IE5.5 et IE6) facilement si il n y a plus besoin de rectification a faire pour lui. sans avoir a refaire tout le css.
(si je retrouve le lien j'edite mon post).
edit :un lien en anglais: http://www.javascriptkit.com/howto/cc2.shtml
a plus


voilou !
Modifié par gcyrillus (30 Sep 2005 - 09:22)
Sujet clos
Aller à