Discussion :

[jlb59]

Vraiment désolé de cette bourde. Mille excuses.
J'ai tellement l'habitude de discuter avec lui que j'ai écrit son pseudo machinalement.

Ne m'en veux surtout pas !
Merci.

[laurentSc]

Pas de problème. Il est très bon et m'a déjà bien aidé aussi.

Non, tu n'auras pas besoin de tout refaire.

Ce que je pense qu'il faudrait faire :

1- tu choisis un des sites exemple de https://www.codeur.com/tuto/bootstra...e-bootstrap-5/.

2- Tu remplaces le code de leurs pages par celui de tes 6 pages (Accueil, A propos, FAQ, Grand Test, Test de QI, contact) en adaptant les noms dans leur menu et en le modifiant pour qu'il y ait bien 6 pages.

3- Du post 19, tu abandonnes tout ce code.

4- L'idéal serait de faire cette mise au point sur un serveur local ; ça te permettrait de vérifier que ça marche sur ordi et quand tu es satisfait, tu le mets en ligne (en sauvegardant avant le site actuel pour pouvoir revenir en arrière si besoin) car comme il y a du PHP, pas possible de tester si c'est bien responsive autrement.

[jlb59]

Oui, il est très bon !

Comme il se fait tard, je verrai ça demain après midi car le matin, j'ai des obligations.

Merci de ton aide et bonne soirée.

[jlb59]

Bonjour Laurent,

J'ai regardé le lien que tu m'as envoyé pour Bootstrap, c'est en anglais et ça ne m'arrange pas du tout.
En plus, il y a des extensions qui me sont inconnues.
Tu sais, j'ai l'habiture de faire :

• Header
• Index
• (mes pages)
• Footer

Et je ne vois rien de tout ça.

Si tu dis qu'il faille utiliser mes 6 pages pour l'instant, je fais quoi des autres ?


Mais je t'avoue que je n'y comprends pas grand chose parce que ne sais pas où aller pour faire ce que tu m'as dit.

En effet, il va certainement y avoir des problèmes avec les CSS, et comme mes pages peuvent avoir un code CSS dirérent, je ne suis pas sorti de l'auberge.

Mais quand tu as dis "3- Du post 19, tu abandonnes tout ce code.", ça veut dire quoi exactement ?

Comme je vais tester "en local", comme tu dis, je le mettrai en ligne lorsque ce sera parfait
Mais tu dis encore "car comme il y a du PHP, pas possible de tester si c'est bien responsive autrement.", là, ça se complique sérieusement.

Si ça continu, je vais rester sur la vieille école, que je connais un peu mieux !

[laurentSc]

Je vais m'absenter. Je ne pourrai répondre que plus tard.

[jlb59]

OK Laurent.
Bonne semaine.

[laurentSc]

J'ai oublié de préciser que je m'absentais que quelques heures...

Si tu dis qu'il faille utiliser mes 6 pages pour l'instant, je fais quoi des autres ?

C'est que je croyais qu'il n'y avait que 6 pages. Peux-tu me donner ton arborescence complète ?

Mais quand tu as dis "3- Du post 19, tu abandonnes tout ce code.", ça veut dire quoi exactement ?

Qu'il faut abandonner ton architecture de code et adopter celle du site responsive que tu choisiras dans https://www.codeur.com/tuto/bootstra...e-bootstrap-5/.

Mais tu dis encore "car comme il y a du PHP, pas possible de tester si c'est bien responsive autrement.", là, ça se complique sérieusement.

Si le PHP ne peut se tester que en ligne, c'est car c'est un langage serveur mais je me trompe car on peut le tester sur un serveur local...

Un conseil : pour ne pas casser le site en ligne actuel, crée un répertoire "test" dans lequel tu mettras le code modifié. Son URL sera donc https://qi98.legtux.org/test/index.php

[jlb59]

Je vais faire fonctionner tout ça en ligne, tout au moins, je vais essayer.

Je ne suis pas chez moi, aussi, je t'enverrai l'arborescence demain.

Au fait, quand tu parles l'arborescence, c'est celui du PC ou le sitemap ?
Notamment, il y a 8 fichiers et celui nommé "tests de QI", c'est un mélange de html et JS.
C'est peut-être là que ça va se compliqué !

[laurentSc]

Au fait, quand tu parles l'arborescence, c'est celui du PC ou le sitemap ?

Je pense celui du PC.

Notamment, il y a 8 fichiers et celui nommé "tests de QI", c'est un mélange de html et JS.
C'est peut-être là que ça va se compliqué !

Donne moi quelques détails STP.

[jlb59]

Ok !
Dès que je rentre, je prépare tout ça et détaillerai !

[jlb59]

Bonjour Laurent,

Comme j'ai dit hier, je te mets l'arborescence de mon site sur le PC.

