[RESOLU]Conflit entre titre et paragraphe...

Bonjour,

Je débute en css et je m'emploie à essayer de simplifier mon code en utilisant les principes de la hiérarchie.

Dans ma page html, je souhaite affecter tous les éléments d'un même <div>de cette façon

<div id="stages">
 <p>
<h1>Samedi 24 mai :</h1>
<a href="#">lien 1</a>  Tralala
<a href="#">lien 2</a>  Pouet
 </p>

<p>
<h1>Samedi 28 mai :</h1>
<a href="#">lien 3</a>  Tralala
<a href="#">lien 4</a>  Pouet
 </p>
</div>

et dans ma CSS je déclare :

#stages {
	font-size: 12px;
	margin: 15px;
	padding: 5px;
	}

#stages a {
	font-size: 12px;
	border-bottom: 1px dashed #FF0080;
	color: #FF0080;
}

#stages a:hover {	
	font-size: 12px;
	border-bottom: 1px solid #FF0080;
	color: #FF0080;	
}

#stages p {
	line-height: 1.6em;
	margin-bottom: 20px;
	background-color: #00CC99;
}

#stages h1 {
	margin: 2px;
	font: 16px #303;
	text-decoration: underline;
	
		
}

Tout fonctionne normalement sauf pour le titre et le paragraphe qui sont affectés, l'un ou l'autre et pas l'un et l'autre...
Avez vous une idée de la raison et la méthode que j'emploie est-elle correcte ?
Merci !!!
Modifié par pan (28 Aug 2008 - 11:49)

Salut,

pan a écrit :

Tout fonctionne normalement sauf pour le titre et le paragraphe qui sont affectés, l'un ou l'autre et pas l'un et l'autre...

Euh... qu'est-ce que tu veux dire ?

Je ne suis pas sûr d'avoir compris ce qui se passe, mais il y a de grandes chances que cela vienne de ton code non valide.

Un élément h1 et un élément p sont des éléments de type bloc qui ne peuvent pas se contenir l'un l'autre : un p ne peut contenir de h1, et un h1 ne peut contenir de p. Or dans ton code, le p contient un h1.

Il faudrait plutôt écrire quelque chose du genre

<div id="stages">

<h1>Samedi 24 mai :</h1>
<ul>
<li><a href="#">lien 1</a>  Tralala</li>
<li><a href="#">lien 2</a>  Pouet</li>
 </ul>

Ce que je veux dire c'est que soit c'est le paragraphe qui est affecté (couleur de fond par exemple) et le titre ne change pas (la police reste dans sa taille normale) soit c'est la police qui est modifiée mais dans ce cas, je n'ai plus de couleur de fond du paragraphe.

Ce que j'ai oublié de dire et qui me semble essentiel c'est que j'ai déjà un <h1> dans ma feuille de style (plus haut) du coup il me semble que ce soit celui là qui "commande"...

Je ne comprends pas car j'ai aussi des <a href...> plus haut et je n'ai pas ce problème.
J'espére que c'est clair

Gilles a écrit :
Je ne suis pas sûr d'avoir compris ce qui se passe, mais il y a de grandes chances que cela vienne de ton code non valide.

Un élément h1 et un élément p sont des éléments de type bloc qui ne peuvent pas se contenir l'un l'autre : un p ne peut contenir de h1, et un h1 ne peut contenir de p. Or dans ton code, le p contient un h1.

Il faudrait plutôt écrire quelque chose du genre

<div id="stages">

<h1>Samedi 24 mai :</h1>
<ul>
<li><a href="#">lien 1</a>  Tralala</li>
<li><a href="#">lien 2</a>  Pouet</li>
 </ul>

Rhaaaa oui c'est sûr que c'est ça....

Oh l'erreur, l'erreur...

Pour préciser :

* en général quand on écrit soit quelque chose..., soit autre chose... on a droit à 2 versions !

* effectivement, comme le dit Gilles un <p>aragraphe ne peut pas contenir de H1 et du coup le navigateur le "ferme" automatiquement... ce qui fait qu'il est vide et n'a donc pas de background-color.

* pour ce qui est d'un autre H1 plus haut il existe une notion de priorité des sélecteurs qui fait que ça ne devrait (à priori) pas prendre le pas sur ta déclaration #id h1
Modifié par Heyoan (28 Aug 2008 - 10:58)

C'est parfait, avec une liste j'ai obtenu ce que je voulais...

Merci, les CSS c'est réellement TOP