Bonjour,

J'ai trouvé ce code sur le web et ai essayé de l'adapter à mes besoins càd détecter la largeur de l'écran (résolution) et adapter la div des comments FB par rapport à celle-ci, pour ne pas que les comments chevauchent le partie centrale du site.

Merci pour toute aide ou commentaire appporté!!! ;-)

Je le fais sans doute très naïvement et très mal (est-ce que ce serait le 'data-width qui fait que de tte façon, ça se fixe à 300px? dans ce cas, comment atteindre ça et le modifier par javascript?):

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="../style/SecondStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
@import "../style/style_fr.css";
.fb-comments-800{width: 100px; color: red;}
.fb-comments-1024{width: 170px; color: green;}
 
</style>
<script language="javascript" type="text/javascript" > 
function change_class() { 
var faceb = document.getElementById("fb1"); 
faceb.className="fb-comments"; 
 
if (screen.width < 801) {
faceb.className="fb-comments-800";
}
if (screen.width < 1025) {
faceb.className="fb-comments-1024";
}
else {   
            break;
        }
}
</script>
</head>
<body onload="couleur(); change_class()">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
 
<div class="fb-comments" id="fb1" data-href="http://www.ericmigom.be/fr/index.html" data-num-posts="3" data-width="300"></div>
<div class="fb-like" id="fb2" data-href="http://www.ericmigom.be/" data-send="true" data-width="300" data-show-faces="true"></div>
	<div id="allBody">
		<!-- begin allHeader -->
		<div id="allHeader">
			<div id="banner">
			<h1>Eric Migom</h1>
				<a href="#">
				Retour &agrave; la page d'accueil
				</a>
 
			</div>
			<!-- end allHeader -->
			<!-- begin menu -->
			<div id="menu">
				<ul>
					<li><a ....etc. reste du site
page test à consulter sur http://www.ericmigom.be/migom2.html

Merci à tous pour votre aide précieuse!

Vh.