Afficher les logos de manière facile, flexible et fluide sur votre site web

Comment afficher les logos de ses partenaires, de ses clients etc de manière facile, flexible et fluide (responsive) ?

Que ce soit en bas de page ou sur une page spéciale, il est en effet fréquent de devoir présenter une série de logos.

Pour avoir une certaine maîtrise sur le résultat final, certains ont recours à un logiciel de retouche d’images pour réaliser une composition reprenant tous les logos. Lourd, chronophage et pas très évolutif.

D'autres fois, les utilisateurs créent un tableau pour pouvoir y disposer les logos. Sur grand écran, cela peut faire illusion, mais sur smartphone par exemple un tel tableau va typiquement poser des problèmes d'affichage (débordement, ...).

La solution la plus facile, flexible et fluide ?
Créer une "simple" liste à puces (bullet points), lui attribuer une classe... et définir cette classe dans votre fichier CSS.
Une image par élément de la liste à puces, et le tour est joué !

Illustration

L’éditeur : les logos sont simplement disposés dans une liste à puces. Il est donc très facile d'ajouter / de supprimer / de déplacer un logo...

logos ul backend

Le résultat sur le site : les logos bien alignés, le cas échéant grisés, …

logos ul frontend

Autre avantage de cette technique simple : on peut attribuer à chaque image un lien, ce qui n'est pas le cas lorsqu'on réalise une composition reprenant tous les logos dans une seule image.

Exemple concret

Le HTML dans l'article ou le module :

<ul class="logos">
<li><img src="/images/partenaires/1.jpg"></li>
<li><img src="/images/partenaires/2.jpg"></li>
</ul>

Le code à ajouter dans votre fichier CSS (que l’on peut encore enrichir pour avoir des effets au survol, griser, …)

ul.logos {
text-align: center; /* ne mettre que si le tout doit lui-même être centré*/
padding-left: 0px; /* pour éviter le retrait habituel des ul */
list-style-type: none;
}
ul.logos>li {
display: inline-block; /* pour que les images se mettent côte à côte */
width:200px; /* aura priorité sur la largeur spécifiée dans l’éditeur */
margin:10px 10px; /* espacement vertical et horizontal des blocs */
}

Notez cet article:
7
Comment corriger l'erreur Invalid Token de Joomla!
Quoi de neuf ce mois-ci

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
lundi 16 janvier 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.