Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité.
Pour un champ input de 20px de haut, on aura ainsi les valeurs :
input {
height: 13px;
padding: 3px 0 4px 0;
}
Pour une hauteur identique à :
input {
height: 20px;
}
And the cat’s in the bag!
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
C’est assez logique effectivement puisque les moteurs de rendu Mozilla et KHTML ajoutent les valeurs de padding aux éléments dont la taille est définie. Mais sur IE ça devrait pas être valide ton astuce si ?
Hello !
input { line-height: 20px; }
Bonjour,
Il est aussi possible d’aligner les éléments en vertical. Pour cela il faut préciser aux éléments du conteneur un vertical-align: middle;
@La Blonde: si si, ça marche bien sous ie, même sous ie6, sachant que les valeurs de padding peuvent varier en fonction du de la version d’IE utilisée.
@Nicolas F. et @Steven: Merci à vous deux pour ces deux bonnes idées très concises.
Edit : Je viens de tester les deux solutions proposées plus haut, mais aucune des deux n’a fonctionné dans mon cas… Dommage :(
Il y a aussi une autre méthode, plus simple, pour aligner un élément
inputpar rapport à un élémentlabel: l’utilisation de la propriétévertical-align(qui ne s’applique pas seulement aux cellules de tableau, mais aussi aux éléments et contenus en ligne les uns par rapport aux autres). Pour bien aligner, on utiliseravertical-align: middle. ;)C’est pas vraiment une question de version il me semble pour IE, c’est juste que IE6 a deux modes de rendu. Le modèle Standard (W3C, Gecko, Webkit, etc), et le modèle « Quirks » (Made in Microsoft). En fonction des premières balises que vous mettez en haut de votre site, IE6 se mettra soit en mode standard soit en mode Quirks. Exemple : width: 200px + padding: 0 0 0 20px = largeur de 220px en Standard et 200px en Quirks (cf : http://www.quirksmode.org/css/quirksmode.html ou plus précisément http://www.quirksmode.org/css/modes/box_quirks.html et http://www.quirksmode.org/css/modes/box_strict.html )
En tout cas, pour les labels, j’ai jamais compris comment aligner « simplement » (j’insiste sur le simplement car je sais faire ça de façon compliquée en fait :p) un label d’un input:radio :/
Si Bruno, tu pouvais montrer un exemple dans cet article. ;)
@Victor Brito: Le
vertical-align: middleest une bonne idée, mais en fait ça ne fonctionne pas chez moi. Tu donne d’ailleurs la raison en rappellant que cette propriété s’applique .Or, dans mon cas, ma balise
labelest endisplay: blocket enfloat: leftDu coup, le vertical-align est sans effet.@Kud: Le mode Quirk n’y est pour rien dans ce cas. Il s’agit des nombreuses petites erreurs de calcul ou d’interprêtation de la part d’Internet Explorer en général ;)
Je finis par ne plus chercher à comprendre pourquoi je dois ajouter un pixel par ci ou par là pour avoir le même rendu sur ie6 et ie7… Je me contente d’alimenter ma CSS ie.css en conséquence, c’est tout ^^
Pour aligner le label d’un input radio, tu peux utiliser les vertical-align dont on parlait plus haut, ou utiliser un bête padding-top: xxpx. A noter que dans certains cas, un padding-bottom donnera de meilleurs résultats.
Malheureusement, je ne garde pas sous le coude tous les petits trucs comme ça qui posent problème. Dans certains cas, il s’agit d’un problème de HTML plutôt que de CSS (bien vérifier qu’on ne se trouve pas dans une configuration « exotique » à ce niveau).
Je fais de l’intégration tous les jours et à vrai dire, depuis que je passe IE6 en mode standard, je n’ai pas vraiment de problème de ce côté là. Par contre, le nouveau bug que j’ai découvert récemment sous IE6, c’est la multiplication des classes sur un élément. Comme par exemple .style1.style2.style3 , IE6 ne comprend que « .style3″. Dommage, lorsqu’on veut faire des blocs de même structure mais légèrement différents s’ils sont « petit » ou « grand » comme .panier.grand ou .panier.petit (dans le cas où on a plusieurs paniers dans la même page).
@Kud: Effectivement, IE6 ne comprend pas l’enchainement des classes dont tu parles. D’ailleurs, moi non plus ^_^v Est-ce à dire que :
est égale à :
?
Pour info, le script IE7.js est censé corriger ce bug.
Non, justement.
C’est en voulant faire des choses génériques y’a quelques semaines que je me suis demandé s’il était possible de faire un enchainement de classes.
Je savais que l’on pouvait faire #monId.maClasse ou .maClasse#monId sur un même élement, c’est alors que je me suis dit « et si on faisait .maClassePrincipale.maClassePourLaCouleur ». Et j’en suis arrivé à la conclusion que oui.
Ce qui donne
<
div class="monPanier rouge">
customisé via :
sachant que je veux que ma classe ne s'affecte qu'à certains éléments.
Ce n'est pas forcément le meilleur exemple que j'ai pris, mais concrètement, j'ai pu durant mes intégrations faire des .bloc_encadre.style_one.colour_one, .bloc_encadre.style_two.colour_one, .bloc_encadre.style_two.colour_two, etc etc dans le but d'avoir vraiment une structure commune, c'est à dire .bloc_encadre, un style légèrement différent en terme de présentation (width, height, padding et compagnie), et des couleurs différentes (colour_one, le background est noir, et l'ecriture blanche), etc etc. Tout en sachant que j'ai plusieurs bloc_encadre, et que ces style_one etc, ne s'affectent vraiment qu'à ma classe principale, toutes seules, elles n'ont aucun intérêt comme par exemple .bloc_encadre.style_one, .boutique.style_two.
A noter que .style_two.bloc_encadre marche aussi. Sauf tout ça pour IE6, seule la dernière classe compte. Alors imagine que j'ai fait des .maCertaineClasse.bas...
Et style1, style2, style3 par contre, affecte les propriétés css à tous ces styles, contrairement à mon écriture qui n'affecte les propriétés css qu'à un ou plusieurs éléments ayant TOUTES ces classes réunies.
A noter aussi que le js que tu as mis en fichier joint ne m'avait pas corrigé ce problème mais faut que je reteste et relise ton article. ;)
@Kud: Ok, je vois à peu près à quoi ça peut servir, même si pour l’instant, je ne trouve pas de cas où cette construction est nécessaire et ne pourrait pas être rendue avec une bonne gestion des classes multiples et une bonne gestion de la cascade.
Oui, après, ce n’est qu’une expérimentation, je n’ai pas fini de peaufiner cela. Et de toute façon, vue que IE6 n’aime pas ça…
Il n’y as pas réellement d’astuce CSS, c’est une utilisation standard qui marche tout aussi bien su IE 6 / 7 et Firefox. Le tout est que IE soit en mode standard, sinon tout part en vrille.
IE supporte les propriétés padding et le margin de façon standard si il est en mode standard. Sinon il utilise son propre modèle de boîte. Il ne faut pas chercher plus loin.
Si je me trompe pas vertical-align: middle; ne fonctionne que dans un tableau. Je doute que cette solution fonctionne, sauf bien sur à mettre le formulaire dans un tableau auquel cas il faut me laisser le temps d’aller chercher un baton :)
@exotux:
Pas faux, en même temps, je n’ai pas dit que c’en était une ^^
Pour info, il s’agit d’aligner la base du texte contenu dans le champ
inputavec la base du texte dulabel. (Je précise, parce que j’ai l’impression que l’on comprend que je veux aligner l’inputlui-même avec lelabel).Cela fonctionne très bien dans un formulaire sans tableaux. Il ne faut pas qu’un élément soit en float par contre.