28221 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai toujours codé mes pages avec des tableaux (pas bien). Depuis peu je code selon la norme Xhtml et à l'aide des feuilles de styles css.
Plus question alors d'utiliser les tableaux (sauf certains cas).
Cependant là, je suis bloquée. Je suis en train de coder une page de saisie d'informations ( Pseudo, mot de passe, ...).
Il faut que les champs soit alignée verticalement.
Est-ce possible d'obtenir cette mise en forme sans utiliser de tableaux ?

Merci.
Lu.
Modifié le 19 Jan 2005 - 16:53
Je suppose que:
- tu sais le faire rapidement avec un tableau ?
- sans tableaux imbriqués ?
- et tu sais comment vérifier que ton contenu sera toujours compréhensible une fois le tableau linéarisé (c'est à dire lorsque le contenu des cellules est affiché de haut en bas dans l'ordre linéaire du HTML, en faisant abstraction des colonnes) ?

Dans ce cas, gagne du temps : fais un tableau Smiley cligne

<edit>Sinon, oui, c'est possible... Mais le gain est assez imperceptible, sauf la satisfaction gratuite de ne pas avoir employé un tableau par ailleurs inoffensif et justifié</edit>
Modifié le 19 Jan 2005 - 15:32
Merci. (je m'en doutais fortement)

Ok ce soir j'abandonne cette idée, mais jusque là je vais encore chercher Smiley cligne (car j'aime ça quand même).

Lu.
Enfin, j'y suis arrivé.
Je me suis inspirée d'un tuto sur le site Openweb.eu.org.
Dernier soucis mineur : je n'arrive pas aligné verticalement le texte dans le label.

css :

.flottanteR {
  margin: 0px;
  margin-right: 5px;
  float: left;
  text-align: right;
  width: 50%;
  height: 25px;
}
.flottanteR label{
  vertical-align: middle;
}

.flottanteL {
  margin: 0px;
  float: left;
  text-align: left;
  height: 25px;
}

.conteneur {
  margin: 20px;
  width: 100%;
}


Html:

<!-- Agency -->
<label class="flottanteR" for="sz_AgencyKey"><span>Code agence :</span></label>
		
<div class="flottanteL">
<input  type="text" name="sz_AgencyKey" id="sz_AgencyKey" maxlength="8" size="8"/>
</div>
		
		
<!-- User -->
<label class="flottanteR" for="sz_User"><span>Code utilisateur</span></label>
		
<div class="flottanteL">
<input type="text" name="sz_User" id="sz_User" size="8" maxlength="8"/>
</div>