Actualisation block/inline
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:
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:
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.