colonne de news en modulo et en responsive

**cedrus** · 20/04/2018, 16h12

Bonjour,
Mon ancien site possède des colonnes de news en modulo afin que chaque colonne s'adapte à la taille de l'image. Actuellement le site est de largeur fixe et avec 3 colonnes. Mais je refais mon site pour le rendre responsive et j'ai besoin que le nombre de colonnes varie en fonction de la largeur du site suivant les supports. Je ne suis pas assez calé pour savoir comment faire et adapter le code. Quelqu'un peut m'aider à refaire le code ? merci d'avance

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
// AFF ACTUALITES : GROSSES ACTU
	$requete_video = "SELECT * from news order by date desc, heure desc limit 0,27";
	$resultat_video = send_sql($requete_video);
 
	// on distribue les résultats en 3 array : $col[0], $col[1] et $col[2]
	// -> grâce au MODULO (x%y = reste de la division de x par y)
	// ICI : ($index%3) renvoie alternativement : 0, 1 ou 2
	$index = 0;
	while($row = mysql_fetch_assoc($resultat_video)) {
		$col[$index%5][] = $row;
		$index++;
	}
 
	// affichage sur 3 colonnes
	for ($i=0; $i<5; $i++)
	{
?>
		<div class="news3colonnes" style="border-top:0px;position:relative;">
<?php
		$list_video	= array(); // on vide (en créant un array vierge)
 
		foreach($col[$i] as $list_video)
		{
 
			$requete_photo="SELECT fichier from news_photos as vp, photos as p where p.photo_id=vp.photo_id and vp.new_id='".$list_video['new_id']."'";
			$resultat_photo=send_sql($requete_photo);
			$list_photo=mysql_fetch_assoc($resultat_photo);
 
			$requete_topic="SELECT count(topic_id) as cpt_commentaire from phpbb_posts where topic_id='".$list_video['topic_id']."'";
			$resultat_topic=send_sql($requete_topic);
			$list_topic=mysql_fetch_assoc($resultat_topic);
 
			$size = resize_image_force($CONF_URL_SERV.'/images/'.str_replace('.jpg', '-thb.jpg', $list_photo['fichier']), 135, 76);
?>
			<div class="slider_div3">
 
				<div class="project_img3" style="overflow:hidden;">
					<center>
						<a class="lien_no" href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
							<img class="project_img3" src="<?php echo $CONF_URL_SERV.'images/'.str_replace('.jpg', '-thb.jpg', $list_photo['fichier']); ?>" alt="<?php echo $list_video['titre']; ?>" width="<?php echo $size['width']; ?>" height="<?php echo $size['height']; ?>" />
						</a>
					</center>
				</div>
                <h3>
				<a  href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo $list_video['titre']; ?>
				</a>
                </h3>
 
				<div class="relative gris_clair size11" style="top:0px;width:296px;padding:5px 10px;">
					<?php echo POSTED; ?><?php echo date_jjmmaaaa(convert_datetime($list_video['date']." ".$list_video['heure'])); ?> - <?php echo date_hhmmss(convert_datetime($list_video['date']." ".$list_video['heure'])); ?>
					-
					<a class="lien_deja_u gris_clair" style="font-size:11px;" href="<?php echo $CONF_URL_SERV."forum/".clean_url($list_video['titre'])."-t".$list_video['topic_id'].".html"; ?>" title="<?php echo $list['titre_fr']; ?>">
						<?php echo READCOM; ?> (<?php echo ($list_topic['cpt_commentaire']-1); ?>)
					</a>
				</div>
                <div class="relative" style="top:0px;width:296px;padding:5px 10px;">
				<a href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo resize_txt(strip_tags($list_video['texte']), 240, 'oui'); ?>
				</a>
				&nbsp;&nbsp;
				<a class="lien_no gris_clair size11" href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo READALL; ?>
				</a>
                </div>
 
					<?php // DEBUT SOCIAL BOUTONS?>
					<div class="relative" style="height:20px;padding:10px;">
 
					<div class="absolute" style="width:200px;margin:0px;float:left;">
					    <iframe scrolling="no" frameborder="0" style="width:200px;height:22px;background:none;" id="facebook-like-inner" src="http://www.facebook.com/plugins/like.php?href=<?php echo link_actu($list_video['new_id']); ?>&amp;layout=button_count&amp;show-faces=false&amp;share=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;locale=fr_FR"></iframe>		
					</div>
										<div class="relative" style="float:right;margin:4px 0;">
										<span class="relative black" >
											<?php echo READ; ?><span class="bold size12"><?php echo $list_video['vu']; ?></span><?php echo READT; ?>
										</span>
										<td><img src="<?php echo $CONF_URL_IMAGE."global/pictonews-".$list_video['categorie_id'].".gif"; ?>" width="22" height="16" /></td>
											</div>
 
				 </div>
                 <?php // FIN SOCIAL BOUTONS?>
 
			</div>
 
        <?php
		} // fin foreach
        ?>
		</div>
<?php
	} // fin for
