mettre un formulaire au centre d'une page web

**fattouch_squall** · 01/12/2007, 19h50

j'ai un petit souci, j'ai créer un petit fomulaire d'identification (login et mot de passe) que je veux le mettre au centre de la page web. comment je peux réaliser ça?

**Kerod** · 01/12/2007, 21h50

En utilisant du CSS et les propriétés d'alignement et de marge.

Mais pour le moment, montre ton code pour qu'on voit ce qu'il manque

**fattouch_squall** · 02/12/2007, 10h00

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
 <title>Mise en forme d'un formulaire</title>
 <style type="text/css">
 fieldset {
     width: 300px;
     }
 div.left {
     width: 50%;
     float: left;
     }
 div.left p {
     text-align: right;
     margin-right: 30px;
     }
 div.right {
     width: 50%;
     float: left;
     }
 </style>
</head>
 
<body>
    <form name="authentification" method="post" action="test.php">
 <fieldset>
     <legend>Identification Routeur</legend>
     <div class="left">
   <p><label for="input1">Nom&nbsp;:</label></p>
   <p><label for="input2">Mot de passe&nbsp;:</label></p>
     </div>
 
     <div class="right">
   <p><input type="text" id="input1" name="nom" /></p>
   <p><input type="password" id="input2" name="pass" /></p>
   <p><input type="submit" name="connect" value="se connecter" /></p>
     </div>
 </fieldset>
    </form>
    </body>
	<script language="javascript">
document.authentification.nom.focus();
</script>
</html>

comment je peut mettre ce formulaire dans le centre d'une page web.

**Bisûnûrs** · 02/12/2007, 10h08

Tu veux le centrer horizontalement et verticalement ou juste horizontalement ?

**fattouch_squall** · 02/12/2007, 10h11

Je veux centrer mon formulaire d'identification horizontalement et verticalement.

**Bisûnûrs** · 02/12/2007, 10h17

Dans ce cas-là, essaie comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
#monForm {
   position:absolute;
   top:50%;
   left:50%;
   width:300px; /* A toi de donner la bonne largeur */
   height:200px; /* A toi de donner la bonne hauteur */
   margin-left:-150px; /* -largeur/2 */
   margin-top:-100px; /* -hauteur/2 */
   background:red;
}

Code html :

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

<form .. id="monForm">

**fattouch_squall** · 02/12/2007, 10h21

merci c'est bon c'est regler mais j'ai du supprimer le background car il ne coincide pas exactement avec le formulaire.

**Bisûnûrs** · 02/12/2007, 10h35

Le background n'était là que pour te montrer le positionnement réel du formulaire.

Si tu m'avais dit que tu aimais et que tu l'avais laissé, je me serais posé des questions sur tes goûts.

**fattouch_squall** · 02/12/2007, 10h37

merci, je te suis reconnaissant comme même (arigato en japonais)

mettre un formulaire au centre d'une page web

CSS

Discussions similaires

Partager

Partager