Discussion :

[yesil08]

bonjour,

j'ai un formulaire dans ma page web que j'ai mis dans une balise <div> pour pouvoir le deplacer voici le code HTML et le code CSS :

HTML :

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
<div id="formul">
<form action="index.php" method="post">
<p>
    Pseudo :
     <input type="text" name="nom" id="nom" />
	<br />  
	Mot de passe : <input type="password" name="mdp" id="mdp" />
	<br />
	<input type="submit" name="Identifier" id="Identifier"      value="S'identifier"/>
</p>	
 
</form>
</div>

code CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
#formul {
	position:absolute;
	width:150px;
	height:200px;
	z-index:1;
	left: 220px;
	top: 310px;
}

quand la fenêtre est agrandie , tout est nikel, mais si je réduis la taille de la fenêtre du navigateur web, le formulaire se décale avec, et j'ai un bazar dans ma page.

sans parler que si je change de navigateur ça ne donne pas le même résultat.

une solution SVP ?

merci.

[HiRoN]

Bonjour,
Je pense que tu ne pars pas d'un bon pied pour faire un formulaire facilement modifiable et compatible tous navigateurs... Le mieu serait sûrement de faire un tour ici...

[yesil08]

merci pour le lien , mais ça ne résout pas mon problème. j'ai des difficulté a positionner mon formulaire là ou je veux, est ce possible de m'aider SVP. merci .

[12monkeys]

Bonsoir

Une position absolue ce n'est pas toujours forcément l'idéal, tout dépend du contexte...

Mais je supposes que tu as des difficultés à positionner ton formulaire par rapport au reste de ta page ? Alors l'ensemble de ton code html + css sera nécessaire, voir une page en ligne...

[sibile]

Si il y a le bazar sur ta page c' est à cause de la position absolue.

Tu devrais plutôt utiliser margin-top et margin-left pour positionner ton formulaire.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#formul {
	width:150px;
	height:200px;
	margin-left: 220px;
	margin-top: 310px;
}