Deux div cote à cote ?

02 mai 2008, 21:12

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 !

02 mai 2008, 21:48

ça marche mais faut fixer des largeurs pour tes div...
Sinon tu peux aussi utiliser le positionnement absolu.

02 mai 2008, 21:57

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]

02 mai 2008, 22:38

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

03 mai 2008, 11:09

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

Deux div cote à cote ?

Qui est en ligne