[resolu]Position d'une balise 'P' dans un div

Bonjour,

Dans un petit script test, la valeur de position attribuée à la balise 'P' me fait repousser le div conteneur: voici la CSS:

body{
	margin: 0;
	padding: 0;
	text-align: center;	
}
#cnt{
	background-color: #CC3333;
	height: 580px;
	width: 900px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;	
}
#cnt p{
	padding: 0px;
	width: 65%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
#cnt #p_pos{
	background-color: #CCFF00;
	margin-top: 30px;	
}

le reste:

<div id="cnt">
<p id="p_pos">&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

En fait le conteneur est placé à opx, du haut, mais la première balise 'P' à 30px du haut de son conteneur.
Je pense que je dois oublié un truc !

Cela fonctionne sous IE, mais le problème est sous Firefox, Opéra

Modifié par gesualda (26 Feb 2006 - 14:35)

salut,

Oui c'est un problème qu'on rencontre souvent. Pour ma part je le résoudrais comme ça :

#cnt #p_pos {
margin-top: 0;	
}

#cnt {
padding-top:30px;
}

Merci clb56,

Effectivement, moi j'avais également pensé à rajouter une balise div:

#div_haut{
        height: 30px;
	width: 100%;
}
#cnt #p_pos {
margin-top: 0;	
}

Mais je trouve cela pas très logique..

Je n'ai pas trop compris la description…

gesualda a écrit :
En fait le conteneur est placé à opx, du haut, mais la première balise 'P' à 30px du haut de son conteneur.

Tu veux dire que c'est l'effet obtenu, ou que c'est l'effet désiré ?

En tout cas, ça me fait penser à une histoire de fusion des marges :

http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Bonjour mpop,

En fait il y a mon conteneur qui est placé à "o" du haut, et la balise "p" dans ce conteneur, qui serait placer à 30px à l'intérieur du conteneur.

Le problème est que lorsque je donne margin-top: 30px à la balise "p", celle ci me repousse le conteneur principale vers le bas de page donc en faisant:

#div_haut{
        height: 30px;
	width: 100%;
}
#cnt #p_pos {
margin-top: 0;	
}

le problème n'existe plus, mais ce n'est pas très logique alors que je pensais que en affectant la valeur margin-top: 30, à la balise "p" cela résoudrait le problème.

@ gesualda :

Alors, on te donne de la lecture passionante et tu ne jettes même pas un coup d'oeil ?

C'est exactement le problème exposé dans la page dont j'ai donné le lien. Les marges du conteneur et du premier paragraphe sont fusionnées, et appliquées au conteneur. Ça a l'air idiot comme ça, mais il y a des cas où la fusion des marges est très pratique.

Pour ton problème, il faut que tu saches ce qui est le plus logique :
- le bloc conteneur doit forcément avoir un espace vide pour la respiration du contenu
ou :
- le premier paragraphe a un statut différent des autres paragraphes, et pour marquer ce statut je crée un espace vide avant ce paragraphe. Si j'avais eu un autre élément que ce paragraphe, ça ne m'aurait pas dérangé qu'il se colle en haut du conteneur.

Pour le premier cas :
On utilise la propriété padding appliquée au conteneur, pour créer cet espace de respiration

#cnt {
	margin-top: 0;
	padding-top: 30px;
}

Le premier paragraphe n'a pas de statut particulier.

Dans le deuxième cas, il s'agit d'éviter la fusion des marges :

#cnt {
	margin-top: 0;
	padding-top: 1px;
}
#cnt #p_pos{
	margin-top: 30px;
}

Le padding rajoute un espace d'un pixel entre la marge du conteneur et la marge du paragraphe, et donc pas de fusion des marges possible.
Le fait d'ajouter une bordure donne la même chose. Cf le lien que j'ai donné précédemment.

Je suis impardonnable, , c'est fait, je comprend mieux le problème maintenant,

merci beaucoup

clb56 a écrit :
Si le premier paragraphe n'a pas de statut particulier alors il a des marges haut/bas par défaut. Donc son margin-top vient s'additionner au padding-top du conteneur. Facile à régler puisqu'il suffit de lui donner margin-top:0; mais il perd dans ce cas son statut de "non particulier".

Effectivement j'y avais pensé. Dans la pratique et si on veut un rendu "au pixel près", il faudra soustraire à ce padding de 30 pixels la marge haut par défaut du premier paragraphe. Du coup on aura plutôt un padding de 24 ou 26px... mais en général on met une valeur et on regarde ce que ça donne, et on affine ensuite. J'ai supposé que la valeur "30px" était surtout indicative.

Mais bon j'ai zappé cette nuance, parce qu'il ne faut pas trop en jeter à la fois