formulaire html /css

formulaire html /css - HTML/CSS - Programmation

Marsh Posté le 17-04-2008 à 16:16:35    

Bonjour a tous,
 
Voila j'ai un petit souci au niveau du design de mon site web. je m'explique:
 
J'ai une image de fond sur laquelle je souhaiterai venir positionner deux champs d'un formulaire à des endroits bien précis.
 
J'ai essayer avec le css et les balises "margin-top", etc mais le problème c'est que des que je bouge la taille de ma fenêtre internet, les champs des mon formulaires se déplace au lieu de rester sur la position initial de mon image.
 
En espérant avoir été assez clair merci pour l'aide que vous pourrez m'apporter

Reply

Marsh Posté le 17-04-2008 à 16:16:35   

Reply

Marsh Posté le 18-04-2008 à 18:33:26    

Alors, fais comme ca :
Si ton image fait 100 px de large sur 200px de haut :
et que l'endroit où tu veux faire afficher ton champ de formulaire est à 30px du haut de l'image et à 40px du coté gauche (pour le deuxieme champ de formulaire tu n'as qu'à faire pareil en ajoutant un autre input juste après le premier) :
<div style='position:relative;width:100px;height:200px;background-image:url(nom_image.jpg)'>
        <input type='text' style='position:absolute;top:30px;left:40px;'>
</div>

Reply

Marsh Posté le 20-04-2008 à 16:44:35    

Bonjour,
 
Alors d'abord merci pour votre réponse.
 
Le soucis c'est que je souhaiterai que l'image ne soit pas fixe par rapport a la page.
 
Je souhaiterai si cela est possible que mon image de fond et mon formulaire soit centré et que lorsque je bouge la taille de la fenêtre explorer,
que l'image et les champs se déplace.
 
Cela est-il possible?
Voici le code actuel:
 
<body background ="partage/images/index.jpg" style="background-repeat:no-repeat; background-position:208px 35px;">
 
<form name="login" method="POST" action="partage/accueil.php">
<input type="text" name="user" value="" style="margin-top:360px; margin-left:818px; width:90px; "><br>
<input type="password" name="password" value="" style="margin-top:43px; margin-left:820px; width:90px; "><br><br>
<input type="image" src="partage/images/join.jpg" name="image" style="margin-top:2px; margin-left:845px;" >
 </center></form>
 
Merci

Reply

Marsh Posté le 20-04-2008 à 21:27:05    

up svp

Reply

Marsh Posté le 01-05-2008 à 19:45:14    

Tu pourras centrer horizontalement en CSS, mais pas verticalement (du moins pas dans la version 2.1).
Une solution, du moins pour le centrage horizontale, consisterait à mettre ton formulaire avec des marges gauche et droite en auto dans un conteneur qui lui aurait ton image de fond. Les deux seraient ainsi solidarisés.
Pour le centrage vertical, à part utiliser des hacks qui te poseront inévitablement des problèmes à la prochaine version d'IE ou FF, pas de solution.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed