Adapter largeur de la Comments Box Facebook en fonction de la largeur de l'écran [Résolu]

vhenin · 18/01/2012, 20h47

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.

NoSmoking · 20/01/2012, 18h38

Bonjour,
cette mise en page passe par du CSS et de la mise en page bien senti et non par du recalcul.
- que fait-on si l'on utilise pas le navigateur fullSize ?
- que fait-on lorsque l'on redimensionne la fenêtre ?

Jettes un oeil dans La galerie CSS > Modèles de mise en page

vhenin · 25/01/2012, 21h11

Merci, noSmoking pour ta réponse.

Tu as entièrement raison. C'était mon premier site en CSS et j'ai eu tort d'y mettre des valeurs fixes... Du coup, le design ne s'adapte pas facilement. Je devrais retravailler le CSS... Mais j'avoue que le courage et le temps me manque.

V.

20/01/2012, 18h38	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, cette mise en page passe par du CSS et de la mise en page bien senti et non par du recalcul. - que fait-on si l'on utilise pas le navigateur fullSize ? - que fait-on lorsque l'on redimensionne la fenêtre ? Jettes un oeil dans La galerie CSS > Modèles de mise en page
	00

25/01/2012, 21h11	#3
vhenin Invité régulier Vincent Henin Inscription : juin 2010 Messages : 40 Détails du profil Informations personnelles : Nom : Vincent Henin Localisation : Belgique Informations forums : Inscription : juin 2010 Messages : 40 Points : 8 Points : 8	Merci, noSmoking pour ta réponse. Tu as entièrement raison. C'était mon premier site en CSS et j'ai eu tort d'y mettre des valeurs fixes... Du coup, le design ne s'adapte pas facilement. Je devrais retravailler le CSS... Mais j'avoue que le courage et le temps me manque. V.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email