[RESOLU] Problème d'alignement de grille pour une catégorie

patch_workspatch_works Member
août 2022 modifié dans Entraide

Bonjour,
J'ai un problème d'alignement dans une grille "third" (framework w3.css) liée à une catégorie: un article (la "carte" décrivant une personne) se retrouve seul en troisième ligne... (https://mfcrealfrasnes.be/index.php?categorie3/staff)
Ce n'est pas forcément lié à PluXML, mais peut-être ais-je manqué quelque chose?
Merci d'avance pour vos avis!

<main class="w3-container w3-center">
        <div class="w3-rest"><h1 class="w3-left"><?php $plxShow->catName() ?></h1></div>
        <div class="w3-rest"><?php $plxShow->catThumbnail('<a href="#img_url">
        <img class="w3-image" src="#img_thumb_url" alt="#img_alt" /></a>', true); ?></div>
        <div class="w3-rest"><?php $plxShow->catDescription('#cat_description'); ?></div>
        <div class="w3-rest">
            <?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
                <article class="w3-third w3-padding-small" id="post-<?php echo $plxShow->artId();
?>">                                
                    <div><?php $plxShow->artThumbnail('<a href="#img_url"><img src="#img_thumb_url" alt="#img_alt" /></a>', true,true); ?></div>
                    <h2><?php $plxShow->artTitle('link'); ?></h2>
                    <div><?php $plxShow->artChapo('',true) ?></div>
                </article>
            <?php endwhile; ?>
        </div>
    </main>
Mots clés:

Réponses

  • kowalskykowalsky Member
    août 2022 modifié

    Salut @patch_works ,

    A l'analyse, on constate un débordement des blocs sur plusieurs niveaux dans ton site. Cela vient du thème que tu utilises : si tu modifies la largeur de la fenêtre, les articles se décalent. En fait, si tu regardes bien en détail, la hauteur de chaque article n'est pas constante : tu as l'impression qu'ils sont alignés horizontalement et verticalement mais ce n'est pas le cas. Sur la première ligne, le nom de la personne "Eric" est légèrement plus haut que celui des 2 précédentes. Sur la deuxième ligne, le bas de l'article pour "Frédéric" est plus bas que le début de celui pour "Kassandra", l'article suivant ne pouvant s'insérer dans la continuité, il passe à la ligne suivante. D'où le décalage.

    Pour constater ce décalage, rajoute temporairement à la dernière ligne de theme.css, le code suivant :
    article {background-color: yellow;}

    Une solution rapide à ton problème sera de donner une hauteur minimale aux articles. Dans theme.css, rajoute à la dernière ligne le code suivant :
    article {min-height: 400px}

    Cela fonctionnera correctement sur cette page, mais il te faudra vérifier que cela ne casse rien sur les autres pages : par exemple, tu auras l'impression que les articles seront trop espacés sur les autres pages qui ont toutes le même souci d'alignement comme https://mfcrealfrasnes.be/index.php?categorie8/p3 simplement car il n'y a pas de texte associé :)

    A noter que la hauteur minimale de 400px est déterminée par l'addition des 3 hauteurs des sections composant ton article (div + h2 + div). Si tu ajoutes plus de texte dans le descriptif de la personne ou si tu augmentes la taille des photos, il faudra revoir cette valeur.

    Autre point, pour aligner les titres des articles, il te suffira de donner une hauteur fixe aux photos :) (ou de définir une hauteur minimale à chacune des 3 sections de tes articles, en leurs rajoutant une classe spécifique)

  • patch_workspatch_works Member
    août 2022 modifié

    Bonjour @kowalsky
    Merci pour ton analyse détaillée et les propositions.
    Pour une résolution rapide, j'ai créé une classe css pour chaque partie (image / nom / description) et ajouté cette classe dans le code du template spécifique à cet affichage (les équipes utilisent un autre fichier template).
    Je vais néanmoins demander que les phtotos soient normalisées, et autant que possible le texte de description (chapô) aussi.
    En tous les cas, c'est résolu, merci!
    PS: je ne voyais pas le fond jaune ajouté, j'ai du empêcher la page de s'afficher dans un tab facebook...

    <article class="w3-third w3-padding-small" id="post-<?php echo $plxShow->artId(); ?>">
<div class="staff-pic"><?php $plxShow->artThumbnail('<a href="#img_url"><img src="#img_thumb_url" alt="#img_alt" class="img-align-bottom"/></a>', true,true); ?></div>
<h2 class="staff-name"><?php $plxShow->artTitle('link'); ?></h2>
<div class="staff-desc"><?php $plxShow->artChapo('',true) ?></div>
</article>


.staff-pic {min-height: 160px;}
.staff-name {min-height: 20px;}
.staff-desc {min-height: 250px;}
Connectez-vous ou Inscrivez-vous pour répondre.