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

  1. #1
    Membre habitué
    Un div dans un code de quelques lignes, qui ne se centre pas.
    Salut

    Je voudrais savoir pourquoi mon div "parametres" ne se centre pas, merci.

    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
    18
    19
    20
    21
    22
    23
    24
    <DOCTYPE HTML>
    <HTML>
     
    <head>
    <meta charset="UTF-8">
     
    <title>PROFIL</title>
     
    <link rel="stylesheet" href="travail.css" />
     
    </head>
     
    <body>
     
    <div class="panneaux" id="pannel">
    	<div id="centreparams">
    		<div id="parametres">
    			blabla
    		</div>
    	</div>
    </div>
     
    </body>
    </HTML>

    Code CSS :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
    .panneaux
    {
    position:relatif;
    display:block;
    width:100%;
    height:100%;
    background-color:#A9FF44;
    }
     
    #pannel
    {
    background-color:white;
    }
     
    .param
    {
    position:relative;
    font-size:18px;
    padding:1px;
    }
     
    #parametres
    {
    position:relative;
    display:block;
    text-align:left;
    width:50%;
    background-color:#BBBBBB;
    }
     
    #centreparams
    {
    position:relative;
    display:block;
    text-align:center;
    background-color:#00FF00;
    width:100%;
    margin-top:40px;
    }

  2. #2
    Membre émérite
    Hello !

    Rajoutes un margin:0 auto; dessus.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    #parametres { position:relative; display:block; text-align:left; width:50%; background-color:#BBBBBB; margin:0 auto; }

    Pourquoi utiliser autant de position:relative ?
    Avec ça :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .panneaux { background-color:#A9FF44; }
    #pannel { background-color:white; }
    #parametres { text-align:left; width:50%; background-color:#BBBBBB; margin:0 auto; }
    #centreparams { text-align:center; background-color:#00FF00; margin-top:40px; }

    Tu obtiens normalement la même chose.
    Un div étant un élément de type block, tu n'as pas besoin de préciser display:block & width:100%, c'est son comportement par défaut.
    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

  3. #3
    Membre habitué
    Merci beaucoup Hiron, tu m'as sauvé

  4. #4
    Membre régulier
    salut,
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    margin:0 auto;

    parfois ça fonctionne pas, et notre div roule vers la gauche,
    c'est mieux utiliser:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    margin-left:25%;

    et c'est comme ça il fonctionne le framework bootstrap , les .col-xs-1 , col-xs-2 .... se sont rien que des margin-left: x%;
    pour le cas général pour centrer un div de taille width: x % :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    margin-left: y%;

    avec y=(100-x)/2
    dans notre cas y= (100-50)/2= 25%

  5. #5
    Membre habitué
    Merci pour la formule, ça va m'être très utile !!!

###raw>template_hook.ano_emploi###