Il y a quelques jours, j’ai été confronté à un bug d’affichage du champ de recherche du site : le champ était trop large et débordait sur le design du site.
Ce bug avait été constaté par Agat il y a plusieurs mois mais comme je ne l’avais jamais constaté, je ne savais comment le résoudre.
Et bien la solution est toute simple ! Lorsque l’on crée un champ texte, on a l’habitude de faire comme ceci :
<label for="recherche">Login:</label> <input id="recherche" tabindex="10" name="recherche" size="15" type="text" value="" />En fait, la déclaration size="15" ne définit que le nombre de caractères visibles (ce que vous pouvez écrire) dans le champ. Cela ne définit donc pas la taille du champ en lui-même.
En CSS, la propriété width définit la largeur d’un élément et est exprimée en pixels (px), points (pt), pourcentage (%) ou em.
Dans notre exemple, notre champ ayant un ID appelé “recherche”, il suffit de lui ajouter :
#recherche {width:15em;}Et voilà. Notre champ est désormais clairement défini et s’intègre comme il se doit dans le design.
Vous souhaitez réaliser un nouveau projet WordPress ou WooCommerce, ajouter de nouvelles fonctionnalités, ou améliorer les performances de votre site? Faîtes appel à mon expertise.
C’est très sympa, merci ;)
Ravi d’avoir pu aider :-)