Signaler

Masonry [Résolu]

Posez votre question Sinistrus 842Messages postés mercredi 12 décembre 2007Date d'inscription 16 octobre 2017 Dernière intervention - Dernière réponse le 16 juin 2017 à 17:28 par Sinistrus
Bonjour à tous !

Je rencontre un petit soucis avec le Masonry.
En fait il est un peu décalé comme sur cette image :
https://img4.hostingpics.net/pics/806874mansoryfw.png

Voici mon CSS :
img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;-moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial; z-index:999999999;}
.masonry .brick {margin-bottom: 10px; display:block; overflow:hidden;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.masonry .brick:hover img {opacity: .75;}
.masonry.bordered {-moz-column-rule: 1px solid #eee;-webkit-column-rule: 1px solid #eee;column-rule: 1px solid #eee;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;}
.masonry.bordered .brick {padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #eee;}
.masonry.gutterless {-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;}
.masonry.gutterless .brick {margin-bottom: 0;}

@media only screen and (min-width: 1024px) {
.masonry {-moz-column-count: 5;-webkit-column-count: 5;column-count: 5;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
}


Et voici d'où j'ai tiré mon code : http://w3bits.com/labs/css-masonry/

Avez-vous une idée pour corriger cela ?

Merci d'avance

Utile
+1
plus moins
Il faut déplacer le style déclaré sur le div dans brick directement sur la balise image et ajouter un box-sizing pour ne pas couper l'image :

<div class="masonry">

<div class="brick">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

<div class="brick">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>

</div>


img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;-moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial; z-index:999999999;}
.masonry .brick {margin-bottom: 10px; display:block; overflow:hidden;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out; 
/* ajout*/
background:#EFEFEF; border:1px solid #A7A7A7; padding: 10px; box-sizing: border-box; }
.masonry .brick:hover img {opacity: .75;}
.masonry.bordered {-moz-column-rule: 1px solid #eee;-webkit-column-rule: 1px solid #eee;column-rule: 1px solid #eee;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px;}
.masonry.bordered .brick {padding-bottom: 10px;margin-bottom: 10px;border-bottom: 1px solid #eee;}
.masonry.gutterless {-moz-column-gap: 0;-webkit-column-gap: 0;column-gap: 0;}
.masonry.gutterless .brick {margin-bottom: 0;}

@media only screen and (min-width: 1024px) {
.masonry {-moz-column-count: 5;-webkit-column-count: 5;column-count: 5;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.masonry {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
}


Bonne journée,
Cette réponse vous a-t-elle aidé ?  
Donnez votre avis
Utile
+0
plus moins
je crois que le problème vient de Chrome...
Donnez votre avis
Utile
+0
plus moins
Salut,

Peux t-on voir le code html correspondant ?

Bonne journée,
Sinistrus 842Messages postés mercredi 12 décembre 2007Date d'inscription 16 octobre 2017 Dernière intervention - 15 juin 2017 à 16:22
Oui bien sur, le voilà :
<div class="masonry">

<div class="brick">
<div style="background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
</div>

<div class="brick">
<div style="background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;">
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
</div>

</div>
Répondre
Donnez votre avis
Utile
+0
plus moins
Merci Pitet,

Il y a une nette amélioration en effet. Mais lorsque je met 6 colonnes au lieu de 5, il fait pareil problème.... et sur mobile aussi, 2 colonnes il fait pareil...

<style>
.masonry img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px; -moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial;}
.masonry .brick {margin-bottom: 10px;background:#EFEFEF; border:1px solid #A7A7A7; padding:10px;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;box-sizing: border-box;}
.masonry .brick:hover img {opacity: .75;}

@media (min-width:300px) {.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2;}}
@media (min-width:480px) {.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3;}}
@media (min-width:600px) {.masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media (min-width:801px) {.masonry{-moz-column-count:5;-webkit-column-count:5;column-count:5;}}
@media (min-width:1025px){.masonry{-moz-column-count:6;-webkit-column-count:6;column-count:6;}}
</style>

<div class="masonry">
<?php $Stat = $pdo->query("SELECT * FROM tb_fr_produits ORDER BY Code ASC"); while($data = $Stat->fetch(PDO::FETCH_ASSOC)){ ?>
<div class="brick">
<img src="images/produits/<?php echo $data["Code"]; ?>.png">
<div align="center" style="padding-top:10px;"><?php echo $data["Code"]; ?><br><?php echo $data["Libelle"]; ?><br><?php echo $data["Contenance"]; ?></div>
</div>
<?php } ?>
</div>


A l'exception du fichier include("config.php"), tout mon code y est.
Pitet 2317Messages postés lundi 11 février 2013Date d'inscription 19 octobre 2017 Dernière intervention - 16 juin 2017 à 16:45
N'ayant pas accès à ta bdd je ne peux pas tester la requête et voir le résultat html.

Peux tu stp copier seulement le code html généré par ton php (en passant par exemple par "Voir le code source de la page" de ton navigateur) ?
Répondre
Sinistrus 842Messages postés mercredi 12 décembre 2007Date d'inscription 16 octobre 2017 Dernière intervention - 16 juin 2017 à 16:53
Ça sera top "gros" :D
Je t'ai envoyé le lien de ma page en privé si ça ne te dérange pas de la voir :$
Répondre
Pitet 2317Messages postés lundi 11 février 2013Date d'inscription 19 octobre 2017 Dernière intervention - 16 juin 2017 à 17:17
Ton problème devrait être résolu en ajoutant la propriété css break-inside: avoid; sur la classe .brick
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside
Répondre
Donnez votre avis
Utile
+0
plus moins
Je ne connaissais vraiment pas break-inside !
En tout cas merci de ton aide Pitet ! Tout fonctionne parfaitement bien maintenant !

Voici le code final :
.masonry img {max-width: 100%;vertical-align: bottom;}
.masonry {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;-moz-column-gap: 10px;-webkit-column-gap: 10px;column-gap: 10px; -moz-column-fill: initial;-webkit-column-fill: initial;column-fill: initial;}
.masonry .brick {margin-bottom: 10px;background:#EFEFEF; border:1px solid #A7A7A7; padding:10px; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;}
.masonry .brick img {-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;box-sizing: border-box;}
.masonry .brick:hover img {opacity: .75;}

@media (min-width:300px) {.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2;}}
@media (min-width:480px) {.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3;}}
@media (min-width:600px) {.masonry{-moz-column-count:4;-webkit-column-count:4;column-count:4;}}
@media (min-width:801px) {.masonry{-moz-column-count:5;-webkit-column-count:5;column-count:5;}}
@media (min-width:1025px){.masonry{-moz-column-count:6;-webkit-column-count:6;column-count:6;}}


<div class="masonry">
<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>

<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>

<div class="brick"><img src="images/produits/image.png"><div align="center" style="padding-top:10px;">description</div></div>
</div>
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !