[Résolu] Pb de mise en page / Centrage

Bonjour,


Alors à première vue il va falloir revoir ton php parce qu’il y a une row qui ne se ferme pas selon ce que je vois. Si je simplifie ton code aux simples "echo" :

<div class="bloc"> /* On ouvre bloc */
	<div class="row"> /* On ouvre row */
	<?php
        foreach($image_files as $index=>$file) {
            echo '<a class="photo-link" href="',$images_dir.$file,'"><img src="',$thumbnail_image,'" title="',$description,'" /></a>';
            if($index % $images_per_row == 0) { echo '</div><br /><div class="clear"></div><div class="row">'; } /* On ferme row et on en ouvre un autre */
        }
        echo '<div class="clear"></div>'; /* On met un clear */
    else {
        echo '<p>Aucune image &agrave; afficher...</p>'; /* On met un p */
    }
    ?>
</div>(...) /* On ferme bloc */

Du coup il y a toujours un row qui n'est pas fermé. Donc déjà faut régler ça.

Ensuite le coup des clear je suis pas fan mais tu as peut etre tes raisons.

Sinon pour centrer les row tu parles verticalement ou horizontalement ?

Les clear, j'ai pompé ça ailleurs... Je peux m'en passer.

Quand je parle de centrage, ici, c'est horizontalement.

C'est à rien y comprendre...
J'ai rajouté un </div> à la fin pour le ROW manquant, et j'ai viré les clear, mais du coup, c'est immonde...

(...)
<div class="bloc">
	<div class="row">
	<?php
    /** generate photo gallery **/
    $image_files = get_files($images_dir);
    if(count($image_files)) {
        $index = 0;
        foreach($image_files as $index=>$file) {
            $index++;
            $thumbnail_image = $thumbs_dir.$file;
            if(!file_exists($thumbnail_image)) {
                $extension = get_file_extension($thumbnail_image);
                if($extension) {
                    make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
                }
            }
            /** Recuperation donnneess SQL **/
            $file_global = substr($file, 0, -6);  // Supprimer numerotation photos
            $ident_file = substr($file, -5, -4);  // Numero de photo
            $result = mysqli_query($conn,"SELECT * FROM $table WHERE `Photos` LIKE '%$file_global%'");
                if($result->num_rows == 0) {
                    $description = "Aucune identification !";
                } else {
                    $row = mysqli_fetch_array($result);
                    $description = utf8_encode($row["Denomination"] . "&nbsp;" . $row["INV"] . "&nbsp;(" . $ident_file . ")&#10;" . $row["Description"]);
                }
            /** Fin de recuperation donnees MySQLi **/
            echo '<a class="photo-link" href="',$images_dir.$file,'"><img src="',$thumbnail_image,'" title="',$description,'" /></a>';
            if($index % $images_per_row == 0) { echo '</div><br /><div class="row">'; }
        }
    }
    else {
        echo '<p>Aucune image &agrave; afficher...</p>';
    }
    ?>
    </div>
</div>
(...)

Mmmmmh en fait j'ai du mal à comprendre ton code.
Tu veux faire une "row" par image ? Essaie plutôt de mettre ton row à l'intérieur de la boucle : pour chaque image hop tu echo une row avec ce qui va bien dedans.

Non, en fait, c'est un script qui scanne un dossier, et affiche x images par lignes, voir 1 par ligne via mobile.
En fonction du nom du fichier, il vérifie dans une base MySQL si ce nom est référencé dans la colonne "Photos", et si oui affiche la description.

Ha je crois que je viens de comprend l'utilité des row... c'est pour afficher un certaine nombre d'image par ligne.
C'est très rigide de faire les lignes comme ça. Si tu veu un minimum d'adaptation plus tard tu devra tout refaire.
A mon avis tu peux enlever cette ligne la :

if($index % $images_per_row == 0) { echo '</div><br /><div class="row">'; }

Au final tu aura un bloc avec dedans une row (que tu pourras centrer dans le bloc).
Dans cette row tu auras toutes les images sous la forme <a><img></a> les unes apres les autres.
Et si tu veux limiter le nombre d'image par ligne tu pourras le faire directement en CSS soit avec le flex, soit avec le inline-block en calculant la largeur théorique des images (a { width:25%; } si jamais tu en veux 4 par ligne, etc). Mais le flex fait ca super bien aussi
Modifié par _laurent (03 Jul 2017 - 15:24)

Oula... Ca change tout !

Je ne connaissais pas flex. J'ai corrigé quelques bugs, mais pas moyen de centrer ces foutues images...

Voila ou j'en suis :

(...)
<div class="bloc">
	<div class="titre"><h2>Collection de Santons</h2></div>
	<div class="content">
	<?php
    /** generate photo gallery **/
    $image_files = get_files($images_dir);
    if(count($image_files)) {
        $index = 0;
        foreach($image_files as $index=>$file) {
            $index++;
            $thumbnail_image = $thumbs_dir.$file;
            if(!file_exists($thumbnail_image)) {
                $extension = get_file_extension($thumbnail_image);
                if($extension) {
                    make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
                }
            }
            /** Recuperation donnneess SQL **/
            $file_global = substr($file, 0, -6);  // Supprimer numerotation photos
            $ident_file = substr($file, -5, -4);  // Numero de photo
            $result = mysqli_query($conn,"SELECT * FROM $table WHERE `Photos` LIKE '%$file_global%'");
                if($result->num_rows == 0) {
                    $description = "Aucune identification !";
                } else {
                    $row = mysqli_fetch_array($result);
                    $description = utf8_encode($row["Denomination"] . "&nbsp;" . $row["INV"] . "&nbsp;(" . $ident_file . ")&#10;" . $row["Description"]);
                }
            /** Fin de recuperation donnees MySQLi **/
            echo '<a class="photo-link" href="',$images_dir.$file,'"><img src="',$thumbnail_image,'" title="',$description,'" />image</a>';
        }
    }
    else {
        echo '<p>Aucune image &agrave; afficher...</p>';
    }
    ?>
    </div>