?>
<?php // FIN AFF ACTUALITES 1?>

**Celira** · 20/04/2018, 17h49

Si tu veux que ton nombre de colonnes dépende de la largeur de la fenêtre, tu ne vas pas pouvoir le faire en PHP. La largeur de la fenêtre est définie par le navigateur, donc côté client, donc après l'exécution du PHP. La seule façon de le faire par PHP serait de faire un rechargement (direct ou par AJAX) à chaque fois que l'utlisateur redimensionne sa fenêtre, et je doute que ce soit ton objectif.

Tu devrais plutôt t'intéresser à des solutions en CSS et Javascript prévues pour faire du Responsive design, faire une maquette statique valide et ensuite seulement chercher comment alimenter ta page HTML avec ton script PHP.

Bootstrap est pour moi une bonne solution à ce genre de problèmes : https://getbootstrap.com/

Bon courage !

**psychadelic** · 20/04/2018, 19h28

Mots clés sur un moteur de recherche == Responsive Masonry ==

l'origine = https://masonry.desandro.com/layout.html

Mais depuis d'autres y sont allé de leur "solutions" et on en retrouve en css pur d'autre utilisant des flexbox, et bien sur d'autres avec du javascrit, qui peut être peuvent proposer une extension pour Bootstrap ( qui de base ne propose pas cette fonctionnalité=

**cedrus** · 20/04/2018, 21h32

Je comprends mieux merci. Je vais regarder en détail vos solutions demain qui semblent être une alternative à explorer. Merci pour les conseils

**cedrus** · 22/04/2018, 13h59

J'ai donc utilisé Masonry qui est efficace, j'ai suivi leur tuto et j obtiens le bon résultat. Cependant j ai deux problèmes. 1 Il y a une espace important entre les colonnes que je n arrive pas à supprimer, ça ne vient pas d'un margin de mes items. 2 Il y a du coup que 2 colonnes qui s affichent et qui passe à 2 et 1 au lieu de 5, 4, 3... car la largeur de la page peut accueillir aussi 5 et 4 colonnes. J'ai essayé toutes les possibilités des options du masonry pour rentrer manuellement un nombre de colonnes, ou des dimensions de colonnes et ça ne change rien... Je veux que ma largeur de colonne reste de 318px. Quelqu'un pour m'aider ?

Le CSS:

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
.grid-item {
    display: block;
	max-width:318px;
	float:left;
    margin: 15px 5px 0px 11px;
    opacity: 1;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
    border: 1px solid rgb(213, 218, 226);
    background-color: #fff
}
 
.grid-item:hover {
    opacity: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    display: block;
 
}
 
.grid-item h3 a {
    font-family: TitilliumWeb-Bold;
    font-size: 24px;
    color: #0076ca;
    line-height: 24px;
    width: 296px;
    font-weight: normal;
    margin: -3px 0 0 0
}
 
.grid-item h3 a:hover {
    color: #3d3d3d;
    cursor: pointer;
    font-family: TitilliumWeb-Bold;
    font-size: 24px;
    line-height: 24px;
    width: 296px;
    font-weight: normal;
    margin: -3px 0 0 0;
    text-decoration: none
}
 
.grid-item h3 {
    font-family: TitilliumWeb-Bold;
    font-size: 24px;
    color: #0076ca;
    line-height: 24px;
    width: 296px;
    font-weight: normal;
    margin: -3px 0 0 0;
    padding: 10px
}
 
