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

Mise en page CSS Discussion :

Centrage et cadrage div complexe


Sujet :

Centrer un élément en CSS

  1. #1
    Membre averti
    Inscrit en
    Décembre 2009
    Messages
    37
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 37
    Par défaut Centrage et cadrage div complexe
    Bonjour,


    je n'arrive pas à centrer verticalement et horizontalement une div.

    j'ai essayé plein de chose mais ça bouge pas ....

    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
    43
    44
    html, body { margin:0; padding:10px; font:normal 100%/1.5em "Segoe UI", verdana, helvetica, arial,sans-serif; text-align:justify; vertical-align:central }
    form        {
    	clear: both;
    	overflow: hidden;
    	margin: 0 auto 2em;
    	padding: 6px;
    	width: 450px;
    	border: none;
    	-moz-border-radius: 11px;
    	-khtml-border-radius: 11px;
    	-webkit-border-radius: 11px;
    	border-radius: 11px;
    	color: #000000;
    	font: normal 100% "Segoe UI", verdana, helvetica, arial,sans-serif;
    	-moz-box-shadow: #666 0 0 18px;
    	-webkit-box-shadow: #666 0 0 18px;
    	-khtml-box-shadow: #666 0 0 18px;
    	box-shadow: #666 0 0 18px;
    	background-color: #FFFFFF;
    	top: 120px;  	   
    }
     
    form label  {
    	display: block;
    	margin: 0;
    	padding: 0;
    	font: bold 120% georgia, serif;
    	color: #333333;
    	text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    }
    form em     { display:block; margin:.3em auto; background:transparent; color:#999999; text-align:center; font-weight:bold; clear:both; }
    form input,
    form button { margin:.3em 0; padding:3px 5px; border: 1px solid #e5e5e5; -moz-border-radius:5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font:bold 100% "Segoe UI", verdana, helvetica, arial,sans-serif; text-align:center;  text-shadow:0 1px 0 rgba(0,0,0,0.25);}
    form input  { float:left; width:330px; background:#fff; color:#666; font-weight:normal; }
    form button {
    	float: right;
    	width: 100px;
    	color: #fff;
    	cursor: pointer;
    	background-color: #999999;
    }
    form button:hover {
    	background-color: #CCCCCC;
    }
    Code html : 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
    <body>
    <form>
    <div>
    <label for="datelb">entrer la date ici </label>
    <input id="dateEvt" type="dateEvt" name="dateEvt" placeholder="ex : 11/12/2013 12:12 " required autofocus> </BR></BR>
    <select id="SelImg">
      <option value="Noël">Noël</option>
      <option value="Les Vacances"> Les Vacances</option>
      <option value="anniversaire">Anniversaire</option>
      <option value="cadeau">Cadeau</option>
    </select>
     
    <button type="submit">envoyer</button>
    </div>
    </form>
     
    </body>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 212
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 212
    Par défaut
    Bonjour,
    il est bon de commencer par lire la

    positionnement

  3. #3
    Membre chevronné
    Profil pro
    Chef Gérant
    Inscrit en
    Octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2005
    Messages : 230
    Par défaut
    Bonsoir,

    vertical-align:central; n'existe pas , c'est top, bottom, baseline, middle, XXunitéDeValeur, ... mais pas central

    Comment s'applique un vertical-align ?
    1) pour du texte ou des element en ligne, il se regle sur le line-height si indiqué ou par rapport aux autre elements sur la même ligne.
    2) sur une cellule de tableau, ou un element formate comme tel , en centrant verticlement le contenu , si la hauteur de la cellule(ou element en display:table-cell dans le flux) est supérieur a celle du contenu.

    Tu as donc 2 choix:
    1) passer ton form en boite en ligne et la centré a coté d'un autre element en ligne d'au moins la hauteur de l’écran

    2) formater html et body comme un tableau d'une cellule.

    sinon , la vielle méthode brutale du positionnement absolu et des marges négatives.

  4. #4
    Membre averti
    Inscrit en
    Décembre 2009
    Messages
    37
    Détails du profil
    Informations forums :
    Inscription : Décembre 2009
    Messages : 37
    Par défaut
    Merci du coup j'ai mis un absolute
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    position:absolute;
      top: 40%;
      left: 20%;

    c'est pas mal mais ca suit pas parfaitement la taille de la fenêtre lors de son resize.

    Merci

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

Discussions similaires

  1. Problème cadrage div avec CSS
    Par hargathor dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 13/07/2007, 13h47
  2. Centrage en hauteur <div>
    Par LDDL dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 01/06/2007, 08h11
  3. Centrage d'éléments DIV ayant position:absolute;
    Par Steph4fun dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 14/05/2007, 08h41
  4. [css] Centrage de tableaux div et span
    Par HurtMarley dans le forum Mise en page CSS
    Réponses: 16
    Dernier message: 11/08/2006, 13h32
  5. [HTML & CSS]Centrage d'un div
    Par jowo dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 25/04/2006, 10h38

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