Uniformisez la hauteur de vos colonnes en HTML et CSS

Uniformisez la hauteur de vos colonnes en HTML et CSS

Un problème est souvent rencontré lorsqu’on dispose de plusieurs colonnes sur une même ligne : elles ont des hauteurs différentes et cela peut donner un effet disgracieux. En effet, les colonnes ont une hauteur qui est ajustée en fonction des éléments qu’elles contiennent.

Malheureusement, il n’existe pas de manière universelle permettant de résoudre ce problème. Tout dépendra de la manière dont est construite notre page, donc de code HTML ou même CSS. Cette difficulté peut également être rencontrée avec le CMS WordPress. Les Divi Builder, Visual Composer ou tout autre outil de mise en page ne gèrent pas tous les blocs de la même façon ce qui n’empêche donc pas d’être malgré tout un jour confronté à ce problème.

Dans cet article nous aborderons 3 méthodes différentes:

  • l’ajout de marges « masquées » ;
  • comportement des blocs comme un tableau ;
  • l’utilisation des flexbox.

A vous de trouver celle qui vous conviendra !

Ajouter des margin / padding

La première solution consiste à ajouter au bas des colonnes une marge négative couplée à un padding positif (valeurs opposées). Les colonnes vont ainsi être « prolongées » vers le bas. Il n’y aura ensuite plus qu’à restreindre le contenu à la rangée, pour cela on va cacher le background qui déborde avec la propriété CSS overflow.

.row{
overflow:hidden;
}
.column-1,
.column-2,
.column-3{
margin-bottom: -9999px;
padding-bottom: 9999px;
}

Cette solution présente l’indéniable avantage de ne pas briser le design « responsive » de la page lorsque l’on passera à des écrans de taille différente.

Comportement similaire à un tableau

Il est également possible de modifier le comportement de la ligne en affectant la valeur table à la propriété display. Le colonnes vont se comporter comme les cellules d’un tableau grâce à la valeur table-cell.

.row{
display:table;
}
.column-1,
.column-2,
.column-3{
float:none;
display:table-cell;
  vertical-align:top;
}

Pour que cette solution fonctionne, il est indispensable d’aligner les blocs par le haut (avec la propriété vertical-align:top), et également annuler la propriété float des colonnes.

Néanmoins,cette méthode n’est pas « responsive ». Elle risque de provoquer un problème d’affichage sur les écrans de petite taille. Pensez à utiliser les media-queries pour éviter cela.

Utilisation des flexbox

Une alternative intéressante pour résoudre ce problème d’alignement de colonnes est le modèle de boîtes flexibles. L’utilisation de la seule déclaration.display:flex appliquée à la rangée suffit.

.row{
    display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display:flex;
}

Aujourd’hui, les flexbox sont plutôt bien reconnues par les navigateurs (ressource CanIUse.com). Toutefois, pensez bien à ajouter les préfixes vendeurs pour être compatibles avec le plus de versions de navigateurs possibles. Signalons malgré tout que les versions antérieures à Internet Explorer 10 ne le supportent pas.

 

WordPress: Comment supprimer les révisions de vos anciens articles

WordPress: Comment supprimer les révisions de vos anciens articles

Vous savez sans doute que le temps de chargement de vos sites est pris en compte par Google. Ainsi, chaque petit détail a son importance pour vous faire gagner du temps. Dans cet article, nous allons voir deux plugins WordPress qui suppriment les anciennes révisions de vos articles et pages. Cette opération permettra de nettoyer un peu votre base de données, ce qui garantira un meilleur temps de chargement à votre site.

Soyez prudents lors de la recherche des plugins qui suppriment les révisions d’articles et pages. Certains de ces plugins peuvent causer beaucoup de dommages. Personnellement je n’ai jamais eu de souci avec ces deux extensions.

Avant d’exécuter l’un de ces plugins, il est vivement conseillé de faire au préalable une sauvegarde de votre base de données WordPress. On n’est jamais trop prudent ! Si vous ne savez pas comment procéder, le plugin BackUpBuddy peut vous être utile. Il est assez simple d’utilisation et vous assistera dans les sauvegardes et éventuelles restaurations de votre base de données.

Le plugin Optimize Database

Dans la colonne de gauche, cliquez sur Outils puis Optimize Database.

 

Plusieurs options vous sont ensuite proposées, vérifiez-les puis cliquez sur Save Settings. Vous pouvez ensuite cliquer sur Go To Optimizer puis Start Optimization.

Après quelques instants d’attente, vous verrez apparaître la liste de toutes les opérations effectuées ainsi que la taille de la base de données avant et après optimisation.

Le plugin Better Delete Revision

Même si ce n’est pas un des plugins les plus installés par la communauté WordPress, le plugin Better Delete Revision est mon favori pour ce type d’opérations. C’est selon moi le plus simple d’utilisation. Il propose juste ce qu’il faut en terme d’options.

 

En choisissant dans la colonne de gauche le menu Réglages puis Better Delete Revision, on arrive sur une page sur laquelle on a le choix entre Check Revision Posts et Optimize Your Database.

Cliquez d’abord sur Check Revision Posts pour faire un état des lieux de ce qui encombre votre base de données. Une confirmation est demandée avant de lancer la suppression définitive des posts. Après validation, on vous indique le nombre de révisions effacées.

C’est ensuite le moment de passer à l’autre opération: Optimize Your Database. Très curieusement, on doit repasser par le menu Réglages / Better Delete Revision pour y accéder à nouveau (amélioration possible). La base de données est alors scannée et apparaît alors la liste de chaque table ainsi que son état : si l’une d’elle est en rouge, il est conseillé de lancer l’optimisation de la base. Vous voici à présent avec une base de données optimisée  pour améliorer le temps de chargement de votre site, simplement, et en quelques clics…