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 :

Décalage vertical inexpliqué sur un div inline-block


Sujet :

CSS

  1. #1
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    757
    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 : 757
    Points : 572
    Points
    572
    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 : 594
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 !
    OS : LinuxMint 20

  2. #2
    Membre chevronné

    Homme Profil pro
    Ingénieur Hospitalier
    Inscrit en
    Juillet 2004
    Messages
    993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur Hospitalier
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 993
    Points : 1 768
    Points
    1 768
    Billets dans le blog
    1
    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
    757
    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 : 757
    Points : 572
    Points
    572
    Par défaut
    Ah ben c'est carrément ça !

    Merci beaucoup
    OS : LinuxMint 20

  4. #4
    Invité
    Invité(e)
    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.

  5. #5
    Membre confirmé
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2008
    Messages
    757
    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 : 757
    Points : 572
    Points
    572
    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 !
    OS : LinuxMint 20

+ 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 & Base de données
    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