28173 sujets

CSS et mise en forme, CSS3

Formulaire sans tableau . . .

bonjour a tous et toutes,
j'ai un petit probleme, je fais habituellement des formulaires avec des tableaux mais je souhaiterais evoluer un peu .. et les abandonner.
j'ai fais du google, j'ai trouvé des exemples mais ceux-ci affichent à chaque fois les champs les un en dessous des autres ...
j'aimerai afficher 2 input cote a cote avec chacun une legende (nom et prenom) ... et la je coince...
<fieldset><legend>Inscription</legend>
    <label for="nom">nom:</label>
    <input type="text" name="nom" id="nom" />
    <br />
    <label for="prenom">Prénom:</label>
    <input type="text" name="prenom" id="prenom" />
    <br />
    <label for="addresse">Adresse:</label>
    <input type="text" name="adresse" id="adresse" />
  </fieldset>


PS : j'ai trouvé un debut de solution (bidouille je pense en supprimer le tag legend de prenom ... j'espere que vous pourrez m'aider
merci
Modifié par folyonais (13 Sep 2006 - 19:11)
Plutôt que d'utiliser un seul flot de texte avec des retours à la ligne, tu peux placer tes couples label/input dans un élément de type bloc, un p ou un div par exemple. Ensuite, tu peux jouer sur les flottants et la propriété clear, suivant les besoins.

Quel est l'agencement voulu exactement ? Tu aurais un petit schéma (ou des explications bien précises) ?
Tu indiques que la structure voulue se présente ainsi :
folyonais a écrit :
Nom : <input> Prenom : <input>


On progresse, mais ça manque encore un peu de précision.

S'il s'agit juste d'avoir les quatre sur une seule ligne, c'est tout à fait possible : les input et label étant des éléments de type en-ligne, ils ne génèrent pas de passage à la ligne. On peut donc placer les quatre dans un même paragraphe, par exemple. Ensuite, si l'on a besoin de générer des espacements, on pourra peut-être jouer sur le padding-left du deuxième label, par exemple.

Maintenant, si tu as besoin d'une mise en page un peu particulière, avec ces quatre éléments qui se répartiraient sur toute la largeur disponible : tu peux placer chaque couple input/label dans un paragraphe, et faire flotter ces paragraphes (au moins le premier des deux) à gauche, en leur donnant une largeur de 50% chacun (ou de 48-49%, s'il y a des contraintes un peu spéciales à gérer.

On peut faire ça aussi avec des div plutôt qu'avec des paragraphes...

Si tu n'y arrives pas, sauf en bidouillant afreusement et sans savoir si ça passera correctement dans les divers navigateurs... alors je te conseillerai d'utiliser un tableau, et de l'utiliser proprement (pas de cellules vides, l'ordre de lecture « normal » des cellules permet de lire et utiliser le formulaire correctement, etc.

À toi de voir si tu veux tenter d'utiliser les flottants ou non.


Edit pour modération du modérateur : la première version de ce message citait un message privé (sans la moindre information confidentielle a priori). La citation a été réduite au strict minimum, pour respecter les règles du forum : http://forum.alsacreations.com/help.php#regle8
Modifié par mpop (14 Sep 2006 - 10:42)
Sujet clos
Aller à