par
naholyr » 21 juin 2005, 23:10
Un label a par défaut display:inline.
Or un élément display:inline n'est pas redimensionnable.
On pourrait lui donner un display:block, mais on galèrerait après au niveau des positionnements de blocs (aligner des blocs horizontalement pose souvent des problèmes, je ne m'étends pas dessus il y a des tas de tutos).
On va procéder plus simplement : on laisse label tel qu'il est, et on définit un bloc à l'intérieur, avec span par exemple.
On va donner à ce span la longueur qu'on souhaite (label s'adaptera donc à la largeur de son contenu), un display:block.
Si on s'arrête là on se retrouve avec un problème d'alignement : un bloc force le retour à la ligne des blocs suivants, sauf... s'il flotte
On fait donc flotter le span à gauche en prime (où à droite si le label est à droite du input).
Cette technique permettra d'aligner correctement les éléments :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
test
</title>
<style type="text/css">
label span { /* on définit le bloc à l'intérieur du label */
width: 150px; /* largeur de notre label */
display:block; /* on force le bloc span à s'afficher en bloc (sinon il n'est pas redimensionnable) */
float:left; /* qu'on fait flotter à gauche pour l'alignement */
}
</style>
</head>
<body>
<form action="script">
<label for="f1"><span>bla bla bla</span></label><input id="f1" /><br />
<label for="f2"><span>bli bli bli bli</span></label><input id="f2" />
</form>
</body>
</html>(j'ai testé avec firefox, IE, et Opera)
ps: si quelqu'un pouvait m'expliquer comment faire pour que les CSS soient appliquable sur tous les navigateurs.
L'expérience (qui inclut l'expérimentation). À force de pratiquer, on finit par connaître par coeur les mauvaises implémentations de tel ou tel navigateur. Et quand une bidouille ne marche pas, on en essaie une autre
Un label a par défaut display:inline.
Or un élément display:inline n'est pas redimensionnable.
On pourrait lui donner un display:block, mais on galèrerait après au niveau des positionnements de blocs (aligner des blocs horizontalement pose souvent des problèmes, je ne m'étends pas dessus il y a des tas de tutos).
On va procéder plus simplement : on laisse label tel qu'il est, et on définit un bloc à l'intérieur, avec span par exemple.
On va donner à ce span la longueur qu'on souhaite (label s'adaptera donc à la largeur de son contenu), un display:block.
Si on s'arrête là on se retrouve avec un problème d'alignement : un bloc force le retour à la ligne des blocs suivants, sauf... s'il flotte ;)
On fait donc flotter le span à gauche en prime (où à droite si le label est à droite du input).
Cette technique permettra d'aligner correctement les éléments :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
test
</title>
<style type="text/css">
label span { /* on définit le bloc à l'intérieur du label */
width: 150px; /* largeur de notre label */
display:block; /* on force le bloc span à s'afficher en bloc (sinon il n'est pas redimensionnable) */
float:left; /* qu'on fait flotter à gauche pour l'alignement */
}
</style>
</head>
<body>
<form action="script">
<label for="f1"><span>bla bla bla</span></label><input id="f1" /><br />
<label for="f2"><span>bli bli bli bli</span></label><input id="f2" />
</form>
</body>
</html>[/code](j'ai testé avec firefox, IE, et Opera)
[quote]ps: si quelqu'un pouvait m'expliquer comment faire pour que les CSS soient appliquable sur tous les navigateurs.[/quote]L'expérience (qui inclut l'expérimentation). À force de pratiquer, on finit par connaître par coeur les mauvaises implémentations de tel ou tel navigateur. Et quand une bidouille ne marche pas, on en essaie une autre ;)
