Problème DIV qui apparaissent

**imothep85** · 22/02/2018, 17h17

dans ma page web en cours, j'ai des divs qui apparaissent vides, ces divs ne devraient pas exister, donc y doit y avoir une erreur dans mon code!

voici mon code

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
</head>
<body>
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="tous" href="#">Tous</a></li>
<li><a id="animation" href="#">Animation</a></li>
<li><a id="application" href="#">Application</a></li>
<li><a id="architecture" href="#">Architecture</a></li>
<li><a id="audiovisuel" href="#">Audiovisuel</a></li>
<li><a id="produit" href="#">Produit</a></li>
<li><a id="web" href="#">Web</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul></a></li>
</ul>
<br>
<div id="container">
<div id="main" style="clear:both;"></div>
<script>

    $("#tous").on("click",function(){
        $("#main").load("tous.html");
});

    $("#animation").on("click",function(){
        $("#main").load("animation.html");
});

    $("#application").on("click",function(){
        $("#main").load("application.html");
});

   $("#architecture").on("click",function(){
        $("#main").load("architecture.html");
});

   $("#audiovisuel").on("click",function(){
        $("#main").load("audiovisuel.html");
});

   $("#produit").on("click",function(){
        $("#main").load("produit.html");
});

   $("#web").on("click",function(){
        $("#main").load("web.html");
});

   $("#contact").on("click",function(){
        $("#main").load("contact.html");
});

</script>
</div>
</div>
<div id="social_icons">
        <i class="fab fa-facebook-square fa-2x"></i>
        <i class="fab fa-twitter-square fa-2x"></i>
        <i class="fab fa-linkedin fa-2x"></i>
        <i class="fab fa-google-plus-square fa-2x"></i>
		 <i class="fab fa-youtube-square fa-2x"></i>
		 <i class="fab fa-flickr fa-2x"></i>
    </div>
</div>
<footer id="footer">
<i class="far fa-copyright"></i> Developed by Mattepainting.be 2018</footer>

<script>
            var _gaq=[['_setAccount','UA-23414256-1'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src='//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
</body>
</html>

le site en cours ou la page est visible http://redbaboon.be/test/index.html#

Il faut cliquer sur le menu ARCHITECTURE et la on voit les divs qui ne devraient pas etre la

est ce qu'on peut m'aider a solutionner ca?

merci

**headmax** · 22/02/2018, 17h55

Je pense qu'il faudrait que tu nettoie un peu ton code HTML, car tu charge plusieurs fois jquery ainsi qu'une meta qui n'a rien a faire dans BODY.

**imothep85** · 22/02/2018, 17h57

Tu peux me dire ou..

merci

**headmax** · 22/02/2018, 18h06

Envoyé par imothep85

Tu peux me dire ou..

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
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
210
211
<div id="container">
<div id="main" style="clear:both;">



<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamically load images: jQuery Looping</title>

<style type="text/css">

body {
    background-color: #2F2A29;
}

div {
 display: inline-block;
 margin-left: 0.3%;
 margin-right: 0.3%;
 margin-bottom: 0.3%;
 margin-top: 0.3%;

}

.div1 {
  opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }


.div1:hover {
      opacity: 0.5;
}

.div2 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div2:hover {
      opacity: 0.5;
}

.div3 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div3:hover {
      opacity: 0.5;
}

.div4 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div4:hover {
      opacity: 0.5;
}

.div5 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div5:hover {
      opacity: 0.5;
}

.div6 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div6:hover {
      opacity: 0.5;
}

.div7 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div7:hover {
      opacity: 0.5;
}

.div8 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div8:hover {
      opacity: 0.5;
}

.div9 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div9:hover {
      opacity: 0.5;
}

.div10 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div10:hover {
      opacity: 0.5;
}

.div11 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div11:hover {
      opacity: 0.5;
}

.div12 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div12:hover {
      opacity: 0.5;
}

.div13 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div13:hover {
      opacity: 0.5;
}

.div14 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div14:hover {
      opacity: 0.5;
}

.div15 {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

.div15:hover {
      opacity: 0.5;
}

</style>

<center>

<div class="div1"><img src="img/architecture/thumb/3.jpg" width="300" height="200"></div>
<div class="div2"><img src="img/architecture/thumb/4.jpg" width="300" height="200"></div>
<div class="div3"><img src="img/architecture/thumb/5.jpg" width="300" height="200"></div>
<div class="div4"><img src="img/architecture/thumb/6.jpg" width="300" height="200"></div>
<div class="div5"><img src="img/architecture/thumb/7.jpg" width="300" height="200"></div>
<div class="div6"><img src="img/architecture/thumb/8.jpg" width="300" height="200"></div>
<div class="div7"><img src="img/architecture/thumb/9.jpg" width="300" height="200"></div>
<div class="div8"><img src="img/architecture/thumb/10.jpg" width="300" height="200"></div>
<div class="div9"><img src="img/architecture/thumb/11.jpg" width="300" height="200"></div>
<div class="div10"><img src="img/architecture/thumb/12.jpg" width="300" height="200"></div>
<div class="div11"><img src="img/architecture/thumb/13.jpg" width="300" height="200"></div>
<div class="div12"><img src="img/architecture/thumb/14.jpg" width="300" height="200"></div>
<div class="div13"><img src="img/architecture/thumb/15.jpg" width="300" height="200"></div>
<div class="div14"><img src="img/architecture/thumb/16.jpg" width="300" height="200"></div>
<div class="div15"><img src="img/architecture/thumb/17.jpg" width="300" height="200"></div>
</center>
<script src="script/jquery-3.3.1.min.js" type="text/javascript"></script>

**imothep85** · 22/02/2018, 18h11

Merci pour ton aide est ce que tu sais me dire ce qui déconne dans mon index.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
<! DOCTYPE html>
<html lang="fr">
<head>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="robots" content="index,follow,all" />
    <meta name="revisit-after" content="15 days" />
    <meta name="author" content="Cynaptek" />
    <meta name="geo.region" content="BE-WLG" />
    <meta name="geo.placename" content="liege" />
	<link rel="shortcut icon" href="img/cynaptek_favicon.ico"/>
	<link rel="icon" href="img/cynaptek_favicon.svg" type="image/x-icon" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito">
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<title>Cynaptek Studio 3D</title>
<link rel="stylesheet" href="style.css">


<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>0){
$('.menu').addClass("sticky");
}
else
{
$('.menu').removeClass("sticky");
}
})
</script>
<script type="text/javascript">
    $(document).ready(function(){
       $("#tous").click(function(){
        $('#main').load('tous.html');
         //alert("Thanks for visiting!");
       }); 

       $("#animation").click(function(){
        $('#main').load('animation.html');
         //alert("Thanks for visiting!");
       });
	   
	   $("#application").click(function(){
        $('#main').load('application.html');
         //alert("Thanks for visiting!");
       });
	   
	    $("#architecture").click(function(){
        $('#main').load('architecture.html');
         //alert("Thanks for visiting!");
       });
	   
	   $("#audiovisuel").click(function(){
        $('#main').load('audiovisuel.html');
         //alert("Thanks for visiting!");
       });
	    
	   $("#produit").click(function(){
        $('#main').load('produit.html');
         //alert("Thanks for visiting!");
       });
	     
	   $("#web").click(function(){
        $('#main').load('web.html');
         //alert("Thanks for visiting!");
       });
	     
	   $("#contact").click(function(){
        $('#main').load('contact.html');
         //alert("Thanks for visiting!");
       });  
     });
