Actualisation block/inline

**Alzok** · 15/10/2013, 10h49

Bonjour;
Voilà mon problème, quand je me rends sur mon site pour la première fois un bug apparaît, et quand j'actualise la page tous redevient normal.

Effectivement si vous vous rendez sur xml.mathieubha.com (copier coller sous chrome l'url dans la barre d'url pour voir le beug, en accès direct tous marche correctement) vous pouvez voir que les cases du menu ("TEST") qui apparaissent les unes en dessous des autres, de la même manière que les lignes de séparation (qui sont des images). Et si vous actualisez la page tous redevient normal.

Le beug n'a l'air de ce présenter que sous chrome.

J'ai beau chercher je ne comprends absolument pas ce bug, pourquoi la première fois les divs du menu s'affichent comme des blocs et qu'une fois la page actualisée les divs reviennent en inline.

Si vous pouvez m'aider ce serait fort appréciable.

Si dessous le html et le css de la page :

Code html :

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
<html>
	<head>
		 <title></title>
		 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		 <link rel="stylesheet" type="text/css" href="css.css" media="screen" />
	</head>
 
	<body>
		<div id="main">
			<div id="header">
				<div id="connexion"></div>
				<div id="inscription"></div>
			</div>
			<div id="menu">
				<div id="menucat">
					<div id="separateur"></div>
					<div id="separateur"></div>
						<a  href="" class="lien">	
						<div id="cat2" class="cat"><div class="menutext">TEST</div></div>
						</a>
					<div id="separateur"></div>
						<a  href="" class="lien">	
						<div id="cat3" class="cat"><div class="menutext">TEST</div></div>
						</a>
					<div id="separateur"></div>
					<div id="separateur"></div>
						<a  href="contact.php" class="lien">	
						<div id="" class="cat"><div class="menutext">TEST</div></div>
						</a>
					<div id="separateur"></div>
				</div>
			</div>
			<div id="autre"></div>
			<div id="content">
			</div>
			<div id="footer">
			</div>
		</div>
	</body>
</html>

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
/* -------------------------- INDEX -------------------------- */
 
#main {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
margin:auto;
text-align:center;
}
 
#header {
	width:1000px;
	height:300px;
	margin:auto;
	text-align:center;
}
 
 
 
#connexion {
	background:url(image/fond2.jpg);
	width:500px;
	height:300px;
	float:right;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	/* position:absolute; si connexion en hover, mettre en absolute*/
	margin-left:500px;
	z-index:20;
	text-decoration:none;
	}
 
	/* #connexion:hover {
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	position:absolute;
	width:1000px;
	height:300px;
	margin-left:0.1px;
	} */
 
 
 
	#inscription {
	background:url(image/fond.jpg);
	width:350px;
	height:0px;
	float:left;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	position:absolute;
	border-right: 150px solid transparent;
	border-bottom: 300px solid #2fa9ef;
	}
 
	#inscription:hover {
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	width:800px;
	margin-left:0px;
	position:absolute;
	z-index:110;
	}
 
#menu{
width:1000px;
margin:auto;
height:73px;
background:url(image/fondmenubarre2.png);
transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
text-align:center;
z-index:200;
}
 
	.menutext {
	display:inline-block;
	text-align:center;
	margin:auto;
	padding-top:-10px;
	color:white;
	font-size:20px;
	font-family : Tahoma;
	font-weight:bold;
	text-decoration:none;
	padding-top:22px;
	}
 
 
		#separateur {
		width:2px;
		height:71px;
		background:url(image/barreseparateurlong.png);
		display:inline-block;
		position:absolute;
		}
 
		.cat {
		display:inline-block;
		transition: all .6s ease-in-out;
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		margin:auto;
		height:73px;
		width:200px;
		text-align:center;
		}
 
		.cat:hover {
		width:250px;
		transition: all .6s ease-in-out;
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		}
 
#autre {
width:1000px;
height:50px;
background:url(image/fond.jpg);
margin:auto;
text-align:center;
}		
 
