Centrer Jonathan

Formulaire(s) et Fonction

La règle pour les gabarits de TABLE est d'aligner des éléments de formulaires avec leurs étiquettes. Bien qu'on puisse avancer que c'est un usage approprié des Tableaux, la technique CSS décrite en-dessous peut être utile pour d'autres, ... comme pour d'autres mises en pages similaires.

Un gabarit typique pour les formulaires comporte les étiquettes à gauche et le remplissage à droite, avec les éléments de formulaires sur la droite, le remplissage à gauche....et un point de rencontre au milieu :

Basé sur le code original d'Eric Meyer.

Le fomulaire au-dessus est créé sans usage des TABLEAUX. Voilà comment nous utilisons FLOAT pour parvenir au positionnement. Le truc est de créer un DIV qui fonctionne comme la ligne TABLEAU que nous avons l'habitude d'employer. Ensuite nous créerons deux SPANs : un pour les étiquettes et l'autre pour les éléments du formulaire.... Faites flotter l'étiquette SPAN à gauche et l'élément du fomulaire à droite. Pour le SPAN étiquette, alignez le texte à droite et allouez au "SPAN élément du fomulaire" :  "left-aligned text".

La Feuille de Style ressemble à ça :

div.row {
  clear: both;
  padding-top: 5px;
  }

div.row span.label {
  float: left;
  width: 100px;
  text-align: right;
  }

div.row span.formw {
  float: right;
  width: 235px;
  text-align: left;
  }

La CSS au-dessus donne aussi les largeurs pour les SPANs. Ce peuvent être des valeurs absolues comme l'exemple, ou des pourcentages qui s'additionnent jusqu'à 100% ou nettement moins, ceci dépendant de l'espacement et des bordures ( et le modèle de la boîte que vous concevez). Dans l'exemple après, j'ai emballé le formulaire dans une autre DIV pour lui appliquer une bordure et un fond.

Le code HTML ressemble à cela :

<div style="width: 360px; background-color: #ccc;
border: 1px dotted #333; padding: 5px;
margin: 0px auto";>
  <form>
    <div class="row">
      <span class="label">Name:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Age:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
    </div>
    <div class="row">
      <span class="label">Comments:</span><span
class="formw">
        <textarea cols="25" rows="8">
        Go ahead - write something...
        </textarea>
      </span>
    </div>
  <div class="spacer">
  &nbsp;
  </div>
 </form>

</div>

A quoi sert div class="spacer"  ici ? Quand vous faites flotter un élément avec une CSS, il ne prend plus n'importe quel "space" ou n'importe quel fond et/ou bordure fera apparaître au dessus les images au lieu de de les encadrer. Nous avons besoin d'ajouter du contenu différent des DIV flottantes à l'intérieur du container DIV pour forcer le fond ou la bordure à remplir les éléments flottants tout aussi bien. Ajoutez cela à votre feuille de style pour vous prémunir de cela :

div.spacer {
  clear: both;
  }

Front et Center

Vous noterez que l'attribut STYLE pour la DIV au dessus contenait  margin: 0px auto;. Ceci résulte dans la DIV de 350 pixels centrée dans les navigateurs standards. Quelques navigateurs comme IE5x. pour Windows ignorent cela, mais centreront (incorrectement) les DIV's qui ont un TEXT-ALIGN du centre. Pour centrer les DIVs dans ces navigateurs vous pouvez emballer un DIV avec le jeu de commandes TEXT-ALIGN pour centrer, autour d'une autre DIV qui fixe la MARGIN à auto (et TEXT-ALIGN à gauche de telle manière que le texte s'alignera correctement). Consultez "Rob Chandanais Layout Reservoir" pour cela et d'autres techniques de centrage.