1. #1
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    743
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 743
    Points : 564
    Points
    564

    Par défaut Décalage vertical inexpliqué sur un div inline-block

    Bonjour,

    Je rencontre un problème que n'arrive pas à m'expliquer même en examinant l'élément.

    Deux sont divs placés horizontalement par "display : inline-block" (donc un est à gauche et l'autre se situe à droite !).

    Je rencontre un décalage vertical inexpliqué sur le div de gauche quie est descendu de plusieurs centimètres !!!

    Voici une copie d'écran qui vous permettra de mieux cerner mon problème ainsi que le html et css.

    Nom : decalage_horizontal_divs.png
Affichages : 28
Taille : 10,6 Ko

    html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <div id="general_body">
    	<div id="produits_gauche">
    	<div style="font-size:2vw;">Liste</div>
     
    	<!-- Les données sont dans datas.js -->
    	<ul ng-repeat="photo in liste_photos">
    		<li><a href="{{photo.path}}">{{photo.titre}}</a></li>
    	</ul>
    	</div>
     
    	<div id="produits_droit">droit</div>
    </div>
    CSS :
    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
    #main_ui-view {
    	padding-left: 5px;
    	padding-right: 5px;
    }
    #produits_gauche {
    	height: 90%;
    	width: 20%;
    	display: inline-block;
    	padding: 5px;
    	color: #988344;
    	border-radius: 5px;
    	border: 1px solid #fffad7;
    }
    #produits_gauche > ul > li > a {
    	color: #fffad7;
    }
    #produits_gauche > ul > li > a:focus,
    #produits_gauche > ul > li > a:active {
    	color: #988344;
    }
    #produits_gauche > ul > li > a:hover {
    	color: #c90016;
    }
    #produits_droit {
    	height: 90%;
    	width: 79%;
    	display: inline-block;
    	padding: 5px;
    	color: #988344;
    	border-radius: 5px;
    	border: 1px solid #fffad7;
    	margin-left: 0px;
    }
    Merci de bien vouloir m'aider !

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur multimédia
    Inscrit en
    juillet 2004
    Messages
    677
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur multimédia
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juillet 2004
    Messages : 677
    Points : 1 127
    Points
    1 127

    Par défaut

    Peut être un petit vertical align pour ta DIV droite pourrait arrangé le truc :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
     
    #produits_droit {
    	height: 90%;
    	width: 74%;
    	display: inline-block;
    	padding: 5px;
    	color: #988344;
    	border-radius: 5px;
    	border: 1px solid #fffad7;
    	margin-left: 0px;
            margin-top:0px;
            vertical-align: top;
    }

  3. #3
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    743
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 743
    Points : 564
    Points
    564

    Par défaut

    Ah ben c'est carrément ça !

    Merci beaucoup

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    Bonjour,

    1- aucun mystère : par défaut, les inline-block s'alignent par le bas.

    2- ce n'est pas comme ça qu'on fait une mise en page.

    Regarde plutôt : display:flex ou display:table.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    février 2008
    Messages
    743
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : février 2008
    Messages : 743
    Points : 564
    Points
    564

    Par défaut

    Bonjour,

    Les display: flex et table disposent les div l'un en dessous de l'autre. Avec flex, je retrouve les liste à l'horizontale.

    Merci !

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

Discussions similaires

  1. Centrage vertical dans une DIV en inline-block
    Par comode dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 17/12/2015, 21h09
  2. Display inline-block + Word-spacing sur SAFARI
    Par Iwebu dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 28/04/2015, 21h17
  3. [CSS 3] Hauteur 100% non fonctionnelle pour un div en inline-block
    Par vmonteco dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/07/2014, 13h59
  4. Décalage vertical sur pages connexion
    Par Allegro dans le forum PHP & SGBD
    Réponses: 5
    Dernier message: 18/03/2013, 09h21
  5. Décalage VERTICAL sur un tableau avec IE6
    Par Msieurduss dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 29/01/2009, 20h29

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