mise en page verticale formulaire

**donnadieujulien** · 26/01/2009, 15h17

Bonjour,

jen'arrive pas à centrer verticalement mon formulaire.
J'ai testé valign="middle" un peu partout (table,div,form...), mais sans résultats

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
	<head>
  		<title> </title>
  		<link rel="stylesheet" type="text/css" href="style_1.css">
 	</head>
 
 	<body background="images/foot.jpg" bgcolor=#6699cc link=#FFF0FF alink=#FF000F vlink=#a65B2a text=#FF0000>
 
		<div id="bandeau">
			<A align="center" HREF="envoi_id.html">Mot de passe oublié?</A> 
  			<A align="center" HREF="form_inscription.html">Inscrivez-vous!</A>
		</div>
 
		<div id="contenu">
			<form action="login.php" method='post'>
				<table border="8">
  					<tr>
    				<td>Nom d'utilisateur :</td>
    				<td><input type="text" name="login" maxlength="50"></td>
  					</tr>
  					<tr>
    				<td>Mot de passe :</td>
    				<td><input type="password"name="pass" maxlength="12"></td>
  					</tr>
  					<tr>
    				<td colspan="10"><input type="submit" value="Entrez sur le site"></td>
  					</tr>
				</table>
			</form> 
		</div>
 
		<div id="piedpage">
			<center><img src="images/apache_pb2_ani.gif"></center>
		</div> 
 
 
 	</body>
</html>

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
@CHARSET "ISO-8859-1";
 
html,body {
width:100%;
height:100%;
}
 
div{
	text-align:center;
	position: center;
}
div#bandeau {
	width:100%;
	height:5%;
	background-color:#00CCFF;
	}
div#contenu {
    /*left: 50%;
    top: 50%;*/
    width: 100%;
    height: 90%;
    background-color:#FFCC00;
 
	}
div#piedpage {
	width:100%;
	height:5%;
	background-color:#33FF99;
	}

Quelqu'un a t'il une piste?
merci d'avance

**donnadieujulien** · 26/01/2009, 16h33

Re,

j'ai trouvé un début de réponse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
form {
	margin-top:20%;
	margin-bottom:20%;
	width:28%;
	height:20%;
	font-family: arial, helvetica, sans-serif ;
	font-size: 14px ;
	color: black ;
	background-color: #46cFFF ;
 
}

J'ai maintenant un autre problème, c'est que dès que je change la résolution windows, le background n'est plus adapté au cadre du formulaire.
Aussi, l'image que j'ai mise en background n'est pas redimensionnée et afficher non pas "centrée" mais en mosaique...

Je me contenterai pour l'instant de la centrer, mais comment faire en la déclarant comme ca :

Code :

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

1
2
3
body{
	background-image:url(images/foot.jpg);
}

Merci

**HiRoN** · 26/01/2009, 17h27

Salut,

Pour le dernier point :
Via la propriété background-position ?

**donnadieujulien** · 26/01/2009, 17h39

J'ai résolu les pb, pour ceux que ca interessent :

pour l'image en mosaique en le chagement de résolution, j'ai choisit de la centrer :

Code :

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

background: #35484b url("../Images/foot.jpg") no-repeat center;

Et pour le formulaire, comme je l'ai fait dans un tableau, il suffit de faire un #... pour le tableau, et un autre pour le formulaire et le tour est joué.

Jusqu'à présent je ne gérais en CSS que le formulaire, pas le tableau!

Merci pour votre aide

mise en page verticale formulaire

HTML

Vue hybride

Discussions similaires

Partager

Partager