</div>
(...)

(...)
.bloc {
	width: 100%;
	height: auto;
	margin: 40px auto; /* Centraliser le container sur la page */
	text-align: center;
	background:red;
}

.titre {
	width: 90%;
	height: auto;
	margin: 0px auto; /* Centraliser la ligne sur le container */
	vertical-align: middle;
	text-align: center;
	background:yellow;
}

.content {
	width: 90%;
	height: auto;
	margin: 0px auto; /* Centraliser la ligne sur le container */
	flex-wrap: wrap;
	justify-content: center;
	vertical-align: middle;
	display: inline-block;
	text-align: center;
	background:blue;
}

img {
	width: auto;
	height: 200px;
}
(...)

Hop normalement si je me trompe pas tu dois avec un HTML qui ressemble à ça une fois executé. Voila un petit test : https://jsfiddle.net/cv0zoa7L/3/
Ca correspond à ce que tu attend ?
J'ai mims une largeur en px aux image ce qui permet d'avori un comportement souple au resize de l'écran (si tu retaille la fenêtre tu verra les images passer à la ligne toutes seules)

Au passage au lieu de mettre :
<div class="titre"><h2>Collection de Santons</h2></div>
tu peux directement mettre
<h2 class="titre">Collection de Santons</h2>

Alors, je viens de mélanger avec mes recherches parallèles :

La page est ici : http://saint-antonin.net/Collections/Santons.php

(...)
<div class="bloc">
	<h2 class="titre">Collection de Santons</h2>
	<div class="content">
	<?php
    /** generate photo gallery **/
    $image_files = get_files($images_dir);
    if(count($image_files)) {
        $index = 0;
        foreach($image_files as $index=>$file) {
            $index++;
            $thumbnail_image = $thumbs_dir.$file;
            if(!file_exists($thumbnail_image)) {
                $extension = get_file_extension($thumbnail_image);
                if($extension) {
                    make_thumb($images_dir.$file,$thumbnail_image,$thumbs_width);
                }
            }
            /** Recuperation donnneess SQL **/
            $file_global = substr($file, 0, -6);  // Supprimer numerotation photos
            $ident_file = substr($file, -5, -4);  // Numero de photo
            $result = mysqli_query($conn,"SELECT * FROM $table WHERE `Photos` LIKE '%$file_global%'");
                if($result->num_rows == 0) {
                    $description = "Aucune identification !";
                } else {
                    $row = mysqli_fetch_array($result);
                    $description = utf8_encode($row["Denomination"] . "&nbsp;" . $row["INV"] . "&nbsp;(" . $ident_file . ")&#10;" . $row["Description"]);
					$titre = utf8_encode($row["INV"] . "&nbsp;(" . $ident_file . ")");
                }
            /** Fin de recuperation donnees MySQLi **/
            echo '<a class="photo-link" href="',$images_dir.$file,'"><img src="',$thumbnail_image,'" title="',$description,'" /><span><font size="-1">'. $titre .'</font></span></a>';
        }
    }
    else {
        echo '<p>Aucune image &agrave; afficher...</p>';
    }
    ?>
    </div>
</div>
(...)

(...)
.bloc {
	width: 100%;
	height: auto;
	margin: 40px auto; /* Centraliser le container sur la page */
	text-align: center;
}

.titre {
	width: 90%;
	height: auto;
	margin: 15px auto; /* Centraliser la ligne sur le container */
	vertical-align: middle;
	text-align: center;
}

.content {
	width: 90%;
	margin: 0px auto; /* Centraliser la ligne sur le container */
	vertical-align: middle;
	text-align: center;
}

.content a {
    display: inline-block;
    vertical-align: top; /* Adjust if multi-line text */
    color: #333;
    text-align: center;
    text-decoration: none;
}

.content img {
	display: inline-block;
	width: auto;
	height: 200px;
}

.content a span {
    display: block;
	margin: 5px 0px;
}

.photo-link	{
	padding: 5px;
	margin: 5px;
	border: 1px solid #000;
	display: block;
	float: left;
}

.photo-link:hover {
	border-color: #F00;
}
(...)

Mais toujours pas de centrage...

YES !!!
C'était lui... MERCI

J'avoue ne pas avoir fait gaffe, je l'ai aspiré avec un bout de code...

Nickel, maintenant c'est centré et du coup responsive...

Sauf que, je ne sais pas pkoi, il sort les images dans un ordre chelou (2 /3 /1 ...)

Bien, j'ai trouvé pour ce pb aussi...

(...)
/* function:  returns files from dir */
function get_files($images_dir,$exts = array('jpg')) {
	$files = array();
	if($handle = opendir($images_dir)) {
		while(false !== ($file = readdir($handle))) {
			$extension = strtolower(get_file_extension($file));
			if($extension && in_array($extension,$exts)) {
				$files[] = $file;
			}
		}
		closedir($handle);
	}
	sort($files); // Tri des fichiers //
	return $files;
}
(...)

Merci à tous.
Je marque comme résolu.