Page 1 sur 1

Deux div cote à cote ?

Posté : 02 mai 2008, 21:12
par cuisto44000
Bonjour, je suis entrain de créer un formulaire d'inscription, bref rien de sorcier, et en le faisant, je me suis dit: pourquoi pas faire deux div cote à cote qui permettraient de ne pas allonger trop la page ...?

Mais comment faire?

J'ai essayé le display:inline; mais ça ne marche pas :S

Merci à vous ;)

Ps: Si vous pouviez égallement me dire comment conserver un double espace dans un text? merci encore !

Posté : 02 mai 2008, 21:48
par AB
ça marche mais faut fixer des largeurs pour tes div...
Sinon tu peux aussi utiliser le positionnement absolu.

Posté : 02 mai 2008, 21:57
par cuisto44000

Code : Tout sélectionner

<div id="insc"> <form method="post" action=""> <div class="gauche" id="block"> <h3>Pseudo *</h3> <input type="text" name="ps" /> * <h3>Mot de passe *</h3> <input type="password" name="mdp" /> * <h3>Nom *</h3> <input type="text" name="nom" /> * <h3>Prénom *</h3> <input type="text" name="prenom" /> * <h3>Adresse</h3> <textarea name="adr" cols="30" rows="3"></textarea> <h3>Code postale</h3> <input type="text" name="cp" /> </div> <div class="droite" id="block"> <h3>Ville *</h3> <input type="text" name="ville" /> * <h3>Téléphone</h3> <input type="text" name="tel" /> <h3>Sexe</h3> <select name="sexe"> <option value="non précisé">Non précisé</option> <option value="homme" selected>Homme</option> <option value="femme">Femme</option> </select> <h3>Age</h3> <input type="text" name="age" /> ans <h3>Mail *</h3> <input type="text" name="mail" /> * </div> <input type="submit" name="enreg" value="enregistrer" /> </form> </div>
Que doisje mettre dans mon css?

Merci ;)[/code]

Posté : 02 mai 2008, 22:38
par AB
Déjà les id sont des identifiants qui doivent être uniques. Donc utilises class = "block" si tu veux appliquer un même formatage à deux blocs différents. Ensuite le display inline ne sera pas approprié dans ce cas.
tu pourrais essayer quelque chose comme

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans titre</title> <style type="text/css"> .block { float:left; } </style> </head> <body> <div id="insc"> <form method="post" action=""> <div class="gauche block"> <h3>Pseudo *</h3> <input type="text" name="ps" /> * <h3>Mot de passe *</h3> <input type="password" name="mdp" /> * <h3>Nom *</h3> <input type="text" name="nom" /> * <h3>Prénom *</h3> <input type="text" name="prenom" /> * <h3>Adresse</h3> <textarea name="adr" cols="30" rows="3"></textarea> <h3>Code postale</h3> <input type="text" name="cp" /> </div> <div class="droite block"> <h3>Ville *</h3> <input type="text" name="ville" /> * <h3>Téléphone</h3> <input type="text" name="tel" /> <h3>Sexe</h3> <select name="sexe"> <option value="non précisé">Non précisé</option> <option value="homme" selected>Homme</option> <option value="femme">Femme</option> </select> <h3>Age</h3> <input type="text" name="age" /> ans <h3>Mail *</h3> <input type="text" name="mail" /> * </div> <input type="submit" name="enreg" value="enregistrer" /> </form> </div> </body> </html>
EDIT Ensuite les balises h3 ne sont pas appropriées dans ce contexte. Utilise à la place les balises <label> et renseignes toi sur comment les utiliser correctement

Posté : 03 mai 2008, 11:09
par Aureusms
Tu peux aussi te diriger vers Float:left ou right avec un petit clear:both; en final...

Un petit lien ? : http://openweb.eu.org/articles/initiati ... nexe1.html