[Foundation] - Égaliser la hauteur des colonnes
Bonjour à toutes et tous !
Je profite de mon 1er message sur ce forum pour remercier l'auteur des tutoriels de Grafikart qui m'ont été très utiles à de nombreuses reprises...
Ma 1ère question concerne le framework foundation que je suis en train d'étudier. J'aimerais savoir si ce framework offre la possibilité d'égaliser la hauteur des colonne.
Voir l'exemple de la copie d'écran (le site n'est pas en ligne, je développe en local...) :
J'aimerai que les 3 colonnes soit alignées par la hauteur.
Voici mon code
<div class="row" id="categos">
<div class="columns large-4" id="pro">
<h3>PROFESSIONNELS</h3>
<img alt="Secrétaire freelance" src="img/pro.jpg" />
<p class="panelp">
<b>Artisans & TPE :</b>
Accèdez (enfin) au marchés publics grâce à des dossiers compétitifs.<br />
<br />
<b>Professionnels :</b>
Optez pour un résultat qui vous ressemble !<br /><br />
<b>Sans engagement :</b>
Des solutions pour tous vos projets.<br />
</p>
</div>
<div class="columns large-4" id="loueurs">
<h3>LOUEURS NON PROS</h3>
<img alt="Secrétaire pour loueurs non professionnel" src="img/loueurs.jpg" />
<p class="panelp">
<b>Gagner en tranquillité :</b>
Voici l'alternative au tout ou rien...
De quoi redonner le sourire à votre rentabilité locative !
</p>
</div>
<div class="columns large-4" id="particuliers">
<h3>PARTICULIERS</h3>
<img alt="Secrétaire pour particuliers" src="img/particuliers.jpg" />
<p class="panelp">
<b>Étudiants :</b>
Ne laissez pas la forme ternir le fond !<br />
<br />
<b>Chercheurs d'emploi :</b>
Résistez à la tentation de négliger vos CV et lettres de motivation et démarquez-vous !<br />
</p>
</div>
</div>D'habitude j'utilise du javascript pour donner la hauteur de la colonne la plus grande aux autres colonnes mais là je suis bloqué par je ne sais quoi..., je ne peux même pas changer le style inline avec firebug... je pense que cela vient de foundation.
Si quelqu'un sait commun procéder merci de faire passer le tuyau :)
Bonne soirée à tous
MICKAEL
8 réponses
Apparemment c'est bon j'ai réussi a dresser ces foutus paragraphes... en fait il faut ajouter la hauteur de la marge inférieur à la hauteur du bloc pour que cela fonctionne... logique ou pas logique peut importe car ça fonctionne sur tous les navigateurs (sauf peut être ie8 que je n'ai pas testé).
Voici le code Javascript (jQuery) qui permet d'égaliser les blocs :
var p_panel_init = 0;
$('#categos .columns').each(function() {
var p_panel_height = parseInt($(this).find('p').height());
if(p_panel_height > p_panel_init) {
p_panel_init = p_panel_height;
}
});
$('#categos .columns').each(function() {
var p_margin = parseInt($(this).find('p').css('margin-bottom') + 1);
var new_height = p_margin + p_panel_init;
$(this).find('p').css('height', new_height);
});Et voilà ce que ça donne au niveau de mon prototype :
(non compatible < ie9, mobiles et tablettes)
http://www.mo-web-creation.com/protos/gladys/
La colonne du milieu n'est pas ajustée mais c'est voulus...
Si quelqu'un à une meilleur suggestion ou constate un défaut merci de me le signaler,
en l'absence de retour sous quelques jours je marquerai le post comme résolus.
Pour terminer j'ai trouver ce petit plugin au cours de mes recherches :
equalize.js
Il n'a pas été efficace dans mon cas je pense qu'il mérite d'être cité, en particulier
rapport à sa simplicité d'utilisation (il suffit d'indiquer l'ID du bloc dont les éléments devront
être redimensionnés et sa roule :)
J'ai déjà essayé... alors en fait le problème ne vient pas des colonnes en elles même qui peuvent être redimensionnée sans problème... mais des paragraphes portant la classe "panelp".
Par exemple celui le plus a droite fait 238px de haut, si je modifie le css pour le mettre à la même hauteur que celui le plus à gauche celui-ci gardera quand même sa dimension initiale, j'ai fait le test en remplaçant le "p" par une "div" et ça fonctionne...
Est ce que quelqu'un à une explication, ou comment faire pour redimensionner mon paragraphe ??
Merci d'avance
Je ne comprends pas le problème ... il suffit d'attribuer une taille aux paragraphes ?
Eh bien non ça ne fonctionne pas... si j’attribue une taille le paragraphe reprend sa taille d'origine illico
Pour forcer la nouvelle taille d'un élément, il faut mettre !important, sinon ta nouvelle taille de div/élément ne sera pas pris en compte dans la plupart des cas.
Du coup, tu peux réessayer en mettant ce code css :
#categos p.panelp {
min-height : 300px !important;
}Pour voir si ta taille est prise en compte, rien de mieux que l'inspecteur d'élément sous Chrome ou avec Firebug. Tu clique sur ton élément, inspecte le code css et regarde la taille. Si elle n'apparait pas, c'est qu'elle n'est pas prise en compte (erreur dans le nom de l'élément dans le css ou propriété important manquante)
Ps : je te conseille de tout mettre à la même hauteur. D'une part, c'est esthétiquement plus joli, et d'autre part tu te casseras moins la tête.
"Pour forcer la nouvelle taille d'un élément, il faut mettre !important, sinon ta nouvelle taille de div/élément ne sera pas pris en compte dans la plupart des cas."
Pourquoi tu me dit ça ? Ça ne fonctionne pas chez toi ?
"rien de mieux que l'inspecteur d'élément sous Chrome ou avec Firebug"
Ça fait presque 3 ans que j'utilise firebug, mais merci quand même pour le conseil ;-)
"c'est esthétiquement plus joli"
Merci de ton avis, après je ne sais pas si une colonne vide au 3/4 c'est plus jolis... à voir
Pour la propriété !important, je te disais par rapport aux commentaires des précédentes personnes (Benjamin, Lofti...) qui te disaient de mettre une min-height et tu répondais que ça ne fonctionnait pas.
C'est pour ça que souvent dans ces cas là il faut utiliser cette propriété.
Pour l'inspecteur chrome, on ne sait jamais bien à qui on parle, si ce sont des débutants ou des confirmés. Du coup parfois on (je dis on pour dire moi et les autres personnes qui aident les autres sur ce forum) peut proposer des outils que la personnes connait déjà.
Pour finir, pour revenir à tes div... Je préfère voir trois piles de même tailles peu importe le contenu qu'il y a dedans. Mais ce n'est qu'un avis perso, c'est toi qui tranche parce que c'est ton site :)