.grid-item h3:hover {
    color: #3d3d3d;
    cursor: pointer
}
 
.grid-item a {
    color: #3e4744;
    font-family: TitilliumWeb-Light;
    line-height: 18px;
    font-size: 14px
}
 
.grid-item a:hover {
    color: #3e4744;
    font-family: TitilliumWeb-Light;
    line-height: 18px;
    font-size: 14px
}
 
.grid-item p {
    font-family: Arial;
    font-size: 13px;
    color: #3e4744;
    margin: 0px 5px 0px 12px
}
 
.grid-item p a {
    color: #3e4744
}
 
.grid-item p a:hover {
    color: #3e4744
}

le php sur la page

Code php :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<?php // CONTENEUR TEST?>
	<div class="relative" style="margin:auto;clear:both;">		
 
<script type="text/javascript" src="<?php echo $CONF_URL_JS; ?>masonry.pkgd.js"></script>
 
 
 
 
	<div class="relative">
<div class="grid js-masonry"
  data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 318 }'>
 
 
			<?php
			$requete_video = "SELECT * from news order by date desc, heure desc limit 0,27";
			$resultat_video = send_sql($requete_video);
			 while($list_video = mysql_fetch_assoc($resultat_video)) {
 
 
			$requete_photo="SELECT fichier from news_photos as vp, photos as p where p.photo_id=vp.photo_id and vp.new_id='".$list_video['new_id']."'";
			$resultat_photo=send_sql($requete_photo);
			$list_photo=mysql_fetch_assoc($resultat_photo);
 
			$requete_topic="SELECT count(topic_id) as cpt_commentaire from phpbb_posts where topic_id='".$list_video['topic_id']."'";
			$resultat_topic=send_sql($requete_topic);
			$list_topic=mysql_fetch_assoc($resultat_topic);
 
			$size = resize_image_force($CONF_URL_SERV.'/images/'.str_replace('.jpg', '-thb.jpg', $list_photo['fichier']), 135, 76);
            ?>	
 
 
			<div class="grid-item">
 
				<div class="project_img3" style="overflow:hidden;">
					<center>
						<a class="lien_no" href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
							<img class="project_img3" src="<?php echo $CONF_URL_SERV.'images/'.str_replace('.jpg', '-thb.jpg', $list_photo['fichier']); ?>" alt="<?php echo $list_video['titre']; ?>" width="<?php echo $size['width']; ?>" height="<?php echo $size['height']; ?>" />
						</a>
					</center>
				</div>
                <h3>
				<a  href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo $list_video['titre']; ?>
				</a>
                </h3>
 
				<div class="relative gris_clair size11" style="top:0px;width:296px;padding:5px 10px;">
					<?php echo POSTED; ?><?php echo date_jjmmaaaa(convert_datetime($list_video['date']." ".$list_video['heure'])); ?> - <?php echo date_hhmmss(convert_datetime($list_video['date']." ".$list_video['heure'])); ?>
					-
					<a class="lien_deja_u gris_clair" style="font-size:11px;" href="<?php echo $CONF_URL_SERV."forum/".clean_url($list_video['titre'])."-t".$list_video['topic_id'].".html"; ?>" title="<?php echo $list['titre_fr']; ?>">
						<?php echo READCOM; ?> (<?php echo ($list_topic['cpt_commentaire']-1); ?>)
					</a>
				</div>
                <div class="relative" style="top:0px;width:296px;padding:5px 10px;">
				<a href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo resize_txt(strip_tags($list_video['texte']), 240, 'oui'); ?>
				</a>
				&nbsp;&nbsp;
				<a class="lien_no gris_clair size11" href="<?php echo link_actu($list_video['new_id']); ?>" title="<?php echo $list_video['titre']; ?>">
					<?php echo READALL; ?>
				</a>
                </div>
 
					<?php // DEBUT SOCIAL BOUTONS?>
					<div class="relative" style="height:20px;padding:10px;">
 
					<div class="absolute" style="width:200px;margin:0px;float:left;">
					    <iframe scrolling="no" frameborder="0" style="width:200px;height:22px;background:none;" id="facebook-like-inner" src="http://www.facebook.com/plugins/like.php?href=<?php echo link_actu($list_video['new_id']); ?>&amp;layout=button_count&amp;show-faces=false&amp;share=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;locale=fr_FR"></iframe>		
					</div>
										<div class="relative" style="float:right;margin:4px 0;">
										<span class="relative black" >
											<?php echo READ; ?><span class="bold size12"><?php echo $list_video['vu']; ?></span><?php echo READT; ?>
										</span>
										<td><img src="<?php echo $CONF_URL_IMAGE."global/pictonews-".$list_video['categorie_id'].".gif"; ?>" width="22" height="16" /></td>
											</div>
 
				 </div>
                 <?php // FIN SOCIAL BOUTONS?>
 
			</div>
 
								<?php
									$i++;
								}
								?>
 
		</div>
    </div>
 
 
 
 
 
	</div>
	<?php // FIN CONTENEUR TEST ?>

