Partage

problème de grid et d'affichage

filtre MixItUP

Sujet résolu

5 juin 2018 à 7:47:46

Bonjour,

je souhaite exploiter le filtre MixItUP dont la demo se trouve ici > https://www.creativejuiz.fr/blog/doc/mixitup/

or en reprenant basiquement le code mon affichage me donne, un affichage empilé > http://montiertech.fr/magasin_depot_montier_tech_1.php

ci dessous le html : simplifié sans include mais je ne vois pas quoi faire pour récupérer un affichage responsive de 3 colonnes (col-sm-4) ? avec goutière.

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8">
	<title>MixItUp - Démo</title>

	<style type="text/css">
		body, html {margin: 0; padding:0 }
		body { 
			max-width: 728px;
			margin: 25px auto 0;
			font-size: 14px;
			font-family: "Open Sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
			color: #666;
			overflow-y: scroll;
		}
		h1 { 
			float: left; 
			width: 300px;
			margin-top: 0;
		}
		h1, h2 { font-weight: normal; }

		p.intro {
			margin: 0;
			text-align: right;
		}

		a { color: #1591e0 }

		.filters {
			display: table;
			width: 100%;
			table-layout: fixed;
		}
		
		ul, li {
			margin: 0; padding: 0;
			list-style: none;
		}
		.col {
			display: table-cell;
			padding-right: 6px;
		}
		.col h2 {
			margin-bottom: 5px;
		}
		.col ul {
			overflow: hidden;
		}
		.col li {
			float: left;
			margin: 3px 3px 0 0;
		}
		.col li button {
			display: inline-block;
			padding: 3px 10px;
			background: #eee;
			border: 1px solid #ddd;
			cursor: pointer;
		}
		.col li button:focus {
			border: 1px dashed #1591E0;
			outline: 0 none;
		}
		.line { 
			clear: left;
		}
		.col li button.all {
			background: #ddd;
		}
		.col li button.active {
			color: #f2f2f2;
			border-color: #1591e0;
			background: #1591e0;
		}
		.js #grid li {
			opacity: 0;
			display: none;
		}
		.ad {
			margin-top: 4em;
			padding: 10px;
			height: 125px;
			text-align: center;
		}	
		.ad ins {
			margin: 0 1em;
		}
	</style>
</head>
<body>
	
	<h1>MixItUp Démo</h1>
	
	
	<h2>Contenu à filtrer</h2>

<ul id="grid">
		<li class="mix produits" data-alphabetic="Produits">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/produit_laffort_montier_tech_corse.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix produits" data-alphabetic="Produits">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/produits_piscine_montier_magasin.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix magasin" data-alphabetic="Magasin">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/piece_detachee_magasin_comptoir.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix magasin" data-alphabetic="Magasin">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/magasin_depot_montier_tech.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix tube" data-alphabetic="Tube">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/tuyau_irrigation_montier_magasin.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix tube" data-alphabetic="Tube">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/tube_pvc_magasin_montier_corse.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix cuve" data-alphabetic="Cuve">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/cuve_pvc_masin_depot_montier_prunelli.jpg" width="240" height="160" alt="">
		</li>
		<li class="mix cuve" data-alphabetic="Cuve">
			<img src="image/magasin_depot_montier_tech/700x350/TRI/01066971b0661bb973040779c3b2b049b824d20cff.jpg" width="240" height="160" alt="">
		</li>
	</ul>



	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>

	<script type="text/javascript">
	$(function(){

		$('body').addClass('js');


		$('h2:first').before('<div class="filters">'+
		'<div class="col">'+
			'<h2>Filtres</h2>'+

			'<ul>'+
				'<li><button type="button" class="filter" data-filter="tube">TUBE</button></li>'+
				'<li><button type="button" class="filter" data-filter="cuve">CUVE</button></li>'+
				'<li><button type="button" class="filter" data-filter="magasin">MAGASIN</button></li>'+
				'<li><button type="button" class="filter" data-filter="produits">PRODUITS</button></li>'+
				'<li><button type="button" class="filter all"  data-filter="mix">Toutes</button></li>'+
			'</ul>'+
		'</div>'+
	'</div>');


		$('#grid').mixitup({
			effects: ['fade','scale','rotateZ'],
		});
		/*
		$('#grid').mixitup({
			targetSelector: '.mix',
			filterSelector: '.filter',
			sortSelector: '.sort',
			buttonEvent: 'click',
			effects: ['fade','scale', 'rotateZ'],
			listEffects: null,
			easing: 'smooth',
			layoutMode: 'grid',
			targetDisplayGrid: 'inline-block',
			targetDisplayList: 'block',
			gridClass: '',
			listClass: '',
			transitionSpeed: 600,
			showOnLoad: 'all',
			multiFilter: 'false',
			filterLogic: 'or',
			resizeContainer: true,
			minHeight: 0,
			failClass: 'fail',
			perspectiveDistance: '3000',
			perspectiveOrigin: '50% 50%',
			animateGridList: true,
			onMixLoad: null,
			onMixStart: null,
			onMixEnd: null
		});
*/
	});
	</script>