</script>
</head>
<body>
<ul class="menu">
<img src="img/cynaptek-logo2018b.png" id="logo">
<li><a id="tous" href="#">Tous</a></li>
<li><a id="animation" href="#">Animation</a></li>
<li><a id="application" href="#">Application</a></li>
<li><a id="architecture" href="#">Architecture</a></li>
<li><a id="audiovisuel" href="#">Audiovisuel</a></li>
<li><a id="produit" href="#">Produit</a></li>
<li><a id="web" href="#">Web</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul></a></li>
</ul>
<br>
<div id="container">
<div id="main" style="clear:both;"></div>
</div>
</div>
<div id="social_icons">
        <i class="fab fa-facebook-square fa-2x"></i>
        <i class="fab fa-twitter-square fa-2x"></i>
        <i class="fab fa-linkedin fa-2x"></i>
        <i class="fab fa-google-plus-square fa-2x"></i>
		 <i class="fab fa-youtube-square fa-2x"></i>
		 <i class="fab fa-flickr fa-2x"></i>
    </div>
</div>
<footer id="footer">
<i class="far fa-copyright"></i> Developed by Mattepainting.be 2018</footer>

<script>
            var _gaq=[['_setAccount','UA-23414256-1'],['_trackPageview']];
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
            g.src='//www.google-analytics.com/ga.js';
            s.parentNode.insertBefore(g,s)}(document,'script'));
        </script>
</body>
</html>

Maintenant la page architecture fonctionne bien mais il y a toujours 2 divs vides qui se créent je ne sais comment si tu regardes dans la page architecture: http://redbaboon.be/test/index.html#

encore merci

**headmax** · 22/02/2018, 18h15

Lorsque tu dit 2 divs se créent en cliquant sur architecture montre une image je vois pas trop de quoi tu parle ??? J'ai deux images vides en bas mais comprend pas ta question

.

**imothep85** · 22/02/2018, 18h20

regarde en bas a droite y a deux divs vides qui ne devraient pas exister

http://oi63.tinypic.com/sbn8nq.jpg

**imothep85** · 22/02/2018, 18h26

les erreurs avec chrome sont:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
jquery-3.3.1.js:9488 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery-3.3.1.js:9488
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
16.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
216.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
16.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
16.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
16.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
17.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

Problème DIV qui apparaissent

Conception Web

Discussions similaires

Partager

Partager