2 pièce(s) jointe(s)
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:
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:
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 :
Pièce jointe 326741
Et si j'agrandis la largeur de la balise article :
Pièce jointe 326742
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,
