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="" />Code language: HTML, XML (xml)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;}Code language: CSS (css)Et voilà. Notre champ est désormais clairement défini et s’intègre comme il se doit dans le design.
Vous avez un projet WordPress ou WooCommerce en tête? Transformez votre vision en réalité avec mon expertise reconnue.
Ravi d’avoir pu aider :-)
C’est très sympa, merci ;)