[resolu] Question de gros débutant

Bonjour,

J'ai une question qui reste sans réponse, et qui à mon avis est très simple, j'enrage de ne pas trouver tout seul.

alors pour commencer, voilà ce que j'essaie de faire: mettre une image en float:right dans un paragraphe de texte. Le rendu est aléatoire selon les navigateurs, nottament car la hauteur de <p> varie, et que l'image dépasse du coup, puisqu'elle est hors du flux (ou alors j'ai raté un truc).

J'ai donc abandonné cette méthode, et j'ai mis un div de hauteur fixe contenant un <p> et l'image en float:right cote à cote. là j'obteins le rendu souhaité, mais le paragraphe conserve ses attribut, nottament de fond etc... alors qu'il a une autre class.

ma question est donc: comment annuler les attributs hérités de ce paragraphe, nottament le background ? j'ai essayé avec background: none; sans résultat.

voilà à quoi ressemble mon code:

css:

#contenu {
	width:550px;
	margin:0 0 0 305px;
	text-align:center;
}

#contenu p{
	background: url(images/decotext.gif) no-repeat bottom center #fff;
	text-align:justify;
	line-height:18px;
	padding:10px 20px 50px 20px;
	color:#848484;
}
.blocimage {
        height:200px;
        margin: 30px 0 0 0;
        padding:0 20px 0 20px;
        background: url(images/decotext.gif) no-repeat bottom center #fff;
        text-align:justify;
        line-height:18px;
        color:#848484;
}
.blocimage a img {
        margin:18px 10px 0 20px;
        float:right;
}
.blocimage p {
        background-image: none;
}

html:

<div id="contenu">
	<p>blabla</p> <!--paragraphe formaté par l'id #contenu p

	<div class="blocimage">
		<a href="monimage" title="titre"><img src="vignette" alt="alt"></a>
		<p>légende de mon image qui pose problème en héritant des attribut des paragraphes "#contenu p" alors que j'aimerai qu'elle ne prenne que les attributs de ".blocimage p"</p>
	</div>

</div>

merci de votre aide, et si qualqu'un a une solution plus propore pour intégrer une image à droite dans un paragraphe de taille variable, je suis preneur !!
Modifié par yosh (29 May 2007 - 18:52)

Bonjour,

C'est une question de priorité des sélecteurs (cf. l'article sur Openweb).

#contenu p{
	background: url(images/decotext.gif) no-repeat bottom center #fff;
}
.blocimage p {
        background-image: none;
}

Le sélecteur #contenu p a une priorité de 0101 (un id, un élément).
Le sélecteur .blocimage p a une priorité de 0011 (une classe, un élément).

Un sélecteur correspondant au type de paragraphe visé et ayant une priorité supérieure à #contenu p serait celui-ci :

#contenu .blocimage p {...}

Priorité de 0111.

merci beaucoup !!

voilà donc comment gagner en priorité ! en fait c'est logique...

et du coup existe il une manière "d'effacer" des propriétés ? (par curiosité) (hormis le selecteur *)

sinon pour mon problème j'ai remis les choses à plat, supprimé la div inutile, et utilisé min-height dans le paragraphe (et clear:both, qui me manquait aussi pour parfaire) et j'ai utilisé le hack d'IE 6 comme indiqué dans la faq pour le min-height. je voulais l'éviter mais à la limite c'est le plus simple...

encore merci !

yosh a écrit :
et du coup existe il une manière "d'effacer" des propriétés ? (par curiosité) (hormis le selecteur *)

Oui et non. On peut toujours viser un sous-ensemble d'éléments qui hérite de certains styles, et remettre ces styles à leur valeur par défaut (telle que définie dans la spécification ou les styles par défaut du navigateur).

ok, merci pour ces eclaircissements, vous pouvez mettre le topic en résolu...

yosh a écrit :
ok, merci pour ces eclaircissements, vous pouvez mettre le topic en résolu...

Bonjour,
c'est à toi à la mettre en resolu > bouton editer