28220 sujets

CSS et mise en forme, CSS3

Champs de formulaire pas calés

Hello !

J'ai un petit soucis avec un formulaire.
J'ai une page HTML qui comporte plusieurs <div> (conteneur, entete, gauche, droit et pied). Mon formulaire est dans la partie de droite.

Afin de pouvoir calés les listes (<select></select>) je les ai isolées dans des <div>. Malgré tout, ces <div> ne sont pas placer au même endroit sous IE et sous Firefox (au moins 300px de décalage en hauteur).

Voici le code HTML :


<!-- Début du calque comportant la partie de droite -->
<div class="Droite">
			
	<!-- Début du calque de Recherche Multicritère -->
	<form action="" method="post" name="Form350conf">
						
		<div class="ZoneMulticritere">
		<select name="search1" size="1">
		<option> </option>
		<option>Choisissez un thème</option>
		</select>
		</div>
							 
		
		<div class="ZoneMulticritere">
		<select name="search2" size="1">
		<option> </option>
		<option>Choisissez un thème</option>
		</select>
		</div>
							 
	</form>
	<!-- Fin du calque de Recherche Multicritère -->			
</div>
<!-- Fin du calque comportant la partie de droite  -->



et voici les styles qui concerne cette partie :


<style type="text/css">
<!--

.Droite {
width: 350px;
margin-left: 422px;
margin-top: -575px;
}

.ZoneMulticritere {
margin-left: 15px;
}

-->
</style>


Comment faire pour les aligner un en dessous de l'autre en haut de ma zone nommée "droite" ?
Merci pour vos conseils.
Bonjour,

Est ce que ça ne serait pas du fait de ta valeur négative de -575px que ton décalage se crée ? Elle est peut être interprétée de façon différente dans les 2 navigateurs. Pourquoi cette valeur ?

A noter aussi (il me semble bien) qu'IE et Mozilla n'utilisent pas les mêmes marges et padding par défaut dans les formulaires. Il vaut peut être mieux les préciser.
Modifié par Alphajet (09 Aug 2005 - 10:03)
la valeur négative de -575px est du au fait que ma partie droite est décalé de celle de gauche de 575px (elle est plus haute) : en faite les deux colonnes ne commencent pas à la même hauteur.

pour ce qui est des marges, j'ai aussi essayé en rajoutant dans la css :

margin-top: 0px; (pour etre en haut de ma partie droite)
margin-left: 15px; (pour etre à 15px du bord gauche)

à ma class="ZoneMulticritere" mais ca ne change rien. Les champs ne veulent pas bouger ! Smiley decu
Il faudrait essayer de déterminer si ton problème concerne le margin ou le padding de ta zone de formulaire, ou si c'est plutôt un problème de positionnement.

Peut être que tu pourrais essayer de vérifier ça en mettant des bordures à tes blocs, ça peut clarifier la situation ?
Y a du mieux : en mettant ces valeurs :


.ZoneMulticritere {
margin-top: 0px;
margin-left: 15px;
padding-top: 0px;
padding-left: 0px;
}



les champs se positionnent correctement dans Firefox mais toujours pas dans IE (décalage vers le bas de 20px environ).

Comment puis-je identifier le problème de positionnement ?
C'est bon j'ai trouvé ! J'ai créé une nouvelle classe que j'ai placée dans ma balise de formulaire et ça fonctionne.

<form action="" method="post" name="Form350conf" class="Formulaire">



.Formulaire {
margin: 0px;
padding: 0px;
}


merci Alphajet pour tes conseils qui m'ont permis de débloquer la situation. Smiley lol
Modifié par Luna (09 Aug 2005 - 10:37)
De rien Smiley smile , j'ai eu aussi à me battre avec la compatibilité entre les 2 navigateurs Smiley cligne . Dans le doute il vaut mieux toujours préciser les margin et padding
Hello, c'est encore moi ! Smiley confused

J'ai un problème similaire qui s'annonce...

Toujours dans ma partie de droite j'ai une zone qui comporte les 3 dernières news. Chacune de ces news sont dans un <div> individuel qui utilise la même class css.

Voici le code HTML :


<!-- Début du calque comportant les 3 dernières nouveautés -->
<div class="Zone3Nouveautes">

<!-- Début du calque nouveauté 1 -->
<div class="ZoneNouveaute">
<div><img src="dynamic/images/conferences/visuel_001.jpg" alt=""></div>
<div class="NouveauteTexte">Si les voitures roulaient à l'hydrogène</div>
</div>
<!-- Fin du calque nouveauté 1 -->
							 
<!-- Début du calque nouveauté 2 -->
<div class="ZoneNouveaute">
<div><img src="dynamic/images/conferences/visuel_001.jpg" alt=""></div>
<div class="NouveauteTexte">Les débuts de l'agriculture au néolithique</div>
</div>
<!-- Fin du calque nouveauté 2 -->
					
<!-- Début du calque nouveauté 3 -->
<div class="ZoneNouveaute">
<div><img src="dynamic/images/conferences/visuel_001.jpg" alt=""></div>
<div class="NouveauteTexte">Voyage aux pays des volcans : Italie, Grèce, Auvergne</div>
</div>
<!-- Fin du calque nouveauté 3 -->
				
</div>
<!-- Fin du calque comportant les 3 dernières nouveautés -->


et les styles css relatifs :


...
.Zone3Nouveautes {
padding: 0px;
margin-top: 5px;
}
.ZoneNouveaute {
width: 95px;
margin-left: 15px;
float: left;
}
.NouveauteTexte {
font-family: "Trebuchet MS", Arial;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
}
...


Comme toujours j'ai un problème d'affichage entre Firefox et IE. J'ai bien vérifier les margins et les paddings, rien y fait...

Sous Firefox les zones de news sont plus basses d'environ 80px que sous IE où l'affichage est niquel...

Si je donne une valeur négative de margin-top, très logiquement les <div> remontent sous IE et Firefox.

Quelqu'un aurait une solution ?
Hum... Quand je vois des margin-top: -575px;, pour reprendre la première question, je m'inquiète beaucoup du shéma de positionnement CSS adopté Smiley eek

Le patch en réponse à cette question ne rassure pas, puisque seul le symptôme est traité, mais problablement pas le problème réel.

Pour vérifier s'il n'y a pas un avalanche de choix de positionnement périlleux, et des solutions radicalement plus simples et plus fiables, l'url où on pourrait voir la page entière serait utile... Smiley cligne
les bouts de code que tu donnes en exemple ne permettent pas de voir ce qui ne va pas.
Mettre la page en ligne, svp, sur n'importe quel hébergement gratuit.
Sujet clos
Aller à