IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

mise en page verticale formulaire


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de donnadieujulien
    Développeur informatique
    Inscrit en
    Avril 2008
    Messages
    433
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 433
    Par défaut mise en page verticale formulaire
    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

  2. #2
    Membre éclairé Avatar de donnadieujulien
    Développeur informatique
    Inscrit en
    Avril 2008
    Messages
    433
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 433
    Par défaut début de réponse
    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

  3. #3
    Membre Expert Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2007
    Messages
    2 035
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Var (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Août 2007
    Messages : 2 035
    Par défaut
    Salut,

    Pour le dernier point :
    Via la propriété background-position ?
    Pensez à utiliser les ressources disponibles en Dev. Web :
    (x)HTML : Cours (X)HTML / FAQ (X)HTML
    CSS : Cours CSS / FAQ CSS / Galerie CSS
    Javascript : Cours / FAQ / Sources
    Mon site : Développeur Web Freelance

  4. #4
    Membre éclairé Avatar de donnadieujulien
    Développeur informatique
    Inscrit en
    Avril 2008
    Messages
    433
    Détails du profil
    Informations personnelles :
    Âge : 40

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 433
    Par défaut ok
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [ZF 1.8] Mise en page de formulaire
    Par abdelhadi008 dans le forum Zend_Form
    Réponses: 1
    Dernier message: 10/08/2009, 15h16
  2. [HTML] mise en page de formulaire
    Par sambzh24 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 07/02/2008, 16h04
  3. problème de mise en page de formulaire (débutante)
    Par emmablue dans le forum Access
    Réponses: 2
    Dernier message: 21/07/2006, 12h26
  4. mise en page formulaire
    Par PAUL87 dans le forum Access
    Réponses: 1
    Dernier message: 23/09/2005, 09h32
  5. [CR.NET] mise en page Verticale et horizontale
    Par HULK dans le forum SAP Crystal Reports
    Réponses: 5
    Dernier message: 11/01/2005, 12h21

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo