Elément positionné dans un bloc centré

Bonjour,

Je souhaite faire une boite de loggin centrée sur la page dans laquelle les textes ("noms d'utilisateur" et "mot de passe") ainsi que leur champ respectifs soient positionnés (voir image).

J'ai positionné la boîte avec des marges auto, mais je ne sais pas comment positionner les champs. Y a t il une solution plus élégante que les tableaux ?



Merci par avance pour vos réponses
Takaun

Salut,

Pourquoi tu n'essais pas avec float: right; et tu met un padding-right : xxpx; pour tes champs
nom d'utilisateur dans un float:left et tes champs dans un float: right;

@+

mmm.... attention avec les flottants, la meilleure technique est d'utiliser uniquement un float:left sur les labels :

label{
    float:left;
    width:100px;
}

<p>
    <label>Nom d'utilisateur</label> <input type="text />
</p>

mais un tableau est aussi parfaitement utilisable dans ton cas, et ce ne sera pas spécialement moins "élégant"

Merci ! La dernière solution fonctionne parfaitement.
L'utilisation d'un tableau dans ce cas n'est pas très conforme avec le web sémantique, non ?

Salut,

Takuan a écrit :
L'utilisation d'un tableau dans ce cas n'est pas très conforme avec le web sémantique, non ?

Je pense que Laurent Denis te répondra mieux que moi.

Ca a le mérite de remettre les choses à leur place

Cependant - et sans vouloir jouer les intégriste- l'utilisation d'un tableau dans ce cas n'est il pas aussi nuisible à l'accessibilité ?

Takuan a écrit :
Cependant - et sans vouloir jouer les intégriste- l'utilisation d'un tableau dans ce cas n'est il pas aussi nuisible à l'accessibilité ?

Si tu imbrique 5 tableaux les uns dans les autres avec les labels et leurs champs associés qui ne se suivent plus dans l'ordre de lecture, là oui ça pose un souci.

Mais un tableau à 2 colonnes avec sur chaque ligne le label dans la cellule de gauche et le champ associé dans la cellule de droite, c'est propre et sans souci.

N'oublie pas non plus de placer les label dans des balises <label> avec le bon attribut for="", c'est "sémantiquement" plus adéquat