#content {
width:1000px;
height:300px;
background:#222222;
margin:auto;
text-align:center;
border-top:4px solid #2FA9EF;
border-bottom:4px solid #2FA9EF;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
}
 
	#content:hover {
	height:350px;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	}
 
#footer {
background:url(image/fond2.jpg);
height:100px;
width:1000px;
margin:auto;
text-align:center;
}
 
/* ----------------------------------------------------------- */
 
/* -------------------------- FLUX --------------------------- */
 
 
 
/* ----------------------------------------------------------- */
 
/* ----------------------- INSCRIPTION ----------------------- */
 
 
 
/* ----------------------------------------------------------- */

Les images disponibles ici : http://xml.mathieubha.com/image/

Ps : et encore plus étrange quand je fait clique droit en sélectionnant l'url et "accéder à" le beug n'apparait pas, il faut entrer l'url ou la coller.

**Muchos** · 15/10/2013, 12h40

Je confirme le bug: sous Chrome 27 et IE 9, les boîtes TEST sont les unes sur les autres. Si on recharge la page, elles se mettent les unes à côté des autres.

Mettez un doctype pour voir si le bug se corrige.

**Alzok** · 15/10/2013, 13h04

Ajout de la ligne : <!DOCTYPE html>Beug toujours présent.

J'ai tenter également avec : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">mais le problème ce présente toujours.

Edit : A savoir que la position normal des div cat, cat2, cat3 est en inline, c'est à dire sur la même ligne comme le rendus après actualisation de la page.

**rodolphebrd** · 15/10/2013, 13h22

Bonjour,

j'ai fait un test en faisant cela :

Code :

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

1
2
3
4
5
6
7
#menucat { /*correction du code*/
    width: 1000px;
}
.lien {
    display: inline-block;
    width: 200px;
}

En enlevant le display: inline-block; aux deux DIV enfants de .lien et en définissant le hover sur .lien ça fonctionne.

**Alzok** · 15/10/2013, 13h41

Je n'ai pas de classe .menucat dans mon code, mais un div.

J'ai tenter d'ajouter

Code :

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

1
2
3
.lien {
    display: inline-block;
    width: 200px;

Mais le problème persiste. Je pense avoir mal compris ta réponse, peut tu me mettre le code que tu à ajouté/modifié ? (html et css)

**rodolphebrd** · 15/10/2013, 14h04

Corrigé c'est un identifiant

Je n'ai pas touché au HTML...

**Alzok** · 15/10/2013, 14h08

J'ai fait les modifications demandé mais le problème persiste.

Le css avec les modifs :

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
/* -------------------------- INDEX -------------------------- */
 
 
#background {
width:100%;
height:100%;
background-color:white;
z-index:10;
}
 
#main {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
margin:auto;
text-align:center;
 
 
}
 
#header {
	width:1000px;
	height:300px;
	margin:auto;
	text-align:center;
}
 
 
 
#connexion {
	background:url(image/fond2.jpg);
	width:500px;
	height:300px;
	float:right;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	/* position:absolute; si connexion en hover, mettre en absolute*/
	margin-left:500px;
	z-index:20;
	text-decoration:none;
	}
 
	/* #connexion:hover {
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	position:absolute;
	width:1000px;
	height:300px;
	margin-left:0.1px;
	} */
 
 
 
	#inscription {
	background:url(image/fond.jpg);
	width:350px;
	height:0px;
	float:left;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	position:absolute;
	border-right: 150px solid transparent;
	border-bottom: 300px solid #2fa9ef;
	}
 
	#inscription:hover {
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	width:800px;
	margin-left:0px;
	position:absolute;
	z-index:110;
	}
 
