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

Version imprimable

2 pièce(s) jointe(s)

Bonjour;

voila, j ai un petit souci avec le css.

voir le code:
Code:

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:

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:

Pièce jointe 162383Pièce jointe 162384

26/11/2014, 22h18
NoSmoking

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;)
04/12/2014, 15h14
sipatsymasaka

tu peux préciser les min et max de height et width , ou les redimensionner relativement à leur contenant.
04/12/2014, 22h48
baldeadama

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.

Citation:

...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 ?

Citation:

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:

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:

1 2 3 PARENT, ENFANT { margin-top:0.5em; }
2. Mettre une marge interne, padding-top, au parent
Code:

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:

1 2 3 PARENT { border-top: 1px solid transparent; /* attention peut influer sur les dimensions de la boite */ }
Exemple :
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 <!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 :

Résoudre les problèmes de marges en CSS
Collapsing margins (W3C Box Model)