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 vertical avec bootstrap [CSS 3]


Sujet :

Centrer un élément en CSS

  1. #1
    Membre à l'essai
    Inscrit en
    Juin 2010
    Messages
    39
    Détails du profil
    Informations forums :
    Inscription : Juin 2010
    Messages : 39
    Points : 24
    Points
    24
    Par défaut Centrage vertical avec bootstrap
    Bonjour à tous

    J'ai un intranet a refaire; c'est une mise en page tableau et je voudrais plus moderne et refaire entièrement le look.

    Pour me mâcher le travail j'ai retenu Bootstrap qui me parait excellent.

    Las, dès la page d’accueil et le login j'ai un souci de centrage vertical et je n'arrive pas à le résoudre: j'ai passé 3h hier et 2 h aujourd'hui en vain. Toutes les explication que j'ai trouvé sur internet renvoient à la propriété css 'vertical-align: middle', avec des variantes sur le display. J'ai essayé des dizaines de combinaisons rien ne fonctionne. J'ai essayé le 'margin:auto' aussi tout ce que j'obtiens c'est un centrage horizontal et mes éléments reste désespérément collés en haut.
    Voilà la page de test que j'utilise:
    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <!DOCTYPE html>
    <head>
    <meta name="viewport" content="user-scalable=no, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, width=device-width">
    <meta charset="utf-8">
    <title>Connexion</title>
    <link rel="stylesheet" href="http://localhost/e-fDemo/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="http://localhost/e-fDemo/css/global.css" type="text/css" />
    </head>
     
    <body>
    <div class="container">
    <div class="row" id="background">
      <div class="row" id="banner">
          <div class="span2">
      	<a href="http://www.tcl-ea.com" target="blank"><img src="http://localhost/e-fDemo/images/logos/logo_tcl.png" title="Déconnexion"></a>      
          </div>
      <div class="span2">
          <img src='http://localhost/e-fDemo/images/logo_une.png' id="logo_une">  </div>
      <div class="span4">
          <h1 id="siteName">e-F Demonstration - TCL</h1>  
      </div>
      <div class="span4" id="statusPanel">
          Non connecté : <a href="http://localhost/e-fDemo/index.php/accueil/login">Se connecter</a>  </div>
      </div>
        <div class="row">
            <div class="span12"> 
                <a href="http://localhost/e-fDemo/index.php/accueil/accueil_home">Accueil</a>  
            </div>
        </div>
        <div class="row">    
            <div class="span12">
                <h2 id="pageName">Connexion</h2>  
            </div>
        </div>
    </div><!-- fin background-->
    </div><!-- fin container -->
    </body>
    </html>
    Voici le global.css que j'ajoute à Bootstrap (nota j'ai recompilé Bootstrap pour avoir une largeur de span de 80 et donc une largeur totale de 1200, avec 10px de marge sur mon id #background
    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
    /* 
        Document   : global
        Created on : 30 mars 2013, 22:49:09
        Author     : jean
        Description:
            reprise des anciens id et class css utiles
    */
     
    #background{
        background-color: lightgreen;
        margin: 10px;
        padding: 10px;
        width: 1200px;
        height: 800px;
            /*(80*12)+(11*20)+(2*10) */
        border-radius: 10px 10px 10px 10px;
    }
     
    h1{
        font-size: 24px;
    }
     
    #banner{
        height: 100px;
    }
     
    #logo_une{
        display: table-cell;
        vertical-align: middle;
    }
    Comme vous pouvez le voir, j'ai fixé la hauteur de la banner à 100px, en me disant que j'arriverais mieux à positionner; ça n'a rien changer.
    Ensuite, j'ai un logo variable, il peut être en format horizontal ou vertical. Je calibrerais mes logos pour qu'ils prennent toute la hauteur.
    Cela se gâte après avec le logo_une qui a une hauteur de 35px et une longueur de 166.
    Et puis toute la suite bien sur (titre h1, informations de connexion qui devient une table quand on est connecté).
    Le seul moyen que j'ai trouvé pour positionner mes éléments c'est de leur coller un margin-top. Cela ne me satisfait pas car il va falloir que je calcule chaque fois que je rencontrerais le problème ça va me pourrir la vie tout au long du projet, et puis j'aimerais comprendre.
    Car si je regarde les propriété css de la balise img du Bootstrap noous avons:
    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
    img {
      /* Responsive images (ensure images don't scale beyond their parents) */
     
      max-width: 100%;
      /* Part 1: Set a maxium relative to the parent */
     
      width: auto\9;
      /* IE7-8 need help adjusting responsive images */
     
      height: auto;
      /* Part 2: Scale the height according to the width, otherwise you get stretching */
     
      vertical-align: middle;
      border: 0;
      -ms-interpolation-mode: bicubic;
    }
    Pourquoi ça ne fonctionne pas non plus?
    Merci de votre aide je désespère là.

  2. #2
    Membre à l'essai
    Inscrit en
    Juin 2010
    Messages
    39
    Détails du profil
    Informations forums :
    Inscription : Juin 2010
    Messages : 39
    Points : 24
    Points
    24
    Par défaut
    Grâce au lien posté sur l'autre post j'ai trouvé:
    Il faut que le container englobant ait la propriété line-height fixée pour que le vertical-align fonctionne
    Ainsi avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    #banner{
        height: 100px;
        line-height:100px;
        background-color: green;
    }
    Cela fonctionne!! Mais grrrr pas pour IE7.

  3. #3
    Membre régulier
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Mars 2009
    Messages
    113
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mars 2009
    Messages : 113
    Points : 82
    Points
    82
    Par défaut Rires stataniques
    Merci du tuyau.

    Alalala, je compatis avec ta frustration/colère/déception.
    Mais méfie toi, la colère mène au coté obscur. C'est d'ailleurs, ce qui a donné naissance à IE.

    J'ai arrêter de m'accrocher à l’espoir -vain- qu'IE fera du HTML w3c et pas du HTML IE inside.
    IE 7, tout comme IE8 et son mode Skirks, ou son mode de compatibilité IE7, c'est dire, IE 8 est compatible avec IE5.5.
    HAHAHA, la bonne tranche de rigolade !

    Genre je suis compatible avec moi même.

    A ce compte là, Alain Delon est compatible avec IE, mais ça personne ne le dit, parce que personne ne parle d'Alain Delon.
    Alain Delon est partout.
    Comme IE.


    Non, tu vois, j'ai arrêté IE depuis IE9. Depuis ma femme est revenue, j'ai retrouvé l'appétit, et je n'ai plus de problème de peau.

    Bref, en intranet je lance Chrome depuis la page IE. Mes tests se font sur Chrome, FireFox, Opéra et tout est nickel à chaque fois.
    Pour avoir galérer, comme toi, des journées entières à comprendre pourquoi mon site fonctionnait nickel sous FF et Chrome et pas sous IE, j'affirme que c'est du foutage de gueule.

    De plus aujourd'hui, de moins en moins de personnes utilisent IE à la maison, et je précise sur la page d'accueil d'un site, que le site est optimisé pour tous les autres navigateurs et IE à partir de la version 11.

    C'est à IE de traduire et d’interpréter le code (s'il est conforme aux recommandations établies W3C par ex), et pas à moi de trouver un moyen pour que IE comprenne et interprètent les instructions qui fonctionnent parfaitement sous les autres navigateurs.

    Qu'ils fassent leur job, moi le miens et les kangourous seront bien gardés.

    Ou alors, et là, faudrait qu'on en parle à Bill, Microsoft nous paye pour faire le boulot et là je dirais rien.


    Allo Bill ?

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

Discussions similaires

  1. Layout vertical avec centrage
    Par trax44 dans le forum AWT/Swing
    Réponses: 4
    Dernier message: 11/04/2007, 19h40
  2. Réponses: 13
    Dernier message: 16/08/2006, 10h06
  3. [HTML] Centrage vertical d'un div
    Par LE NEINDRE dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 25/08/2005, 18h31
  4. [CSS] Problème de centrage vertical
    Par ZeImp dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 20/07/2005, 01h04
  5. Centrage vertical de cellule : est-ce possible ?
    Par kikidrome dans le forum SAP Crystal Reports
    Réponses: 3
    Dernier message: 13/06/2005, 12h13

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