**psychadelic** · 22/04/2018, 14h22

faut regarder dans le debugger de ton navigateur, il te donnera forcément l'origine de cet espace.

**cedrus** · 22/04/2018, 14h32

Je ne vois rien justement dans l'inspecteur des navigateurs comme élément qui peut pousser les colonnes comme ça.

Quand j'applique le même code dans codepen le résultat est pourtant parfait comme le montre l'image
Nom : Masonry gutter(1).png
Affichages : 119
Taille : 67,6 Ko

Nom : Masonry gutter(1).png
Affichages : 119
Taille : 67,6 Ko

**psychadelic** · 22/04/2018, 16h24

ben je sais pas comment tu t'y prends mais c'est pas bon,

les positions relatives sont délirantes horizontalement, et elles se chevauchent verticalement aussi...

peut-être devrait tu utiliser un autre Masonry = > https://github.com/search?l=JavaScri...e=Repositories

il y en a aussi en Typescript si tu prefere (27)

Mais ton code est délirant aussi, tu a placé le script de Masonry au milieu du body,
mais pire j'ai dénombré au moins 3 include de librairie jQuery

et tout ça se balade en haut, au millieu et à la fin de ta page..

tu utilise jquery 1.42 alors qu'on en est à la version 3

et j'ai aussi vu dans la doc de Masonry qu'il pouvait y avoir un conflit avec jQuery-UI (que tu utilise) et ils donnent la manière d’opérer dans ce cas la.

Invité · 22/04/2018, 16h41

Bonjour,

1- Pour .grid-item, SUPPRIME :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    display: block;
    max-width: 318px;
    float: left;
    margin: 15px 5px 0px 11px;

il faut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0; padding:0;

Ne me demande pas pourquoi...

2- Ce qui est gênant aussi... :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!DOCTYPE html>
<html class="no-js">
 
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
		<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

Passe tes pages au validateur W3C : https://validator.w3.org/

**cedrus** · 22/04/2018, 17h26

Envoyé par psychadelic

Mais ton code est délirant aussi, tu a placé le script de Masonry au milieu du body,
mais pire j'ai dénombré au moins 3 include de librairie jQuery

et tout ça se balade en haut, au millieu et à la fin de ta page..

Et oui ma dernière version du site date de 2012, je suis en train de tout refaire justement, les codes se chevauchent c est pas encore structuré proprement car je fais beaucoup d'essai

Je vais suivre vos recommandations sans tarder, merci

**cedrus** · 22/04/2018, 18h04

Envoyé par jreaux62

Bonjour,

1- Pour .grid-item, SUPPRIME :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    display: block;
    max-width: 318px;
    float: left;
    margin: 15px 5px 0px 11px;

il faut :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin:0; padding:0;

Ne me demande pas pourquoi...

Je suis bluffé, c est parfait maintenant. J'ai ajouté en plus

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.grid {
  background: #EEE;
  margin: 0 auto;

pour centrer la "grid" dans la page, un "gutter: 10" pour séparer les blocs entre eux et le résultat est impeccable ! Merci pour votre aide. Je clôture le post

colonne de news en modulo et en responsive

Responsive design en CSS

Partager

Partager