28173 sujets

CSS et mise en forme, CSS3

Transparence dans menu déroulant

Bonjour !!!
J'ai été sur ce site pour avoir un menu déroulant à 3 niveaux : http://dosimple.ch/articles/Menus-dynamiques/
J'ai opté pour le menu horizontal. Maintenant j'essai de rendre les sous-menus transparent en css mais sans succès. Le texte devient aussi transparent et le sous-sous-menu aquiert la transparence plus celle du sous-menu avant...

Qqun voit-il une solution où est-ce que je devrai utiliser des images ?
Modifié par babastutz (11 Oct 2006 - 09:02)
Salut,

Avant de commencer quoi que se soi, tu aurais du vérifier si la transparence est compatible avec tous les navigateurs... Car ce n'est pas le cas, Explorer 6 ne l'accepte pas.

Par contre je crois qu'avec la version 7 la transparence sera opérationelle.

A+
Bonjour babastutz Smiley smile

Hummmmmmm ! Pas très sympa ta réponse à l'égard de Bosy qui a tenté d'apporter son aide... Nous souhaitons que les échanges sur ce forum restent cordiaux... merci à chacun d'en prendre bonne note Smiley cligne
Bosy a écrit :
Salut,

Avant de commencer quoi que se soi, tu aurais du vérifier si la transparence est compatible avec tous les navigateurs... Car ce n'est pas le cas, Explorer 6 ne l'accepte pas.

Par contre je crois qu'avec la version 7 la transparence sera opérationelle.

A+

Sisi, ça marche très bien, suffit de tricher un peu Smiley cligne
Le truc c'est d'avoir une image en Png-32 semi-transparente. Très petit le PNG, genre 5 * 7 pixels sinon les liens dans l'éléments ne fonctionneront plus (IE mon amour).

Alors CSS normalle pour les gens :
background: url(pouet.png);


Et pour IE :
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="pouet.png", sizingMethod="scale");


Tada !
Modifié par FlorentG (11 Oct 2006 - 19:11)
Ne pas oublier de mentionner que l'on peut mélanger les deux pour un support multi-navigateurs:

background: url(pouet.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="pouet.png", sizingMethod="scale");


Aussi, si tu ne veux qu'une transparence totale tu peux juste faire:
background: none;
background-color: transparent;


Tu peux aussi faire des PNG semi transparent plus grand que 5*7 pixels si tu rajoute le code CSS pour les liens:

a {position: relative; z-index: 1;}


Si ces codes ne fonctionnent toujours pas pour toi, procure toi celui-ci:
http://www.energysolar.com/forumtest/pngfix_map_with_background_fix.js
(ce fichier n'est pas de moi, c'est un mix que j'ai fait entre plusieurs scripts de Bobosola).

et rajoute ce code dans tes balises <HEAD> et </HEAD>:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix_map_with_background_fix.js"></script>
<![endif]-->


Voila en espérant que ca t'aide.
Modifié par GBO (11 Oct 2006 - 19:37)
Ok merci beaucoup les gars. Je vais essayer ça le plus vite possible. Mais là j'ai un cours WinDev aujourd'hui..... A plumse
Voilà. J'ai utilisé la solution de FlorentG. Elle fonctionne parfaitement... ou presque. J'ai quelques problèmes avec IE (NON !!! Pas possible !!!??)...
Modifié par babastutz (23 Oct 2006 - 09:06)
Sujet clos
Aller à