28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je souhaite faire un formulaire simple à la façon dont il est réalisé sur la page de contact de http://www.alsacreations.fr/
Comme je ne veux pas faire la mise en page avec un tableau, j'essaie de le mettre en place avec des paragraphes comme sur le site.

Chaque ligne contient donc un label, un input et est contenue dans un paragraphe.

Ce que je ne comprend pas c'est comment aligner les éléments en css, vu que le label ET l'input se situent dans le même paragraphe <p>...

Voici une ébauche du formulaire en question :

    
<div id="form">
      <form method="post">
        <p>
          <label for="formNom">Votre nom</label>
          <input type="text" name="formNom" class="textfield" title="Veuillez saisir votre nom"/>
        </p>
        <p>
          <label for="formPrenom">Votre prenom</label>
          <input type="text" name="formPrenom" class="textfield" title="Veuillez saisir votre prenom"/>
        </p>
        <p>        
          <label for="formEmail">Votre email</label>
          <input type="text" name="formEmail" class="textfield" title="Veuillez saisir votre email"/>
        </p>
        <p>        
          <label for="formMessage">Votre message</label>
          <textarea name="formMessage" cols="20" rows="10" title="Veuillez saisir votre message"></textarea>
        </p>
        <p>        
          <input type="submit" />
        </p>                                    
      </form>
</div>


Voilà je n'ai aucune idée du style à appliquer afin d'avoir une présentation correcte.

Merci d'avance
Modifié par StatikFunk (08 Oct 2008 - 09:29)
Bonjour,

En cherchant des infos sur l'alignement des formulaires, je suis tombé sur ce fil de discussion.
Le lien donné ci-dessus est intéressant ... mais "cassé" Smiley confus .
Voici donc un lien qui marche Smiley cligne

Exemples de formulaires sans tableau de mise en forme

Merci à vous pour ce site. Il est en train de devenir une référence pour moi qui ne me sert du (X)HTML / CSS que par intermitence. Smiley biggrin