La taille de ma div augmente lorsqu'un nouveau élément est rajouté

**baldeadama** · 26/11/2014, 17h08

Bonjour;

voila, j ai un petit souci avec le css.

voir le code:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<section>
    <div id="zone_affichage"></div>
    <div id="zone_affichage1"></div>
</section>

;

Dans le div 'zone_affichage', j affiche la liste d' amis, les commentaires etc....;
sauf que à chaque affichage de ces elements, la section varie en taille i.e que la taille de la section augmente ou dimunue selon l' element à afficher. je veux donc eviter ce desagrement.

voici mon code css:

Code css :

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
section{
    border: 0px solid transparent;
    margin-left: 5%;
    margin-right: 15%;
    /*padding-bottom: 82%;*/
    background-color: blue;
    height: 1310px;
};
body, html{
    height: 400px;
    /*background-color: #FFFFFF;*/
    border: 0px solid transparent;
    font-size: 1em; /* Ideal: 16px */
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100em;
}

voici quelque capture d' ecrans:

Nom : img1.png
Affichages : 167
Taille : 21,6 Ko

Nom : img2.png
Affichages : 161
Taille : 22,9 Ko

**NoSmoking** · 26/11/2014, 22h18

Bonjour,
pas bien compris le soucis mais si tu parle de la bande blanche qui apparaît en début de la zone bleu, je dirais que tu rencontres un problème de fusion de marge, mais sans plus d'élément ce ne sont que des suppositions

**sipatsymasaka** · 04/12/2014, 15h14

tu peux préciser les min et max de height et width , ou les redimensionner relativement à leur contenant.

**baldeadama** · 04/12/2014, 22h48

j ai resolu le probleme en changeant la balise du message qui etait <h1></h1> à la balise <label></label>. j ai remarqué le meme probleme avec les balises <p></p>. mais je me suis dit qu' il y a forcement une solution pour les balises h1 et p. si quelqu un à une idée elle sera la bienvenue. de mon coté je suis entraint de chercher.

**NoSmoking** · 06/12/2014, 10h10

...si quelqu un à une idée elle sera la bienvenue. de mon coté je suis entraint de chercher.

Pourquoi ne pas lire les réponses faites ?

Envoyé par NoSmoking

...je dirais que tu rencontres un problème de fusion de marge...

et au vu de ta réponse on est bien en présence de celles ci.

Petit rappel sur la fusion des marges

La fusion de marges s'applique à des éléments de type block qui sont dans le flux, donc qui ne sont pas en position absolue/fixed ou flottants, elles concernent les marges extérieures haute et basse, margin-top et margin-bottom.

Elles s'appliquent à des éléments qui sont PARENT/ENFANT ou FRERES (ex: H1 et P).

Prenons le cas de figure suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<PRECEDANT>
</PRECEDANT>
<PARENT>
    <ENFANT>
    </ENFANT>
</PARENT>

Question :

à quelle distance se placera l'élément PARENT de l'élément PRECEDANT ?

Réponse :

La distance sera égale à la plus grande valeur (absolue) entre la marge haute du PARENT et celle de l'ENFANT, c’est là qu'il faut se méfier des marges par défaut des navigateurs.
Cette réponse ne vaut que dans le cas où les marges sont toutes les deux positives ou négatives.

Solutions :

Il existe plusieurs solutions pour s'en affranchir et notamment

1. Connaissant le principe des fusions de marges il suffit de fixer aux éléments les marges que l'on souhaite voir appliquer.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
PARENT, ENFANT {
  margin-top:0.5em;
}

2. Mettre une marge interne, padding-top, au parent

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
PARENT {
  padding-top: 0.01em;  /* attention peut influer sur les dimensions de la boite */
}

3. Mettre une bordure, border-top, au parent

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
PARENT {
  border-top: 1px solid transparent;  /* attention peut influer sur les dimensions de la boite */
}

Exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fusion des marges</title>
<style>
div {
  width:20em;
  height:10em;
}
#div_1{
  background:#567;
}
#div_2{
  background:#789;
}
#div_3{
  background:#9AB;
}
#div_3 h1{
  margin-top:0;
}
#div_4{
  background:#BCD;
  border-top:1px solid transparent;
}
#div_5{
  background:#DEF;
  padding:0.01em;
}
</style>
</head>
<body>
<div id="div_1">Bloc référence...
</div>
<div id="div_2">
  <h1>Titre</h1>
  <p>Positionnement avec fusion des marges</p>
</div>
<div id="div_3">
  <h1>Titre</h1>
  <p>H1 avec margin-top:0</p>
</div>
<div id="div_4">
  <h1>Titre</h1>
  <p>Parent avec border-top:1px solid transparent;</p>
</div>
<div id="div_5">
  <h1>Titre</h1>
  <p>Parent avec padding:0.01em;</p>
</div>
</body>
</html>

A lire :

La taille de ma div augmente lorsqu'un nouveau élément est rajouté

CSS

Discussions similaires

Partager

Partager