28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en forme d'un formulaire comme avec <table>

Bonjour à toutes et à tous,

j'aimerais mettre en forme un formulaire comme avec l'utilisation d'un tableau HTML.
C'est à dire, le libellé dans la cellule de gauche et (par exemple) une liste dans le cellule de droite sur la même ligne
Mon code actuel :
    <!-- La civilité -->
    <div>
        <label for="id-ul-civilite">Civilité :</label>
        <ul id="id-ul-civilite">
            <li>
                <input type="radio" id="id-radio-mr" name="civilite" value="Mr" />
                <label for="id-radio-mr">Mr</label>
            </li>
            <li>
                <input type="radio" id="id-radio-mme" name="civilite" value="Mme" />
                <label for="id-radio-mme">Mme</label>
            </li>
            <li>
                <input type="radio" id="id-radio-mlle" name="civilite" value="Mlle" />
                <label for="id-radio-mlle">Mlle</label>
            </li>
        </ul>
    </div>
me parait "bien" niveau structure.

Mais comment faire en sorte que "Mr" soit sur la même ligne que "Civilité :" (à la suite) ? (Mme et Mlle en dessous de Mr)
Modifié par Tchupacabra (09 May 2008 - 11:42)
maintenant oui... Smiley biggol

le problème que je rencontre maintenant est l'utilisation du margin-left des <input>
Je ne comprends pas pourquoi avec les 32%, j'ai un décalage (env. 3cm entre le <label> et <input>) alors qu'avec les px, c'est bon.

Une idée ? Smiley ohwell
mon exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
* {
	padding:0px;
	margin:0px;
}
form {
	/*width:100%;*/
	margin:0px 30px;
	background-color:#6699CC;
	}
form div.zone-champ { border:1px solid #FF0000;
	margin:7px auto;
	min-height:30px;
	position:relative;
	}
form p.double {
	position:relative;
}
form p.double>label,
form p.double span.label { background-color:#99CC00;
	text-align:right;
	font-weight:bold;
	
	overflow:hidden;
	float:left;
	
	width:40%;
	/*width:400px;*/
	}
form p.double input {border:2px dashed #FF0000;
}
form p.double input[type=text] {border:1px dashed #000;
	display:block;
	margin-left:42%;
	/*padding-left:42%;*/
	/*margin-left:410px;*/
	}


form ul.horizontal {
	list-style:none;
	display:block;
	margin-left:42%;
	/*padding-left:42%;*/
	/*margin-left:410px;*/
}
form ul.horizontal li {
	float:left;
	}
form ul.horizontal li label {
	padding-right:20px;
	}


p.spacer {
	clear:both;	margin:0px;	padding:0px; border:none; background:none;
	}
</style>
</head>

<body>

<form>
<fieldset>
	<legend>Les informations personnelles</legend>
	
    <!-- La civilité -->
	<div class="zone-champ">
		<p class="double">
			<span class="label">Civilité&nbsp;:</span>
			<ul class="horizontal">
				<li>
					<input type="radio" id="id-radio-mr" name="civilite" value="Mr" />
					<label for="id-radio-mr">Mr</label>
				</li>
				<li>
					<input type="radio" id="id-radio-mme" name="civilite" value="Mme" />
					<label for="id-radio-mme">Mme</label>
				</li>
				<li>
					<input type="radio" id="id-radio-mlle" name="civilite" value="Mlle" />
					<label for="id-radio-mlle">Mlle</label>
				</li>
			</ul>
		</p>
		<p class="spacer"></p>
	</div>
    
    
	<!-- Le nom -->
    <div class="zone-champ">
		<p class="double">
			<label for="id-input-nom">Le nom&nbsp;:</label>
			<input type="text" maxlength="30" name="nom" id="id-input-nom" />
		</p>
		<p class="spacer"></p>
	</div>
	
</fieldset>
</form>

</body>
</html>
Hello,

Pas d'idée particulière sur ce sujet, mais par contre je sais que les styles utilisés pour ton input de type text posent problème à Firefox 3. C'est un problème que j'avais constaté sur ce tutoriel avec les premières beta de Firefox, et qui semble se confirmer. La margin-left donné s'applique à partir du dernier contenu à gauche (ici le label flottant), comme pour un élément en display: inline.

En fait c'était une erreur de ma part. Passer un élément input en display: block n'est pas très intelligent. J'ai corrigé mon tutoriel en fonction.

Dans ton cas, si tu remplaces 
form p.double input[type=text] {
	display:block;
	margin-left:42%;
}
par 
form p.double input[type=text] {
	margin-left: 2%;
}
, ça devrait faire l'affaire.
Merci beaucoup Florent V. pour les précisions.... Smiley biggrin

ps : mon aussi, j'ai viré le display:block; des <input>...

@+ Smiley cligne
Sujet clos
Aller à