#menu{
width:1000px;
margin:auto;
height:73px;
background:url(image/fondmenubarre2.png);
transition: all .8s ease-in-out;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
-ms-transition: all .8s ease-in-out;
text-align:center;
z-index:200;
}
 
	.menutext {
	display:inline-block;
	text-align:center;
	margin:auto;
	padding-top:-10px;
	color:white;
	font-size:20px;
	font-family : Tahoma;
	font-weight:bold;
	text-decoration:none;
	padding-top:22px;
	}
 
 
		#separateur {
		width:2px;
		height:71px;
		background:url(image/barreseparateurlong.png);
		display:inline-block;
		position:absolute;
		margin-top:1px;
		}
 
		.cat {
		display:inline-block;
		transition: all .6s ease-in-out;
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		margin:auto;
		height:73px;
		width:200px;
		text-align:center;
		}
 
		.cat:hover {
		width:250px;
		transition: all .6s ease-in-out;
		-webkit-transition: all .6s ease-in-out;
		-moz-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		-ms-transition: all .6s ease-in-out;
		}
 
		#menucat { 
		width: 1000px;
		}
 
		.lien {
		display: inline-block;
		width: 200px;
		}
 
#autre {
width:1000px;
height:50px;
background:url(image/fond.jpg);
margin:auto;
text-align:center;
}		
 
#content {
width:1000px;
height:300px;
background:#222222;
margin:auto;
text-align:center;
border-top:4px solid #2FA9EF;
border-bottom:4px solid #2FA9EF;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
}
 
	#content:hover {
	height:350px;
	transition: all .6s ease-in-out;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	}
 
#footer {
background:url(image/fond2.jpg);
height:100px;
width:1000px;
margin:auto;
text-align:center;
}
 
/* ----------------------------------------------------------- */
 
/* -------------------------- FLUX --------------------------- */
 
 
 
/* ----------------------------------------------------------- */
 
/* ----------------------- INSCRIPTION ----------------------- */
 
 
 
/* ----------------------------------------------------------- */

**rodolphebrd** · 15/10/2013, 14h28

J'avais oublié un display :

Code :

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

1
2
3
4
5
6
7
#menucat {
   width: 1000px;
   display: table;
}
.lien {
    display: inline-block;
    width: 200px;

enlever le display: inline-block; à la class .cat qui ne sert plus à rien !

**Alzok** · 15/10/2013, 14h36

Avec ce code le problème est résolus mais je n'ai plus l'effet d'auparavant sur le hover du cat, cat2 , cat3.

Effectivement c'est le texte qui bouge maintenant et les div reste de la même taille (alors que le hover est censé les agrandir un peut).

**Alzok** · 15/10/2013, 14h44

La page avec les modifs : http://xml.mathieubha.com
La page sans les modifs : http://xml.mathieubha.com/old/

On vient bien que sur la page old le hover du div a un effet sur la largeur de la case et les divs "séparateur" ce déplacent égallement, tandis qu'avec les modifs seul le texte ce déplace.

**rodolphebrd** · 15/10/2013, 14h45

Comme je vous l'ai dit il faudra appliquer l'effet de survol à .lien:hover et non .cat:hover

EDIT : J'ai l'effet souhaité pourtant de la DIV qui s'agrandit

**Alzok** · 15/10/2013, 14h55

Les modifs sont sur : http://xml.mathieubha.com/

**rodolphebrd** · 15/10/2013, 16h55

Le display:table; n'est pas placé et le hover n'est pas modifié sur les liens.

Pour l'instant vous ne testez pas tout ce que je vous suggère.

Chez moi ça fonctionne.

**Alzok** · 15/10/2013, 17h13

Je vous assure que les modifications on bien était faite comme demandé (voir image) : http://imageshack.us/a/img545/9072/v5z3.jpg

**rodolphebrd** · 15/10/2013, 17h36

Ok pour les modifications.

Et concernant l'effet de survol, à part quelques réglages, je constate que c'est bon non ?

Attention de ne pas appliquer la transition sur le hover mais sur l'état précédent de l'élément.

Code :

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

1
2
3
4
5
6
7
8
.lien {
   display: inline-block;
   width: 200px;
   -webkit-transition: all .6s ease-in-out;
}
.lien:hover {
   width: 250px;
}

**Alzok** · 15/10/2013, 22h16

Oui, le beug n’apparaît plus, merci de votre aide précieuse.

Actualisation block/inline

CSS

Discussions similaires

Partager

Partager