[Résolu] Bloc de taille égales: liste ou table?

Saludos amigos ,

Il y a une question que je me pose fréquemment, c'est pour faire ce type de présentation : http://www.kickstarter.com/projects/by/recommended?category=Technology (chouette site), cela peux se faire avec des liste et l'utilisation de float left ou bien avec des tableaux.

Pour que les éléments se dispose convenablement, il faut que les éléments de la liste aient une hauteur fixe, ce qui est souvent un problème.

Au contraire les tableaux on cette formidable propriété qui est que les cellules s'agrandisse en fonction de la taille de la cellule voisine.

Dans le cas de kickstarter ils ont fait le choix la hauteur fixe, dans mon cas je fais en général le choix des tableaux justement pour ne pas restreindre la taille des blocs. Que faites vous dans ce cas là?
Modifié par matmat (28 May 2010 - 01:14)

bonjour/bonsoir

Pour le fun il m'est arrivé via une class d'appliquer un float et une largeur pour les style et un min-height pour le conteneur principal (div , li , p , etc... selon ) , puis coté serveur injecter une ID : id1 , id2 , ... a chacun d'entre eux.

Enfin , le choix du script serveur ou js pour appliquer un clear tout les x idx.

en js , aprés chargement , recuperer les hauteurs de chaque élément et réinjecter la plus grande valeur trouvée a l'ensemble de ces éléments pour uniformisé leurs hauteurs .

Autre solution , determiné une hauteur fixe et tronqué les textes sans se soucier de devoir appliquer un clear .

display : table + table-cell , necessite aussi de compter les elements pour passer de ligne en ligne , le process equivaut a generer un tableau avec des divs(ou autres balises ... ) .

en final , une hauteur fixe en em si c'est applicable et float (inline-block si l'on laisse tomber IE7), ou un tableau de présentation (qui peut aussi prendre de la largeur ) .

... j'espere t'aider a faire un choix ..

GC

gc-nomade a écrit :
... j'espere t'aider a faire un choix ..

A vrai dire je suis toujours aussi indécis!

gc-nomade a écrit :
Enfin , le choix du script serveur ou js pour appliquer un clear tout les x idx.

Effectivement cette solution marche bien, j'ai même une petite fonction pour ça :

function clear($step,$it,$r='')
{
    if($step && $it){
        $num = $it - $step; 
        if(is_int($num/$step)){
            if($r) return $r;
            else return '<div style="clear:left"> </div>';
        }
    }elseif($step && $it===0){
        if($r) return $r;
        else return '<div style="clear:left"> </div>';
    }
}

//utilisation $step = tout les combiens le clear s'applique, $i = numero de l'iteration, $r se qui s'affiche
<div<?php echo clear(3,$i,' style="clear:left" ') ?>>

Si ça résous le problème des blocs qui se placent n'importe comment, cela ne résous pas le problème de la hauteur

gc-nomade a écrit :
en js , aprés chargement , recuperer les hauteurs de chaque élément et réinjecter la plus grande valeur trouvée a l'ensemble de ces éléments pour uniformisé leurs hauteurs .

Ça j'ai jamais oser, je me dit que c'est pas trop le rôle du js, mais c'est peut être un apriori...C'est sûr que ça résous bien le problème.

gc-nomade a écrit :

display : table + table-cell , necessite aussi de compter les elements pour passer de ligne en ligne , le process equivaut a generer un tableau avec des divs(ou autres balises ... ) smile .

gc-nomade a écrit :

en final , une hauteur fixe en em si c'est applicable et float (inline-block si l'on laisse tomber IE7), ou un tableau de présentation (qui peut aussi prendre de la largeur ) .

Je sens que ça va me prendre la tête, je fais plus rien pour ie6, mais bon ie7, je vais le supporter encore un peu...

gc-nomade a écrit :

Autre solution , determiné une hauteur fixe et tronqué les textes sans se soucier de devoir appliquer un clear .

C'est la solution qu'utilise kickstarter, c'est plutôt joli, mais les tableaux ça ajuste bien aussi... je sais pas, je sais pas

En tout cas merci bien pour le tour d'horizon des solutions
Modifié par matmat (21 May 2010 - 17:02)

matmat a écrit :

Ça j'ai jamais oser, je me dit que c'est pas trop le rôle du js, mais c'est peut être un apriori...C'est sûr que ça résous bien le problème.

