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">

mettre un formulaire au centre d'une page web

CSS

Vue hybride

Discussions similaires

Partager

Partager