Comme il y a pas mal de fichiers en HTML + JS, ça risque de poser problème si je me mets au BootStrap.







Pour le problème cité, voici un petit aperçu du code pour les tests.

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
 
(...)
			<form class='gauche t22' name="fm" action="javascrit,void(0);">
				<table class="gauche" style="width:100%;">
					<tr>
						<td colspan="7"><span id="res">&nbsp;</span></td>
					</tr>
					<tr>
						<td class="gauche" colspan="7"><input class="bouton t22" type="button" name="but" value="Commencez le test ?" onClick="window.clearTimeout(SD);tel+=1;t0=klok[tel];calc();"></td>
					</tr>
					<tr><td>&nbsp;</td></tr>
					<tr>
						<td class="gauche" colspan="7"><input class="bouton t22" type='button' name='but2' value=' Retour au choix des tests ? ' onclick=location.replace('?page=test_qi')></td>
					</tr>
				</table>
 
					<!-- ##### Pour l'affichage des résultats ##### -->
					<table class="gauche"><tr><td class="" colspan="7"><span id="okk">&nbsp;</span></td></tr></table>
				</form>
 
</section>
 
<!-- ************************************************* -->
<!-- tests_poulies1.js -->
<!-- ************************************************* -->
<script>
var iq = new Array(
//##### SERIE 1
"<tr><td style='border-style:none;text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies1.jpg' alt='' width='300px'>" +
"</td></tr>" +
"<tr colspan='5'>" +
"<td class='centre'><br /><label><br /><span class='cadre'>50kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>75kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>90kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>100kg</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=1;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>Je&nbsp;ne&nbsp;sais&nbsp;pas</span><br /><br /><input type='radio' name='sel1' onclick='ant[0]=0;'></label></td>" +
"</tr>",
 
//##### SERIE 2
"<tr><td style='text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies2.jpg' alt='' width='300px'>" +
"</td></tr>" +
"<tr colspan='5'>" +
"<td class='centre'><br /><label><br /><span class='cadre'>35kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>30kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>40kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>50kg</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=1;'></label></td>" +
"<td class='centre'><br /><label><br /><span class='cadre'>Je&nbsp;ne&nbsp;sais&nbsp;pas</span><br /><br /><input type='radio' name='sel2' onclick='ant[1]=0;'></label></td>" +
"<td class='centre'></td>" +
"<td class='centre'></td>" +
"</tr>",
 
//##### SERIE 3
"<tr><td style='text-align:center' colspan='5'>" +
"<img src='pages/tests/images/mecanique/poulies/tests_poulies3.jpg' alt='' width='300px'>" +
"</td></tr>" +
(...)
var klok = new Array(20,20,30,30,30,30,20); /* nbre x 60 */
var tel = -1;
var goed = 0;
var telZ = inpZ = "";
var t0 = 0;
var SD
 
function calc() {
	document.fm.but.value = " Série suivante ";
	if(tel > 6) {
		telZ = "<p class='gauche'><span class='gras rouge cadre majuscule'>Fin du test</span></p>";
		inpZ = "<tr><td></td></tr>";
	}
	else {
		telZ = "<tr><td colspan='7'>Série <span class='gras bleu'>Nunéro " + (tel+1) + "</span> - " + 
		"En reste : <span class='gras bleu'>" + (7 - tel - 1) + "</span></td></tr>";
		inpZ = "<tr><td colspan='7'>Temps pour cette série : <span class='bleu'>" + klok[tel] + " secondes.</span><br />" + 
		"Temps restant : <span class='centre bleu'><input class='centre' type='text' name='rest' id='rest' size=2> secondes</span></td></tr>" +
			"<tr><td colspan='7'><hr></td></tr>" +
			"<tr><td class='gauche gras bleu' colspan='7'>Choisissez la force à exercer pour soulever le poids.</td></tr>" +
			"<tr><td class='gauche' colspan='7'>" + iq[tel] + "</td></tr>" +
			"<tr><td class='gauche' colspan='7'><hr></td></tr></table>";
		}
 
	document.getElementById('res').innerHTML = "<div class='gauche'><table class='gauche>" +
												"<tr><td colspan='7'>" + telZ + 
												"</td></tr><tr><td colspan='7'>" + inpZ + 
												"</table></div>";
 
(...)

Si ça peut t'aider à résoudre ce problème de BootStrap, ce serait parfait !

A bientôt et merci encore.

[thierrygz]

Bonjour,

Il pourrait être plus facile de lire les informations importantes, si celles-ci avaient une taille appropriée.

Les textes du footer n'ont pas besoin d'avoir une taille de caractères si grande. Il faudrait hiérarchiser les informations de la page et adapter les tailles de caractères.
Cette adaptation peut-être faite en déplaçant les paramètres CSS des textes, dans les blocs @media.
Plus la taille de l'écran est grande, plus les polices de caractères peuvent l'être. Ce sera donc dans ces blocs que l'on pourrait mentionner des lignes :
font: 20pt comic sans ms, sans-serif;
(la valeur en gras sera adaptée en fonction de la taille de l'écran)

Est-ce facile à comprendre ?

Bonjour jlb59,
voici un exemple copié sur un de mes sites :

Code css :

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
@media screen and (max-width: 1600px) {
    fieldset {
      padding: 4rem;
    }
  }
  @media screen and (max-width: 1024px) {
    fieldset {
      padding: 3rem;
    }
  }
  @media screen and (max-width: 960px) {
    fieldset {
      padding: 2rem;
    }
  }
  @media screen and (max-width: 767px) {
    fieldset {
      padding: 1rem;
    }
  }

Dans cet exemple, on a 4 cas différents. Dans chaque cas, on applique un padding différent pour les éléments de type fieldset. Donc par exemple, si tu veux cibler les écrans type téléphone, c'est le dernier qui agira.

[jlb59]

Est-ce facile à comprendre ?

Bonjour,

Je vois bien le principe et j'ai mis ce code dans les css concernés mais rien ne fonctionne... ou alors, c'est mon smartphone qui déconne !

[laurentSc]

Je vois bien le principe et j'ai mis ce code dans les css concernés mais rien ne fonctionne... ou alors, c'est mon smartphone qui déconne !

Ton smartphone n'y est pour rien. Il s'agissait d'un exemple de code CSS utilisant @media screen mais bien sûr, il faut mettre un autre code CSS pour chaque cas.

[laurentSc]

Vu qu'il y a un certain nombre de fichiers, pas la peine d'en donner le contenu dans ce forum, mais pour pouvoir chercher une solution, le mieux est peut-être de copier l'ensemble du projet, de le zipper et de le transmettre en pièce jointe ce qui permettrait de chercher une solution en local...

[jlb59]

@media screen[/C] mais bien sûr, il faut mettre un autre code CSS pour chaque cas.

C'est ce que j'ai fait, mais est-ce qu'en plus, il faut mettre le code dans toutes les pages avec "style" ?

[laurentSc]

C'est ce que j'ai fait, mais est-ce qu'en plus, il faut mettre le code dans toutes les pages avec "style" ?

Pour qu'il soit appliqué à toutes les pages (ce qui est nécessaire), plutôt que de mettre le code CSS entre balises style dans la partie body d'un seul fichier (ce que tu avais fait mais que tu as retiré), il faudrait le placer dans le fichier styles.css.

[jlb59]

Pour qu'il soit appliqué à toutes les pages (ce qui est nécessaire), plutôt que de mettre le code CSS entre balises style dans la partie body d'un seul fichier (ce que tu avais fait mais que tu as retiré), il faudrait le placer dans le fichier styles.css.

Ok, j'ai comme ça dans "header.php" :

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
</head>
<body>
...
<style>
}
	@media screen and (max-width: 1600px) {
    fieldset {
      padding: 4rem;
    }
  }
  @media screen and (max-width: 1024px) {
    fieldset {
      padding: 3rem;
    }
  }
  @media screen and (max-width: 960px) {
    fieldset {
      padding: 2rem;
    }
  }
  @media screen and (max-width: 767px) {
    fieldset {
      padding: 1rem;
    }
  }
</style>
...

Tu crois que ça va marcher, parce dans styles.css, et même ailleurs, ça ne va pas.

Tu me diras qu'il faut tout essayé et voir où c'est ok !

J'ai donc transféré header.php, mais sur mon smartphone, y a aucun changement.

[NoSmoking]

Bonjour,

Juste une petite question sur la possibilité de faire mon site accessible à la fois sur PC et sur un téléphone et/ou une tablette.

Je demande ça car mon site sur PC est presque impeccable, la mise en forme toutefois, mais lorsque je vais le voir sur mon téléphone, il faut presque des jumelles pour lire le tout, ça fait un peu comme une font de 5 ou 6 pixels.

Je déplace cette discussion vers le forum CSS.



Au passage je note que tu n'as pas mis en place une meta importante soulignée par domi65, à savoir :

Cette déclaration dans le <head> de ton document devrait résoudre ce problème
<meta name="viewport" content="width=device-width, initial-scale=1.0">

[jlb59]

Au passage je note que tu n'as pas mis en place une meta importante soulignée par domi65, à savoir :

C'est parce que je ne l'ai pas vu, désolé.

J'ai ajouté cette ligne de code et maintenant sur le smartphone c'est très grand, un peu comme si on zoomait sur l'écran.
Mais ça reste la même chose, mais c'est pas grave.

Il faut dire aussi qu(il y beaucoup plus de recherche sur un smartphone ou une tablette que sur un PC.

En fait, c'est surtout pour cela que j'ai posé toutes ces questions.