colonne de news en modulo et en responsive

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

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, 18h49

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, 20h28

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, 22h32

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, 14h59

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, 15h22

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

colonne de news en modulo et en responsive

Responsive design en CSS

Vue hybride

Partager

Partager