</body>
</html>

merci de vos conseil ou démo ... je patauge .!

N.Parvedy

5 juin 2018 à 8:41:03

Dans l'id grid, tu mets en css : display:flex; et flex-wrap:wrap;

Voilà.

Le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Sinon la solution de la démo, c'est de modifier le display li par inline-block et non block.

Cours concernant inline, block, inline-block :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-modele-des-boites

-
Edité par N.Parvedy 5 juin 2018 à 8:53:05

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 9:38:33

tout d'abord merci de ton coup de main,

mais bon voilà la solution Dans l'id grid, tu mets en css : display:flex; et flex-wrap:wrap;

		.js #grid li {
			opacity: 0;
			display:flex;
			flex-wrap:wrap;
		}

ne fonctionne pas.

et "modifier le display li par inline-block et non block." que j'avais essayé déjà ne fonctionne pas non plus.

je ne vois pas le problème, tu verrais autre chose stp

N.Parvedy

5 juin 2018 à 9:46:52

C'est la bonne solution, juste enleve le .js et met juste :

#grid{
    display:flex;
    flex-wrap:wrap;
}

J'ai directement modifier ton code avec le système de débogage du navigateur, donc je sais que ça marche. ^^'

-
Edité par N.Parvedy 5 juin 2018 à 10:52:08

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 10:11:02

super, j'avance ... grâce à toi,

en fait il m'a fallu conserver la class et l'id initial car en le remplaçant je n'avait plus de filtre j'ai rajouté l'id que tu me proposais, ce qui donne:

		.js #grid li {
			opacity: 0;
			display: none;
		}
		#grid{
    	display:flex;
    	flex-wrap:wrap
		}

Juste un détail comme tu peux le constater, je perds les gouttières: http://montiertech.fr/magasin_depot_montier_tech_1.php

tu aurais un conseil stp

N.Parvedy

5 juin 2018 à 10:21:10

Les gouttières ?

Je vois pas où est le problème là, tu as bien tes 8 images qui s'affichent sans aucun soucie ? Il t'en manque un ?

Car si tu dois en avoir 9, je ne le vois même pas dans ton code, donc c'est normal qu'il n'y soit pas.

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 10:27:30

En fait quand je parle de gouttières (gutters), je parle des séparations verticales ... j' emploi ce termes sans doute à mauvais escient, mais bon en fait sit tu compares

https://www.creativejuiz.fr/blog/doc/mixitup/ et http://montiertech.fr/magasin_depot_montier_tech_1.php

tu constate que les visuel se retrouvent collés et je ne vois pas quoi faire pour trover le même effet ... merci !!!

N.Parvedy

5 juin 2018 à 10:41:30

Ah oui, du coup ça ce complexe un peu mais c'est assez simple, faut que tu modifies le max-width: 728px et tu passes à 735px.

Et que tu rajoutes du coup un margin-right:4px; dans li

li {
margin-right:4px;
}

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

Mcsnakes

5 juin 2018 à 10:42:08

