28173 sujets

CSS et mise en forme, CSS3

CSS, centrer div contenant formulaire

Bonjour,

Voila, j'ai créé un formulaire, que j'ai structuré selon ma volonté et que j'ai centré à l'aide de:


div#form {
	margin: 0 auto 0 auto;
	width:730px;
}


seulement, il se trouve que le div conteneur ne se trouve centré que sous Safari et non Firefox.. Je n'arrive pas à remédier à ce problème, même en allant voir le tutoriel correspondant à ce sujet..

la page:

<!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="en" lang="en">
	<head>
		<title>Demande d'intervention</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="AUTHOR" content="Gu&eacute;rin Charles-henri SG INF/DDE44" />
		<!-- SCRIPTS -->
		<script type="text/javascript" src="mootools-.js"></script>
		<script type="text/javascript" src="fx.js"></script>
		<script type="text/javascript" src="util.js"></script>
		<!-- -->
		<link rel="stylesheet" media="screen" href="style.css" />
	</head>
	<body>
		<h3 id="header">demande d'intervention</h3>
		<div id="form">
			<!-- FORMULAIRE -->
			<form action="script.php" method="post" onsubmit="return utilForm()">
                                <!-- BLOC GAUCHE -->
				<div class="left">
					<label>Poste:</label><input type="text" value="" /><br />
					<label>Téléphone:</label><input id="test" type="text" value="" /><span id="log"></span><br />
					<label>verveve:</label><input type="text" value="" /><br />
					<label>inunhj:</label><input type="text" value="" /><br />
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>Objet:</label>
					<select>
						<option value="OOo">OpenOffice.org</option>
						<option value="L">Logiciel</option>
						<option value="M">Mat&eacute;riel</option>
						<option value="I">Imprimantes</option>
						<option value="A">Autres</option>
					</select>
				</div>
					
				<!-- BLOC DROIT -->
				<div class="right">
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>nknjknhb:</label><input type="text" value="" /><br />
					<label>Priorit&eacute;:</label><select>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
					</select>
				</div>
				
				<!-- BLOC BAS -->
				<div id="bottom">
					<textarea cols="100" rows="10"></textarea><br />
					<input type="reset" value="RAZ" />
					<input type="submit" value="Envoyer" />
				</div>
			</form>
			
			<!-- XHTML 1.0 Strict -->
			<p>
			    <a href="http://validator.w3.org/check?uri=referer">
					<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
				</a>
			</p>
		</div>
	</body>
</html>


la feuille de style:

* { margin:0; }

body {
	padding:0;
	background:#FFFFFF;
	color: #000000;
	font: 86% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}

h3#header { 
	color:#FFFFFF;
	background:#0000DD;
	text-align:center;
	text-transform : uppercase;
	margin-bottom:10px;
}

div#form {
	margin: 0 auto 0 auto;
	width:730px;
}

div.left { float:left; }

div.right { float:right; }

div#bottom { clear:both; }

label { 
	display:inline;
	width:80px;
	float:left;
}

input, select { margin:7px; }

textarea { margin-top:5px; }

p { margin-top:10px; }

img { border:none; }


En espérant que vous saurez trouver la solution à mon problème.
Modifié par charly_ (30 Sep 2007 - 14:12)
Si tu essai 

div#form {

	margin: auto;
	width:730px;

}

sa devrait fonctionner. Tes margins sont déjà toutes à 0 avec ton
 
* { margin:0; }

Et d'après mon utilisation personnelle, le auto affecte seulement les côtés.
Modifié par gizz (30 Sep 2007 - 15:47)
Je te remercie pour ta réponse, mais malheureusement cela n'arrange en rien mon problème, mon formulaire reste toujours a gauche sous Firefox et est centré sous Safari.
Peux-tu mettre un lien vers ta page ?
Firefox : quelle version ? Sous mac ?
Cela nous permettra de mieux te venir en aide Smiley cligne
Bonjour,

Le problème ne vient pas de la feuille de style mais du javascript. En effet, si l'on visionne ta page avec le javascript désactivé le formulaire est bien centré.
Modifié par Shunkin (30 Sep 2007 - 18:52)
maintenant, que ce bug est résolu, j'aurais une autre question.. avec Safari le textarea ne dépasse pas le second bloc contenant les input, mais avec Firefox c'est le cas.. comment pourrais-je résoudre ce détail ?

ps: sinon ce n'est pas grave, j'utiliserais javascript pour corriger ce détail, en fonction du navigateur utilisé.
Modifié par charly_ (30 Sep 2007 - 19:11)
Chez moi le textarea ne dépasse pas sous firefox... mais je crois que c'est parce que tu a modifié depuis... puisque la couleur du formulaire à changé entre mon ouverture sur firefox et sur IE...
Voila, tout est corrigé et doit normalement fonctionné sous IE7/Firefox/Safari, je n'ai pu le tester que sous les deux derniers, mais ça devrait le faire, pour la version 6 d'IE, je n'en sais trop rien par contre.. merci à vous Smiley smile
Sujet clos
Aller à