Il nous arrive à tous d'avoir à uniformiser la hauteur de boites dans un article ou de modules sur la même rangée.

Confronté à ce problème les solutions CSS sont peu fiables et il faut recourrir au Javascript. Pour cela il faut savoir coder et ce n'est pas à la portée de tous.

Toutefois, un plugin va nous aider à appliquer une solution simple.

Utiliser le plugin Equalheights - Equalize heights

Ce plugin va égaliser la hauteur des objets Web sur la base d'une classe CSS partagée.

Caractéristiques

• Sélecteurs CSS multiples pour égaliser des types d'objets différents dans le même site
• Responsive. Le plugin redimensionne les objets lorsque la fenêtre est redimensionnée.
• jQuery se charge avec un sélecteur de position.
• Fonctionne avec IE7, IE8, IE9, Chrome, Firefox et Opera.
• Compatible avec Joomla! 2.5.x et Joomla! 3.0.x

Installation / Configuration

- Téléchargez le plugin directement sur le site de Digital Disseny
- Installez-le via le gestionnaire d'extensions Joomla
- Allez dans Extensions > gestionnaire de Plug-in et recherchez un plugin appelé "System - Equalheights". Cliquez dessus pour activer / configurer le plugin
- Dans le plugin activé, insérez les classes auxquelles vous voulez appliquer l'égalisation sans oublier de mettre le point !
- A chaque élément que vous voulez égaliser vous appliquez la classe préalablement choisie (par exemple en ajoutant un suffixe de classe aux modules de la même rangée (en lui laissant un espace) ou en appliquant une classe aux éléments en ligne dans un article)

Langues disponibles

• Anglais
• Allemand (merci à Johannes Hock!)
• Français SUR CE SITE

Demo

Equalheights est activé et fonctionne dans ce site. Exemple d'utilisation:

Sans Equalheights

Avec Equalheights

Exemple de code HTML:

<div>
<div class="equalize"style="float: left;">
<p>Demo box</p>
    </div>
<div class="equalize"style="float: left;">
<p>Demo box<br>Extra line</p>
    </div>
<div class="equalize"style="float: left;">
<p>Demo box<br>Extra line<br>Extra line 2</p>
    </div>
<div class="clr"> </div>
</div>

Exemple de paramètrages:

Collaborez

Cette extension est gratuite et open source. Si vous l'aimez et souhaitez aider les développeurs, vous pouvez :

1. Faire un don au projet par le biais de Paypal en cliquant sur le bouton dans le panneau de droite de Digital Disseny
2. Envoyer des questions ou des contributions sur le code à travers de Github
3. Donnez votre avis dans le Joomla Extensions directory
4. Écrire un commentaire sur l'article de Digital Disseny

- Installez-le par Joomla Extension Manager