Salut la solution est dans le cours sur le flex cité plus haut

#grid{
display:flex;
flex-wrap:wrap
justify-content: space-between;
}

avec cette ligne en plus les elements sur la même lignes s'espaceront de façon à être au bord à gauche pour le 1er, puis au centre pour le 2ème et pour finir à droite pour le dernier

ps : les 3 images sur la même ligne ne prennent pas 100% de ton ul donc ton écart va se crée naturellement

-
Edité par Mcsnakes 5 juin 2018 à 10:44:20

N.Parvedy

5 juin 2018 à 10:50:51

Rajoute le point virgule après flex-wrap:wrap

J'ai oublié de le rajouter, ça évitera les bugs.

-
Edité par N.Parvedy 5 juin 2018 à 10:51:46

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 11:10:11

OK super ! pile poil... merci N.Parvedy et Mcsnakes ...

j'ai opté pour la solution de N.Parvedy qui me restitue le rendu attendu :

. @Mcsnakes , j'ai testé ta solution, mais les visuels s'alignait sur tout la longueur ... je te remercie quoiqu'il en soit de ta réponse, je reviendrais creuser ton approche ... merci

N.Parvedy

5 juin 2018 à 11:56:40

J'ai regardé ta page, rajoute un margin-bottom:4px; pour que ça fasse plus joli dans li.

Mais attention ça modifie tous les li de ta page, faut que tu fasses en sorte que le sélecteur ne prend que l'élément que tu veux modifier.

Donc remplace :

li {
    margin-right: 4px;

par :

#grid li {
    margin-bottom: 4px;
    margin-right: 4px;
}

Ca devrait être bon.

-
Edité par N.Parvedy 5 juin 2018 à 12:00:29

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 12:00:29

Encore un dernier conseil presque rien..

avant d'externaliser mon css. Encore un petit soucis de séparations horizontales des visuels > http://montiertech.fr/magasin_depot_montier_tech_1.php

votre avis sur la question, histoire de faire tout ça tout propre ...

le code:

<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8">
	<title>Magasin - Dépôt - Siège Social</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Bootstrap Core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- Custom CSS -->
	<link href="css/modern-business.css" rel="stylesheet">
	<!-- Custom Fonts -->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<style type="text/css">

		
		a {
			color: #1591e0
		}
		
		.filters {
			display: table;
			width: 100%;
			table-layout: fixed;
		}
		
		ul,
		li {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		li {
			margin-right: 4px;
		}
		
		.col {
			display: table-cell;
			padding-right: 6px;
		}
		
		.col h2 {
			margin-bottom: 5px;
		}
		
		.col ul {
			overflow: hidden;
		}
		
		.col li {
			float: left;
			margin: 3px 3px 0 0;
		}
		
		.col li button {
			display: inline-block;
			padding: 3px 10px;
			background: #eee;
			border: 1px solid #ddd;
			cursor: pointer;
		}
		
		.col li button:focus {
			border: 1px dashed #1591E0;
			outline: 0 none;
		}
		
		.line {
			clear: left;
		}
		
		.col li button.all {
			background: #ddd;
		}
		
		.col li button.active {
			color: #f2f2f2;
			border-color: #1591e0;
			background: #1591e0;
		}
		
		.js #grid li {
			opacity: 0;
			display: none;
		}
		
		#grid {
			display: flex;
			flex-wrap: wrap;
		}
		
		.ad {
			margin-top: 4em;
			padding: 10px;
			height: 125px;
			text-align: center;
		}
		
		.ad ins {
			margin: 0 1em;
		}
	</style>
</head>

