Mise en forme de texte bizarre

**Guy87** · 03/09/2023, 15h46

Bonjour à tous,
J'ai une fonction qui permet d'afficher les images d'un répertoire l'une sous l'autre sur un téléphone et 3 par 3 sur un PC.
Pas de souci, ça marche.

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
<?php		
function Affiche_images($chemin, $detect)
{
	$images = array();
		//----- Récupère les images
		$scandir = scandir($chemin);
		$nb_fichiers = count($scandir);
		$nb_fichiers = $nb_fichiers - 2;
		//echo 'Nb fichiers : '.$nb_fichiers."<br><br>";
 
		//----- Met les infos dans un tableau
		for($i=2;$i<=$nb_fichiers+1;$i++) 
		{
			$infos_image = @getImageSize($chemin.$scandir[$i]); 
			$images[$i-1][0] = $chemin.$scandir[$i];	//----- Nom image
		}
 
		//----------------------------------------------------- Visualisation Mobile
		if ($detect==1) 
		{
			echo "<table 100% border = 0>";
			for($i=1;$i<=$nb_fichiers;$i++)
			{
				echo"<tr width='100%'>";
					if(pathinfo($images[$i][0], PATHINFO_EXTENSION) == 'mp4')
					{echo"<video src=".$images[$i][0]." border='0' width='640' height='480' controls>";}
					else 
					{echo"<img src=".$images[$i][0]." border='0'>";}
				echo "</tr>";
			}
			echo "</table>";
		}
		else
		//------------------------------------------------------ Visualisation PC
		{
			echo "<table 100% border = 0>";
			for($i=1;$i<=$nb_fichiers;$i+=3)
			{
				echo"<tr width='100%'>";
					if(pathinfo($images[$i][0], PATHINFO_EXTENSION) == 'mp4')
					{echo"<td width='33%' align='center'><video src=".$images[$i][0]." border='0' width='440' height='340' controls></td>";}
					else {echo"<td width='33%' align='center'><img src=".$images[$i][0]." border='0'></td>";}
 
					if(pathinfo($images[$i+1][0], PATHINFO_EXTENSION) == 'mp4')
					{echo"<td width='33%' align='center'><video src=".$images[$i+1][0]." border='0' width='440' height='340' controls></td>";}
					else {echo"<td width='33%' align='center'><img src=".$images[$i+1][0]." border='0'></td>";}
 
					if(pathinfo($images[$i+2][0], PATHINFO_EXTENSION) == 'mp4')
					{echo"<td width='33%' align='center'><video src=".$images[$i+2][0]." border='0' width='440' height='340' controls></td>";}
					else {echo"<td width='33%' align='center'><img src=".$images[$i+2][0]." border='0'></td>";}
				echo "</tr>";
			}
			echo "</table>";
		}
}
	?>

J'ai du code qui appelle cette fonction plusieurs fois.

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
<!DOCTYPE html>
<html>
<head>
	<style>
                .titre1 
                {
                        font-family: "Arial Black";
                        font-size: 24px;
                        font-weight : bold;
                }
 
                .titre2
                {
                        font-family: "Arial Black";
                        font-size: 16px;
                }
 
                img 
                {
                        max-width : 95%;
                        height : auto;
                }
        </style>
</head>
 
<?php
                require_once 'includes/Mobile_Detect.php';
                $detect = new Mobile_Detect();
                if ($detect->isMobile()) {$mobile=1;}else{$mobile=0;}
                include("includes/fonctions.php");
                
                echo"<body>
                <form><input type='button' value='&#9776 Menu' style='width:200px height:180px' onclick='history.go(-1)'>";
                        //----- Début d'affichage du circuit
                        echo"<center><p class='titre1'>Andalousie du 3 au 25 septembre 2021</p><br>";
                
                        echo"<br><br><center><p class='titre2'>La carte et le circuit en partant de France</p><br>";
                        Affiche_images('photos/andalousie/_circuit/', $mobile);
 
                        echo"<br><br><center><p class='titre2'>Le d&eacute;sert de Tabernas proche d&apos;Alm&eacute;ria avec un village western</p><br>";
                        Affiche_images('photos/andalousie/tabernas/', $mobile);
                
                        echo"<br><br><center><p class='titre2'>Guadix avec ses maisons troglodytes, son march&eacute; et les champs d&apos;oliviers</p><br>";
                        Affiche_images('photos/andalousie/guadix/', $mobile);
                        
                        echo"<br><br><center><p class='titre2'>L&apos;Alhambra &agrave; Grenade, un des monuments le plus c&eacute;l&egrave;bre et le plus visit&eacute; d&apos;Espagne, avec les palais nasrides, l&apos;Alcazaba et le Generalife<br>
                        Attention, il faut r&eacute;server au moins 1 an &agrave; l&apos;avance sur internet</p><br>";
                        Affiche_images('photos/andalousie/alhambra/', $mobile);
                                
