28173 sujets

CSS et mise en forme, CSS3

Probleme integration Formulaire avec css

Bonjour,
toujours sur la refonte d'un site en css je me trouve confronter a une difference d'interpretation entre ie et firefox en ce qui concerne les formulaires regardez ces deux screens svp

Screen firefox:
http://img514.imageshack.us/img514/6236/screenfirefoxpc5.jpg
Le formulaire est caler à droite

Screen ie:
http://img340.imageshack.us/img340/3686/screenieus5.jpg
Le formulaire est caler à gauche

Voici le code html
<body>
<form method="post" action="clients/pass/login.php3" target="_blank">
	<!--Conteneur-->
	<div id="conteneur">
	
	
		<div id="header">
			<div id="baniere"><object type="application/x-shockwave-flash" data="img/swf/logo.swf" width="195" height="70">
									<param name="movie" value="img/swf/logo.swf" />
									<param name="wmode" value="transparent" />
							  </object>
							  <a href="http://www.anaska.com/certification-php.php"><img src="img/general/header/logo_zend.jpg" alt="logo zend" width="73" height="47" class="logo_zend" /></a>
			</div>
			<div id="accroche"><img src="img/general/header/accroche.jpg" alt="phrase d'accroche" width="313" height="15" /></div>
		</div>
		
		
		<div id="menu_swf"><object type="application/x-shockwave-flash" data="img/swf/nav.swf" width="600" height="30">
									<param name="movie" value="img/swf/nav.swf" />
									<param name="wmode" value="transparent" />
							  </object>
		</div>
		
		
		<div id="contenu">
		
		
			<div id="reference"><img src="img/homepage/dernieres_rea.jpg" alt="realisations" width="159" height="30" />
								<a href="#"><img src="img/homepage/nos_references.jpg" alt="reference" width="139" height="30" class="img_reference" /></a>
			</div>
			
			<div id="realisations">
				<div id="exemple"><object type="application/x-shockwave-flash" data="img/swf/int_hp_tetiere.swf" width="620" height="140">
									<param name="movie" value="img/swf/int_hp_tetiere.swf" />
									<param name="wmode" value="transparent" />
							  	  </object>
				</div>
				<div id="bloc_a_la_une">
					<img src="img/homepage/a_la_une.jpg" alt="A la une" width="307" height="35" />
					<iframe src="frame/a_la_une.php" name="a_la_une" width="307" height="249" scrolling="auto" frameborder="0">
					</iframe>
				</div>
				<div id="newsletter">
				<img src="img/homepage/newsletter.jpg" alt="newsletter" width="310" height="35" />
				<ul>
					<li>Adresse e-mail : <input name="addr" maxlength="250" type="text"></li>
					<li><input name="type" value="inscription" checked="checked" class="vert" type="radio"> Inscription<input name="type" value="desinscription" type="radio"> Désinscription <input class="button" value="ENVOYER" onclick="Submitform()" type="button"></li>
				</ul>		
				</div>
				<div id="references">references</div>
				<div id="services">services</div>
			</div>	
						
		</div>
	</div>
</form>
</body>


J'ai mis le formulaire sous forme de liste pour mieu le caler

Voici le code css de mise en page
/*homepage*/
#contenu{ padding:5px 0 0 0; overflow:hidden; }

#reference{ width:620px; height:30px; margin:0 auto 5px auto; background-color:#FFFFFF;}

#reference .img_reference{margin:0 0 0 315px;}

#realisations{ width:620px; margin:0 auto; background-color:#FFFF99;}

#realisations div{ width:200px; height:130px; margin:0px; padding:0px; float:left;}

#realisations #exemple{ margin:0; padding:0; width:620px; height:140px; }

#realisations #bloc_a_la_une{ width:307px; height:287px; margin:20px 0 0 0; padding:0; background-color:#00CCFF;}

#realisations #newsletter{ width:310px; height:120px; margin:20px 0 0 3px; padding:0; background-color:#595959;}

#realisations #references{width:310px; height:157px; margin:10px 0 0 3px; padding:0; background-color:#00CCFF;}

#realisations #services{width:310px; margin:14px 0 0 3px; padding:0; background-color:#00CCFF;}


et le css de style du formulaire
#newsletter ul{
	list-style: none;
	margin:0;
}

.button{
	background-color : #FFFFFF;
	font-family : arial;
	font-size : 7pt;
}


Voila je ne comprend pas pourquoi j'ai un decalage sachant que j'ai laisser aucun padding ou margin par default

merci a ceux qui se pencheront sur mon probleme
merci pour ta reponse,

J'ais bien indiqué les valeurs de margin et padding.
Merci pour ton lien mais cela ne m'a pas aider a coriger mon probleme.

En attente d'une autre reponse

bonne journée a vous


ps (dur dur de se mettre au css pour l'integration Smiley ravi )
As-tu également pensé à spécifier les marges pour les éléments de liste <li> ?
Et dernière petite chose : ça ne pourrait tout simplement pas être un problème de text-align ?
(Dans ton cas, il devrait être placé à droite) Smiley murf
Tiens, toute la page est un formulaire?
<body>
<form ...>

<-- ici tout le contenu -->

</form>
</body>

Smiley biggol
c'est un prof qui m'a dit de faire comme ca avec les balise form pour eviter certain bug de positionnement css

Quand au text-indent et margin sur li ca ne fonctionne pas.

#newsletter ul, li{
text-align:left;
list-style: none;
margin:0;
}

je sais plus comment faire Smiley decu
Il ne faut pas mettre de virgule, mais simplement "#newsletter ul li". Smiley cligne

Quand aux <form>, c'est faux : il faut les utiliser uniquement pour les formulaires pour la simple raison ... qu'ils sont uniquement prévus pour ça. Smiley smile
Alors mon probleme à avancer dans le bon sens du fait que le meme decalage se retrouve dans les deux navigateur.

La question reste de savoir comment enlever ce decalage.

J'etai persuader que les raccourci etaient
LE conteneur ---> la balise enfant et une virgule si plusieures balises .
Pour ton ul, tu as bien fait ceci:
#newsletter ul {
margin: 0;
padding: 0;
}
?

Les li ne devraient pas avoir de marge ou padding latéral par défaut.

Pour aligner le tout à droite, mettre un text-align: right sur les li ou sur ul, au choix.
Modifié par Florent V. (29 Nov 2007 - 17:49)
Sujet clos
Aller à