<body>
	<?php include_once("analyticstracking.php") ?>
	<!-- Navigation -->
	<?php include("menu.php"); ?>
	<?php include("RECHERCHE.php"); ?>

	<!-- Page Content -->


		<!-- Page Heading/Breadcrumbs -->

		<div class="container-fluid">

			<!-- Page Heading/Breadcrumbs -->
			<!-- Page Heading/Breadcrumbs -->

			<div class="row">
				<div class="col-lg-12">
					<h1 class="page-header">Dépôt | Magasin | Administration <small>Matériel, Outillage tout type</small></h1>
					<ol class="breadcrumb">
						<li><a href="index.php">Accueil</a> </li>
						<li class="active">Dépôt | Magasin</li>
						<li> <a href="javascript:history.go(-1)">Retour</a>
						</li>
					</ol>
				</div>
			</div>
			<h2>Contenu à filtrer</h2>
			<ul id="grid">
				<li class="mix produits" data-alphabetic="Produits">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/produit_laffort_montier_tech_corse.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix produits" data-alphabetic="Produits">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/produits_piscine_montier_magasin.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix magasin" data-alphabetic="Magasin">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/piece_detachee_magasin_comptoir.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix magasin" data-alphabetic="Magasin">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/magasin_depot_montier_tech.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix tube" data-alphabetic="Tube">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/tuyau_irrigation_montier_magasin.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix tube" data-alphabetic="Tube">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/tube_pvc_magasin_montier_corse.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix cuve" data-alphabetic="Cuve">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/cuve_pvc_masin_depot_montier_prunelli.jpg" width="240" height="160" alt="">
				</li>
				<li class="mix cuve" data-alphabetic="Cuve">
					<img src="image/magasin_depot_montier_tech/700x350/TRI/01066971b0661bb973040779c3b2b049b824d20cff.jpg" width="240" height="160" alt="">
				</li>
			</ul>
			<hr>
			<!-- Footer -->
			<?php include("footer.php"); ?>
		</div>
		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
		<script type="text/javascript">
			$( function () {
				$( 'body' ).addClass( 'js' );
				$( 'h2:first' ).before( '<div class="filters">' +
					'<div class="col">' +
					'<h2>Filtres</h2>' +
					'<ul>' +
					'<li><button type="button" class="filter" data-filter="tube">TUBE</button></li>' +
					'<li><button type="button" class="filter" data-filter="cuve">CUVE</button></li>' +
					'<li><button type="button" class="filter" data-filter="magasin">MAGASIN</button></li>' +
					'<li><button type="button" class="filter" data-filter="produits">PRODUITS</button></li>' +
					'<li><button type="button" class="filter all"  data-filter="mix">Toutes</button></li>' +
					'</ul>' +
					'</div>' +
					'</div>' );
				$( '#grid' ).mixitup( {
					effects: [ 'fade', 'scale', 'rotateZ' ],
				} );
				/*
		$('#grid').mixitup({
			targetSelector: '.mix',
			filterSelector: '.filter',
			sortSelector: '.sort',
			buttonEvent: 'click',
			effects: ['fade','scale', 'rotateZ'],
			listEffects: null,
			easing: 'smooth',
			layoutMode: 'grid',
			targetDisplayGrid: 'inline-block',
			targetDisplayList: 'block',
			gridClass: '',
			listClass: '',
			transitionSpeed: 600,
			showOnLoad: 'all',
			multiFilter: 'false',
			filterLogic: 'or',
			resizeContainer: true,
			minHeight: 0,
			failClass: 'fail',
			perspectiveDistance: '3000',
			perspectiveOrigin: '50% 50%',
			animateGridList: true,
			onMixLoad: null,
			onMixStart: null,
			onMixEnd: null
		});
*/
			} );
		</script>
		<!-- Bootstrap Core JavaScript -->
		<script src="js/bootstrap.min.js"></script>
</body>
</html>

N.Parvedy

5 juin 2018 à 12:02:09

Je viens juste d'y répondre un poil plus haut, j'ai anticipé. lol

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅

PMS_500

5 juin 2018 à 12:04:57

super ! je t'écrivais en simultané et bingo tu m'envoies la réponse ... au top ... merci beaucoup !!!

N.Parvedy

5 juin 2018 à 12:06:53

Un plaisir ! N'oublie pas de mettre le sujet en résolu !

-
Edité par N.Parvedy 5 juin 2018 à 12:16:41

Plus je fais d'erreurs, plus j'apprends ! Bon, faut quand même faire attention à ce que l'erreur ne soit pas trop grosse ! 😅