28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai l'habitude de faire des formulaires web avec une mise en page en tableau.

Je fais cela parce que je veux que mes formulaires soient centrés quelque soit la largeur du formulaire.

J'ai regardé sur le forum et dans la faq sur les formulaires, mais la largeur est à chaque fois précisée dans la feuille style.

Etant donné que je ne connais pas à l'avance la largeur du formulaire, je ne peux pas la préciser.

Voici le code que j'utilise :


<!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" xml:lang="fr">
	<head>
		<title>Un formulaire en tableau</title>
		<meta http-equiv="Content-Type" content="charset=iso-8859-1" />
		<style type="text/css">
		/*<![CDATA[*/
			table.formulaire{
				margin-left: auto;
				margin-right: auto;
				border-style: solid;
				border-width: 1px;
				border-color: #000;
			}

			*.right{
				text-align: right;
			}

			*.center, h1{
				text-align: center;
			}

			span.lib{
				font-weight: bold;
				margin-left: 5px;
			}
		/*]]>*/
		</style>
	</head>
	<body>
		<h1>Le titre de la page</h1>
		<form id="mainForm" method="post" action="...">
			<table class="formulaire">
				<tr>
					<td class="right"><label for="nom">Nom :</label></td>
					<td><input type="text" id="nom" name="nom" value="" /><span class="lib">Un peu de texte de longueur variable</span></td>
				</tr>
				<tr>
					<td class="right"><label for="prenom">Prénom :</label></td>
					<td><input type="text" id="prenom" name="prenom" value="" /></td>
				</tr>
				<tr>
					<td class="right"><label for="codepostal">Code postal :</label></td>
					<td><input type="text" id="codepostal" name="codepostal" value="lib" /><span class="lib">Un autre texte</span></td>
				</tr>
				<tr>
					<td colspan="2" class="center">
						<input type="submit" value="Envoyer" />
						<input type="reset" value="Effacer" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>


Merci d'avance pour les réponses.
Modifié par pitivier (08 Jan 2006 - 16:14)
Merci d'avoir répondu,

En fait, avec ma mise en page en tableau, mon formulaire est centré quelque soit sa largeur, avec les exemples de mises en page en css que j'ai vu, il faut préciser la largeur.

Donc je voudrais savoir comment avoir la même mise en page sans utiliser de tableau.
Tu peux très bien préciser des tailles en pourcentages. Pour tes tableaux, tu utilises bien des tailles fixes en pixels ou des tailles redimensionnables en pourcentage, normal ?

Donc il faut que tu fasses pareil pour tes formulaires.

++
En fait je ne précise pas de taille du tout parce que comme ça mon tableaux se redimensionne automatiquement en fonction du texte qui se trouve à l'intérieure des cellules.
Bonjour,
D'après ma maigre expérience, un bloc se redimensionne en fonction du contenu quand il est flottant. Mais comme tu veux le centrer, là c'est problematique.. (formulaire ou pas, c'est pareil)

Donc, si je voulais absolument le centrer et qu'en plus la largeur s'ajuste automatiquement avec le contenu, je garderais la méthode du tableau (qui n'est pas franchement inappropriée pour un formulaire).

Ou alors, si je voulais utiliser par exemple des <dl> ou <div> plutôt que des lignes et colonnesde tableau pour la mise en forme, j'encaderais le formulaire d'un tableau simple conteneur (qui servirait alors simplement à ajuster la largeur et à centrer le tout)

<table class="..."><tr><td>
... forumlaire mis en forme sans tableau...
</td></tr></table>

Modifié par Alan (09 Jan 2006 - 13:49)
Merci de ta réponse,

Tu as bien compris mon problème.
Ta méthode m'évite de déclarer plusieurs lignes et cellules, mais par contre j'aurais voulu éviter complétement le tableau.
Salut à toi,

Tu veux éviter complétement le tableau dans la mise en page de tes formulaires??? je pense qu'il y a déjà eu des sujets là dessus...

Personnellement j'utilise cette méthode :


<form action="" method="">
<fieldset>
<legend>Titre du fieldset</legend>

<p>
<label for="id_du_champ">Gnagnagna :</label>
<input type="..." name="...." id="id_du_champ" />
</p>

<p>
<input type="submit" value="valider" />
</p>

</fieldset>
</form>


Ensuite dans ma css, je définis l'alignement des paragraphes, la largeur des input, etc... :

form p {
text-align:right;
}

p input {
width:55%;
margin-left:3em;
}

label {
text-align:right;
vertical-align:top;
}



Voilà voilà, dis moi ce que tu en penses, si ça te convient ou pas Smiley biggrin
Cordialement,


PierreAd
Merci de ta réponse et désolé pour le délai de ma réponse.

En fait, ton formulaire prend toute la largeur de l'écran, ce que j'ai besoin, c'est qu'il ne prenne que la taille nécessaire.

Je ne sais pas si tu as regardé le résultat de mon code html, mais ce que je voudrais avoir c'est le même rendu graphique sans utiliser de tableau.

Merci encore