?>
		</form>
    </body>
</html>

Tout fonctionne bien sur un PC, par contre sur un téléphone, les premiers textes ne respectent pas la mise en forme alors que plus loin les textes respectent la class titre2.
Sur téléphone les textes sont minuscules au début et normaux plus loin ?
Si quelqu'un a une idée, je suis preneur. Merci

**binarygirl** · 03/09/2023, 16h08

Difficile à dire sans voir le résultat, mais j'éviterais d'utiliser des tailles en pixels dans le CSS, au lieu de ça je définirais le texte en em par exemple.
Vu que sur un écran haute résolution, le texte sera probablement plus petit que prévu, et le rendu sera imprévisible car fonction du device de l'utilisateur.
De même, fixer des largeurs maximales arbitraires n'est pas une bonne idée. 640px de large ce n'est rien aujourd'hui.

Puisqu'on a une feuille de style, autant mettre tout le formatage dedans, y compris celui qui s'applique au tableau.
Mais de nos jours, on utilise plutôt des DIV pour structurer le texte, pas des tableaux !

Éventuellement, on peut utiliser un framework comme Bootstrap, ce qui a l'avantage de fournir un design responsive et de prendre en charge certaines spécificités de browsers.
Honnêtement, ça fait belle lurette qu'on ne soucie plus de savoir si le visiteur est sur mobile ou pas. On conçoit le site responsive et c'est tout, mais bien sûr on peut (on doit) faire preuve de sobriété et ne pas charger des tonnes de libs inutiles.

Pour moi ce n'est pas très clair: si la classe titre2 fonctionne, alors quelles sont les classes qui semblent ne pas l'être ? A noter aussi que c'est une bonne idée de spécifier plusieurs polices de caractères dans les styles, car certaines polices ne sont pas disponibles sur tous les devices (il y aussi des questions de licences).

Mais je ne pense que ça vaut la peine de débugger ce design, utilisez plutôt Bootstrap ou une alternative, et customizez le thème en fonction de vos désirs. Vous vous simplifierez la vie.

**Guy87** · 03/09/2023, 17h39

Merci BinaryGirl,
Je suis retraité, j'ai beaucoup travaillé en C (de l'époque), et je ne connais pas bien ce qui se fait aujourd'hui pour les sites mais je peux m'adapter. Je vais regarder comment fonctionne le Bootstrap, je suis en train de chercher de la doc, ce sera sans doute plus simple et efficace.
Merci pour ta réponse et bonne fin de week-end.

**laurentSc** · 03/09/2023, 18h02

Envoyé par Guy87

Je vais regarder comment fonctionne le Bootstrap

Bonne idée ; ce framework CSS est vraiment bien...

https://getbootstrap.com/docs/5.3/ge.../introduction/

**cavo789** · 03/09/2023, 18h58

Pour info, il y a aussi Tailwind et Bulma, deux frameworks plus récent que bootstrap.

**Guy87** · 04/09/2023, 11h28

Merci à tous,
Dans un premier temps je vais faire de petits tests avec Bootstrap, ça me parait facile et les principales difficultés sont déjà résolues.
Je clôturerai la discussion dans la semaine et si j'ai un souci je reviendrai vers vous.
Bonne journée.

Mise en forme de texte bizarre

Langage PHP

Discussions similaires

Partager

Partager