Discussion :

[ipeteivince]

Bonjour à tous

Voila , j'ai fait un petit script pour l'affichage de photos.
Le principe est le suivant:
J'affiche les photos en petit format et dès que je clique sur une image, un alyer de 100% par 100% en transparence de 90% vient s'ajouter sur la page avec la photo en grand format.
Ma page fonctionne impec sous Firefox et Opera, ais Internet explorer fait encore de siennes.
Je n'ai pas ma transparence et mes layers sont affichées à des places ou elles n'ont pas lieu de l'e^tre.

Voici un exemple de page: http://www.romain20ans.com (Le mot de passe est romain2007)

Voici ci dessous mon CSS:

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
body{
	background: #361908;
}
 
.contenu{
	/* Défini le style du contenaire de l'affichage*/
	background-color: #824121;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #FFFFFF;
	padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	border-bottom: 2px;
	border-bottom-style: solid;
	border-bottom-color: #61A7B1;
	background-image: url(fond.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
}
.contenu h1{
	/* Défini le style du titre */
	height: 22px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: small;
	color: #61A7B1;
	vertical-align: middle;
}
 
.contenu a{
 
	color: #FFFFFF;
	text-decoration: underline;
}	
 
.contenu a:hover{
	color: #61A7B1;
	text-decoration: none;
	border: 0px;
}
 
.photo_masque{
	background-color: #824121;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	text-align: center;
	background-image: url(fond.gif);
	background-position: bottom left;
	background-repeat: no-repeat; 
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;
	overflow: hidden;
	z-index: 2;
}
 
.photo{
 
	width: 100%;
	height: 100%;	
	position: fixed;
	display: none;
	top: 0px;
	left: 0px;
	text-align: center;
	z-index: 3;
text-align: center;
 
 
}
 
img.cadre{
	/* Définit le style d'affichage d'une image*/
 	border-color: #FFFFFF;
	border-style: solid;
	border-width: 3px;
	background-repeat: no-repeat;
	background-position: top;
	cursor: hand;
}
 
.temps_chargement{
	background-color: #361908;
	width: 100%;
	height: 20px;
	position: fixed;
	bottom: 0px;
	left: 0px;
	border-top: 2px;
	border-top-style: solid;
	border-top-color: #61A7B1;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: x-small;
	color: #61A7B1;
	vertical-align: middle;
	text-align: left;
}
 
.entete{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: large;
	color: #61A7B1;
}

Ai je loupé quelques chose ?

Merci

[Bisûnûrs]

Ai je loupé quelques chose ?

Très certainement le fait que IE6 ne connait pas la valeur fixed pour la propriété position.

Je te renvoie de ce fait à la FAQ :
http://xhtml.developpez.com/faq/?pag...ans_javascript

[mael94420]

Rien a voir avec ton problème mais j'ai une astuce pour ta CSS.
Tu fait

Code :

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

1
2
3
4
padding-top: 7px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;

Alors que tu pourrais faire

Code :

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

padding: 7px 5px 5px 5px;

Ce code fonctionne dans le sens des aiguille d'une montre. C'est a dire que :
padding: top right bottom left;
ou alors si tu met que deux valeur, elles corresponderons à :
padding : top bottom;
Et ca marche bien sur avec tout les attribut du même type.

Voila de quoi te simplifier la CSS