Discussion :

[jbjweb]

Bonjour à tous,
Je suis en train de concevoir un site en XHTML/CSS, et pour mon menu, j'ai mis une image de fond, lorsqu'un lien est survolé, un bloc noir transparent doit apparaitre sur le lien.
Ce que j'ai fait marche parfaitement sous Firefox, mais ne fonctionne pas sous IE, mon bloc noir n'étant pas transparent.

Je vous copie le bout de code CSS correspondant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
.menu{
/* Conteneur du menu */
	background-image:url("images/menu.jpg");
	background-repeat:no-repeat;
	background-position:left;
	width: 263px;
	height: 401px;
}
 
a.liens_menu { 
/*Propriétés des liens du menu*/  
	color: white;
	border:none;
	font-weight: bold;
	position: relative;
	top: 0;	
	display: block;
	padding:6px ;
	filter:Alpha(opacity=50); 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 
 
}
 
a.liens_menu:hover { 
/*Propriétés des liens du menu lors de la sélection*/
	background : #000000; /* pour le rollover, mettre la couleur à #666666 au survol */
 
	/* pour IE */
	filter: alpha(opacity=50); 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
 
	/* pour mozilla */
	-moz-opacity: 0.5;
 
	/* pour safari (CSS3) */
	opacity: 0.5;
}

Merci d'avance pour votre aide et vos réponse, une bonne soirée à tou

[trotters213]

Pour une trnasparence sur tous les navigateurs tu peux rajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

-khtml-opacity:0.8;

NB : aucun de tous ces attributs n'est conforme

[jbjweb]

Merci pour ta réponse.
Je viens de tester le code. Sous IE, j'ai effectivement bien une transparence au niveau du texte, mais pas au niveau du bloc noir. Le bloc noir est éclairci, mais on ne voit pas l'image de fond par transparence.

Voici le lien du site si besoin est: http://jeanbaptiste.jung.free.fr/avatherm/

Merci d'avance!

[trotters213]

c'est normal tu appliques la transparence que sur les liens, il faut que tu l'applique sur l'éléments de la liste (le parent du a si tu préfères).

[jbjweb]

je ne comprends pas très bien...Je n'ai pas utilisé de liste pour mon menu :/

[trotters213]

j'avais pas vu ton code excuse .
Je ne vois pas vraiment pourquoi ça ne marche pas (c'est un truc que je n'utilises jamais vu que ce n'est pas normalisé).
Par contre pourquoi tu fais ça :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
a.liens_menu { 
/*Propriétés des liens du menu*/  
	color: white;
	border:none;
	font-weight: bold;
	position: relative;
	top: 0;	
	display: block;
	padding:6px ;
	filter:Alpha(opacity=50); 
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);	
}

ça ne sert à rien.

[jbjweb]

Oui, je vais enlever ces deux lignes car -effectivement- elles ne sercvent à rien.
Je les avait insérés en test, ayant vu sur un site que ça pourrait etre une solution à mon problème.

Aucune idée pour résoudre mon problème?

merci d'avance!

[gcyrillus]

bonjour,

tu est victime d'un probleme de layout ..

pour activer celui-ci dans IE ,il te faut ajouter une valeur de "taille" par exemple:

de plus un seul filtre suffit ! , ton code modifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
a.liens_menu { 
/*Propriétés des liens du menu*/  
	color: white;
	border:none;
	font-weight: bold;
	position: relative;
	top: 0;	
	display: block;
	padding:6px ;
	filter:Alpha(opacity=50); 
	height:1em;	/* ou zoom:1;  si cela ne convient pas a tes attentes , et comme tu fais deja dans le css "proprietaire" */
}

++

[trotters213]

apparemment ça ne vient pas de là et bien même si ça venait de là, il vaut mieux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.liens_menu { 
/*Propriétés des liens du menu*/  
	color: white;
	border:none;
	font-weight: bold;
	position: relative;
	top: 0;	
	display: block;
	padding:6px ;
	filter:Alpha(opacity=50); 
}
 
* html .liens_menu {
height:1%;	/* ou zoom:1;  si cela ne convient pas a tes attentes , et comme tu fais deja dans le css "proprietaire" */
}

De plus display: block confère déjà la propriété hasLayout

[jbjweb]

Merci beaucoup
Désormais, ça marche parfaitement comme je le voulais sous IE, mais ça ne marche plus sous Firefox...
Je ne comprends pas trop pourquoi.
Je vais tester deux-trois trucs de mon coté, en attendant si l'un d'entre vous à une idée/solution, je suis preneur!

Merci, une bonne soirée à vous tous!