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é

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 205
    Points : 145
    Points
    145
    Par défaut 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 Avatar de HiRoN
    Homme Profil pro
    Développeur Web
    Inscrit en
    août 2007
    Messages
    2 034
    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 034
    Points : 2 588
    Points
    2 588
    Par défaut
    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é

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 205
    Points : 145
    Points
    145
    Par défaut
    Merci beaucoup Hiron, tu m'as sauvé

  4. #4
    Membre régulier Avatar de abdennour bouaicha
    Homme Profil pro
    Développeur Java
    Inscrit en
    avril 2009
    Messages
    87
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur Java

    Informations forums :
    Inscription : avril 2009
    Messages : 87
    Points : 93
    Points
    93
    Par défaut
    salut,
    parfois ça fonctionne pas, et notre div roule vers la gauche,
    c'est mieux utiliser:
    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 % :
    avec y=(100-x)/2
    dans notre cas y= (100-50)/2= 25%

  5. #5
    Membre habitué

    Homme Profil pro
    sans
    Inscrit en
    octobre 2019
    Messages
    205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ariège (Midi Pyrénées)

    Informations professionnelles :
    Activité : sans

    Informations forums :
    Inscription : octobre 2019
    Messages : 205
    Points : 145
    Points
    145
    Par défaut
    Merci pour la formule, ça va m'être très utile !!!

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

Discussions similaires

  1. Warning dans un code de 5 lignes
    Par pedro570 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 23/04/2013, 12h04
  2. la tag table dans la page de mon iframe qui ne s'affiche pas sous IE
    Par witch dans le forum Balisage (X)HTML et validation W3C
    Réponses: 0
    Dernier message: 20/01/2008, 16h44
  3. Réponses: 3
    Dernier message: 12/05/2007, 19h24
  4. Réponses: 1
    Dernier message: 15/04/2007, 21h09
  5. Balise div dans le code .NET
    Par the big ben 5 dans le forum Delphi .NET
    Réponses: 1
    Dernier message: 26/04/2006, 18h35

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