disons que l'ont peut retrouver le même defaut visuel chez les menus deroulant qui se referme une fois la page chargée , sinon js est souvent uiliser pour modifier les styles et ça marche bien

Pour le script en js que j'utilise : voici :

	<script type="text/javascript">
<!--
/* fonction inArray, renvoie true si la valeur recherchée est dans le tableau*/
Array.prototype.inArray = function(array) {
for(var item=0; item<this.length;item++) {
if(this[item]==array){ return true;}
 }
 return false;
 }
 
 function cherche(classNameg,Tag){
// Parcours l'ensemble des balises de la page
	var bal = document.getElementsByTagName(Tag);
	var plushaut= 80;/* initialise la variable et applique une hauteur (minimale) par défaut */
	
	for (var item = 0 ; item < bal.length; item++){
	
		if (bal[item].className ==classNameg){
		if (bal[item].offsetHeight > plushaut) {plushaut = bal[item].offsetHeight;}
		
			}
		}
	for (var item = 0 ; item < bal.length ; ++item){
		if (bal[item].className == classNameg){
		    bal[item].style.height=plushaut + 'px';
			}
		}
	}


window.onload = function () {
cherche('galgc','DIV');
}
 -->
 </script>

et je cible du coup tout les :

	<div class="galgc">....</div>

de la page si il y en a .

Le reste des style est dans la feuille de style , le script ne s'occupe que de la hauteur.
(ce script est inspiré de tutos js , probable que l'on peut mieux faire , il me faut deux passages mais je vois pas comment faire moins ).

matmat a écrit :


A vrai dire je suis toujours aussi indécis!

... parfois , un echo suffit a se decider ou rebondir sur autre chose.

GC


<edit ... satanées [ i ] />
<re-edit , bon maintenant manque les crochets autour des champs :bal[ item ].... />
Modifié par gc-nomade (21 May 2010 - 22:18)

Merci bien gc-nomade ,

Effectivement la solution du js est intéressante, elle résout de plus d'autres problèmes occasionnée par les tables. Je vais faire des essais...

Salut de nouveau ,

J'ai fait des essais avec ta fonction, et je confirme c'est une bonne solution, merci donc!

J'ai fait une petite modification qui permet de définir des hauteur pour chaques lignes, en définissant un "pas" qui correspond au nombre d’élément par lignes:

function equalHeight(cl,step){
    var boxs = document.getElementsByClassName(cl);
    var maxHeight = [];
    var line,heigh;
    for(var j=0;boxs[j]; j++){
        line = Math.ceil((j+1)/step);
        height = boxs[j].offsetHeight;
        if (!maxHeight[[line]] || height > maxHeight[[line]])  maxHeight[[line]] = height;
    }
    for(var j=0;boxs[j]; j++){
        line = Math.ceil((j+1)/step);
	boxs[j].style.height = maxHeight[[line]]+'px';
    };	
}
document.addEventListener("DOMContentLoaded",function(){
  equalHeight('mini-box',3);
}, false); 

Ce qui donne http://www.mozaik.com.mx/test/equalheight.html , ne marche pas avec explorer, il faut rajouter les fonctions de sélecteurs et d’évènement nécessaires.

Au niveau de l'effet visuel ou bien "sautement" il est casi nul en utilisant DOMContentLoaded et en mettant les clear:left à chaque lignes. En effet grâce a l'ajustement ligne par ligne et le clear, la hauteur de chaque lignes ne change pas, le seul effet visuel sera donc l'ajustement des blocs par rapport aux blocs voisins, ce qui grâce à DOMContentLoaded et presque aussi rapide que la feuille de style.

Bref, très bonne solution a un vieux problème!

En jQuery pour ceux qui l'utilise:

function equalHeight(selector,step){
    var els = $(selector);
    var maxHeight = [];
    var line,heigh;
    els.each(function(index){
        line = Math.ceil((index+1)/step);
        height = $(this).height();
        if (!maxHeight[line] || height > maxHeight[line])  maxHeight[line] = height;
    });
    els.each(function(index){
        line = Math.ceil((index+1)/step);
	$(this).css('height',maxHeight[line]+'px');
    });
}
$(document).ready(function(){
    equalHeight('div.mini-box',3);
})

Modifié par matmat (28 May 2010 - 01:14)