Notre référente CSS, Tetue, propose de réaliser des formulaires en utilisant des listes ul / li
pour assurer leur structure, associés à des labels ayant un display inline-block
.
L’affichage se présente bien quelque soit le navigateur, mais nous sommes vite confrontés à un problème...
Dès que l’on veut ajouter plus d’un élément entre 2 labels, le second élément est alors positionné sous le label, aligné à gauche, et non sous le premier élément avec le même alignement. Ainsi, s’il y a une erreur sur un des champs dans l’exemple, l’erreur sera affichée décalée sur la gauche par rapport à l’input qu’elle représente.
Pour combler cela, il est possible de déclarer le label en float:left ; et d’attribuer une marge identique à tous les éléments contenus entre 2 labels, ce qui est vite rébarbatif.
Voici une autre solution utilisant une marge négative.
Formulaire reprisé
<div class="formulaire_spip formulaire_editer formulaire_editer_nomformulaire formulaire_editer_nomformulaire-id">
<a id="nomformulaire" name="nomformulaire"></a>
<form action="#" method="post"><div>
<ul>
<li class="editer_nomlabel obligatoire">
<label for="nomlabel">Courriel</label>
<em class="aide">#AIDER{arttitre}</em>
<p class="explication">Explication du label</p>
<span class="erreur">Message d'erreur</span>
<input type="type" class="type" name="nomlabel" id="nomlabel" value="" />
</li>
</ul>
</div></form>
</div>
Pour positionner l’ensemble, nous allons jouer avec des marges négatives. Schématisé, cela donne :
<ul>
<li>
<label />
<input />
</li>
<li>
<label />
<em />
<span />
<input />
</li>
</ul>
1) on applique un padding gauche au LI supérieur à la taille du label (ex:120px)
.formulaire_spip li {
margin: 0;
padding: 10px 10px 10px 130px;
clear:both;
border-top: 1px solid #[(#GET{foncee}|couleur_eclaircir|couleur_eclaircir)];
}
2) on demande au label d’être flottant et décalé sur la gauche (via un margin négatif)
.formulaire_spip label {
width: 120px;
float:left;
margin-left:-125px;
text-align: left;
vertical-align: top;
}
3) lorsqu’un fieldset suit un li, on le décale aussi vers la gauche
(seul IE n’en tient pas compte) pour que le fieldset prenne toute la
largeur aussi
.formulaire_spip li fieldset {
border:1px solid #888;
background:white;
margin-left:-125px; /* redecalage vers la gauche... IE < 8 ne le prend pas en compte */
}