Auteur
charly_
#
6 Posts
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)

^
gizz
#
23 Posts
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)

^
charly_
#
6 Posts
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.

^
6l20
#
Les kiwis...quand je veux !
Modérateur
3950 Posts
Peux-tu mettre un lien vers ta page ?
Firefox : quelle version ? Sous mac ?
Cela nous permettra de mieux te venir en aide Smiley cligne

One life live it :)

^
charly_
#
6 Posts
http://charly.homeunix.org/~charly/DEMANDE%20INTERVENTION/index.html

Firefox 2.0.0.7 sous Mac, bug aussi sous win, mais je n'ai pas le numéro de version, je n'ai pas testé directement.

nb: non testé sous IE 6/7, s'il y'avait une âme charitable.. Smiley langue

@gizz: c'est justement ce que je veux, un centrage horizontal seulement Smiley smile
Modifié par charly_ (30 Sep 2007 - 17:56)

^
Shunkin
#
113 Posts
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)

^
charly_
#
6 Posts
merci pour l'information, je vais voir ce que je peux faire Smiley smile

^
charly_
#
6 Posts
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)

^
gizz
#
23 Posts
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...

^
charly_
#
6 Posts
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

^