1. #1
    Futur Membre du Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 5
    Points : 5
    Points
    5

    Par défaut Alignement balise en display: inline-block

    Bonsoir,

    Mon problème c'est que si j'utilise 3 textes différents, les blocs se comportent font un effet escalier ( ci joint photo ) alors que si j'utilise 3 textes identiques les blocs s'alignent parfaitement.

    Voici Mon HTML

    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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    	<html>
    		<head>
     
    			<title>Mon CV</title>
    			<meta charset="utf-8">
    			<link rel="stylesheet" type="text/css" href="style.css">
     
    		</head>
    <body>
    	<header>
     
    		<div id="photo">
    			<a href="images/profil.jpg"><img src="images/profil_mini.jpg" class="imageflottante" alt="ma photo" title="Clique ici" /></a>
    				<h1>Thomas Bourdin</h1>
    					<p>Comme le dit souvent ma copine cocaïnomane : tire un trait, tu y verras plus clair.</p>
    						</div>
     
    	</header>
     
    <section>
     
    <div class="conteneur">
     
    	<div id="liseret">
    		</div>
     
    <article>
     
    		<h3 class="exp">Experiences professionnelles</h3>
     
    <ul>
    	<li>Mise en œuvre des instructions fournies par des consultants pour assurer les soins appropries aux patients.</li><br />
    	<li>Collaboration avec les consultations du personnel afin d’identifier et de repondre a diverses questions.</li><br />
    	<li>Remplir et modifier les ordonnances des patients selon les directives.</li>
    </ul>
    </article>
     
    <article>
     
    			<h3 class="qua">Qualifications et competences</h3>
     
    <ul>
    	<li>Bonne experience des soins aux patients en general et des conditions medicales courantes.</li><br />
    	<li>Bonne connaissance des politiques et des procedures sur la facon de traiter les plaintes des patients.</li><br />
    	<li>Aptitude a remplir les ordonnances des patients.</li>
    </ul>
    </article>
     
    <article>
     
    <h3 class="for">Formation et diplome</h3>
     
    <ul>
    	<li>Universite Paris VIII : Diplome de medecine avec une option en pharmacologie obtenu en 2008.</li>
    </ul>
     
    </article>
     
     
    			</div>
    		</section>
    	</body>
    </html>

    mon 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
    34
    35
    36
    37
    38
    39
    40
    p, h1
    {
    	text-align: center;
    }
     
    h3
    {
    	color: maroon;
    	border-bottom: 2px black solid;
    }
     
    body
    {
    	background-image: url("images/fondeffet.jpg");
    }
     
     
    .imageflottante
    {
    	box-shadow: 6px 6px 0px silver;
    }
     
    #photo a
    {
        width: 190px;
       float: right;
    }
     
    article
    {	
    	border: 2px black solid;
    	display: inline-block;
    	width: 250px;
     
    }
     
    .conteneur
    {
    	border: 2px black solid;
    }
    Et voilà ce que ça donne en image :

    Nom : 1.jpg
Affichages : 43
Taille : 152,4 Ko

    Et si j'agrandis la largeur de la balise article :

    Nom : 2.jpg
Affichages : 39
Taille : 137,2 Ko

    Avec position relative je pourrais faire en sorte de le changer de place ou alors lui mettre <div class> mais j'en suis sur que je merde quelques part ^^

    Mais je ne comprends toujours pas pourquoi quand je réduis/augmente la balise article, elle fait cette effet escalier..

    Merci
    Bonne soirée,

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    6 469
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 6 469
    Points : 10 370
    Points
    10 370

    Par défaut

    Vous avez oublié d'indiquer le résultat que vous souhaitez obtenir.

    Essayez déjà d'ajouter cette règle, cela rendra les blocs un peu plus homogènes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .conteneur
    {
        display : flex;
    }
    Je précise que je suis débutant en CSS et que je me limite à quelques bricolages visuels donc n'hésitez pas à oublier ma réponse si quelqu'un arrive avec des meilleurs conseils de construction du code CSS.

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 397
    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 397
    Points : 20 761
    Points
    20 761

    Par défaut

    Bonjour,

    Une solution :

    1- supprime
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="liseret"></div>
    Ou mets-le avant <div class="conteneur">

    2- CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .conteneur {
     display:table; /* se comporte comme une table */
     width:100%;
    }
    .conteneur > article {
     display:table-cell; /* se comporte comme une cellule de table */
     width:33.33%;
    vertical-align:top;
    }
    3- et pour répondre à ta question :
    Les éléments en inline-block ont un double comportement :
    • ils s'alignent par le bas (comme les éléments inline),
    • tout en formant un "bloc" (comme les éléments block)

    Si tu avais remplacé par float:left, ils se seraient alignés par le haut...
    Mais seraient "sortis du flux".
    Ceci est une autre histoire....
    "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

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Debutant
    Inscrit en
    novembre 2017
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Debutant

    Informations forums :
    Inscription : novembre 2017
    Messages : 5
    Points : 5
    Points
    5

    Par défaut

    Salut,

    J'ai trouvé grâce à votre aide ^^

    Voici mon 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
    article
    {	
     
    	display: inline-block;
    	vertical-align: top;
    	width: 350px;
    	padding-left: 2em;
    }
     
    .conteneur
    {
    	display: flex;
     
    }
    J'ai rajouté un display: flex; au parent et un vertical-align: top; et la magie fait son effet

    Merci à tous les deux

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

Discussions similaires

  1. [CSS 2] Equivalent de display: inline-block
    Par julie90 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 07/01/2011, 15h48
  2. display:inline-block; Problème avec Netscape navigator
    Par mehdi_scofield dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/11/2008, 17h44
  3. Problème avec display:inline
    Par SALISTASE dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 10/04/2008, 12h25
  4. Problèmes avec display:inline-block
    Par NewbiePower dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 30/10/2007, 12h34
  5. utilisation de display:inline-block
    Par CUCARACHA dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 06/08/2007, 16h21

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