28172 sujets

CSS et mise en forme, CSS3

[resolu]Probleme qui survient lors d'un changement de resolution.

Bonjour , j'ai un petit problème qui ne doit pas être bien compliqué à résoudre cependant j'ai écumé google sans trouvé la réponse donc je m'en remet à vos avis.

le probleme est : je travaille en 1920/1080 et je visualise mon site en 1280/1024 donc en 1280/1024 tout allait bien mes champs été à la bonne place quand je décide de voir ce que sa donne sur le grand écran et là ! déception suivant la résolution mes champs se baladent en dehors de la div qui les contiennent.
Help comment résoudre se problème Smiley decu 

body
{
	background:white url("../img/background2.png") repeat-x   center center; 
	margin:auto;
 }
#formAjoutModifi
{
	width: 100%;
}
#contenu 
{
	
	width:800px;
	padding-top:20px;
	background:204,204,204 ;
	float : left;
	margin-left : 60px;
	
	
}
#formAjoutModifi fieldset
{
	
	border: #868787 1px solid;
}
#formAjoutModifi p
{
	margin: 2px 0;
}
#formAjoutModifi label
{	
	padding-right: 1%;
	text-align: left;
	letter-spacing: 1px;
}

#formAjoutModifi input[type=text], #formAjoutModifi select 
{
	margin-left: 1%;
	width: 15%;
	border: #CCC 1px solid;
	text-align: left;
	margin-right: 200px;
	position : absolute;
}





echo '<form id="formAjoutModifi" action="index.php?page=vehiculeCarteGriseModif&vehicule='.$monVehicule.'" method="post" >';
		echo'<fieldset>';
		echo'<H4>Modification de la carte grise du vehicule immatriculé : '.$monVehicule.'</H4>';
		echo '	<input type="hidden" name=modifierCG value=true/>';
		echo '		<p><label>Date :</label><input type="text" id="text" name="date" size="20" value='.$CG["date"].'></p>';
		echo '		<p><label>Numéro :</label><input type="text" id="text" name="num" size="20" value='.$CG["num"].'></p>';
		echo '		<p><label>Type, variante (si disponnible) ,version (si disponnible) :</label><input type="text" id="text" name="type_D2" size="20" value='.$CG["type_D2"].'></p>';
		echo '		<p><label>Numéro identification du vehicule  :</label><input type="text" id="text" name="numIdVeh_E" size="20" value='.$CG["numIdVeh_E"].'></p>';
		echo '		<p><label>Masse en charge maximale admissible du vehicule en service  :</label><input type="text" id="text" name="masseMax_F2" size="20" value='.$CG["masseMax_F2"].'></p>';
		echo '		<p><label>Masse du véhicule en service avec carrosserie et dispositif d\'attelage :</label><input type="text" id="text" name="masseMaxMoteur_G" size="20" value='.$CG["masseMaxMoteur_G"].'></p>';
		echo '		<p><label>Poids vide national :</label><input type="text" id="text" name="poidsVide_G1" size="20" value='.$CG["poidsVide_G1"].'></p>';
		echo '		<p><label>Carrosserie (CE) :</label><input type="text" id="text" name="carrosserie_J3" size="20" value='.$CG["carrosserie_J3"].'></p>';
		echo '		<p><label>Puissance administrative nationale :</label><input type="text" id="text" name="puissance_P6" size="20" value='.$CG["puissance_P6"].'></p>';
		echo '		<p><label>Nombre de places :</label><input type="text" id="text" name="nbPlaces_S2" size="20" value='.$CG["nbPlaces_S2"].'>';
		echo '		<p><label>Niveau sonore à l\'arrêt [en dB(A)] :</label><input type="text" id="text" name="niveauSonore_U1" size="20" value='.$CG["niveauSonore_U1"].'></p>';
		echo '		<p><label>Vitesse du moteur en (min-1) :</label><input type="text" id="text" name="vitesseMoteur_U2" size="20" value='.$CG["vitesseMoteur_U2"].'></p>';
		echo '		<bouton><input type=submit name=Valider value=Valider></bouton>';
		echo'</fieldset>';
		echo '</form>';

Modifié par Su4p (25 Jan 2010 - 15:28)
Je crois que ton problème vient du fait que tu as une largeur en pourcentage pour tes champs de texte et une position absolue qui ne sert à rien. Avec la position absolue, le champs de texte ne se réfère plus au parent ( <p> dans ton cas ) pour utilisé son 15% mais plutôt au body, puisque tu n'as aucune position:relative sur un de tes éléments. Donc c'est normal que plus la dimension de la page de ton navigateur est large, plus les champs de texte le sont aussi et par conséquent ça déborde sur ton conteneur qui a une largeur fixe ( 800px ).

Soit tu retires la position absolue de tes champs de texte, soit tu mets une position:relative à ton <form>. Idéalement, tu devrais retirer le positionnement absolu puisqu'il sert à rien dans ton cas.

Si ça ne règle pas ton problème, je ne vois pas quel est le problème Smiley smile
je l'ai rajouté quand j'ai essayé de trouver la solution à mon problème cela ne la pas résolu et sans j'ai le même problème Smiley decu
As-tu un URL de ton site ?

Sinon, je suis persuadé que c'est la largeur en pourcentage de tes champs de texte. Puisque tu as un conteneur avec une largeur fixe de 800 pixels, tu pourrais très bien mettre une largeur fixe pour tes champs aussi.

C'est peut-être pas lié au code que tu as envoyé aussi, d'où la nécessité du URL si c'est possible Smiley smile
le site est situé sur un intranet, cependant j'ai réussi ! en mettant
#formAjoutModifi p
{
margin: 2px ;

position:relative;
}

je suis pas doué en css même en faisant ça je ne sais pas pourquoi ça a marché !! Smiley eek
Sujet clos
Aller à