[Résolu] Paragraphe : image de fond ne s'affiche pas

Hello

je ne suis peut être pas bien réveillé, je ne comprends pas pourquoi une image de fond n'apparaît pas . C'est l'image check.png comme elle apparaît ici quand je la place dans le paragraphe lui même :
http://img261.imageshack.us/img261/8034/hcparafrq1.jpg

Ce n'est pas critique bien sûr mais j'aimerais comprendre et corriger.
Pour vous aider à m'aider voici les éléments de code :
le code html :

<div class ="funkbox_left"><img src="pages/sauvegarde/images/feature-backup.gif" alt="Sauvegarde" width="80" height="80" class="funkbox_illus" />
  <span class="titre">Sauvegarde</span><br />
  <span class="stitre">Prot&eacute;ger vos donn&eacute;es</span><br />
<p class="texte">Sauvegardez vos donn&eacute;es &agrave; tout moment d'un simple
  clic ou planifiez la sauvegarde pour qu'elle soit automatis&eacute;e.</p>
</div>

la css associée :

.funkbox_left{
	float:left;
	width:337px;
	background-color: #FFFFFF;
	height: 130px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
}


.funkbox_illus{
	padding:25px 12px 25px 4px;
	background-color:#ffffff;
	height: 80px;
	width: 80px;
	float: left;
}

.texte{
	background-color: #FFFFFF;
	background-image: url(images/check.png);
	background-repeat: no-repeat;
	background-position: left center;
	text-align: justify;
	vertical-align: top;
	color: #FF0000;
}

.titre{
	font-weight: bold;
}

.stitre{
	color: #cc6600;
	font-weight: bold;
}

Merci d'avance,
Sven
Modifié par Sventovit (31 Jan 2007 - 10:05)

Je serais toi, je vérifierai le chemin vers l'image depuis la feuille de style. Parce qu'au niveau de la syntaxe, ça me semble correct.

Par contre, pour positionner l'image de fond :

	background-position: left [b]top[/b];

me semblerait plus adapté.

Salut , 2 petites choses dans ta classe "texte":

tu mets : "background-position: left center;" pour ton image en background hors sur l'image que tu présentes elle se trouve en haut, remplace donc par :
"background-position: left top;"

de plus , pour laisser ton image apparaitre non pas sous le texte mais a sa gauche met un "text-indent:25px;" a la largeur de ton image ( j'ai mis 25px a peu près ...

voila bonne journée

Hello et merci à vous deux
après un 2ème café c'est pas mieux.
J'avais anticipé vos remarques (@ Florent : le path est bon) et corrigé.

En fait je m'apperçois que c'est

.funkbox_illus{
	padding:25px 12px 25px 4px;
	background-color:#ffffff;
	height: 80px;
	width: 80px;
	float: left;
}

qui bloque l'image check.png.
Si je n'affecte pas l'image de cette classe la puce check.png appraît bien calée.

Pour construire ma page j'avais fait à l'origine en quick and dirty un tableau que je m'essaie à convertir en CSS.
C'est pas un point bloquant mais comme je m'initie au respect des standards je veux réussir à "sortir" cette image du fin fond de ma css sans doute mal construite.
Modifié par Sventovit (31 Jan 2007 - 09:45)

Et un margin-left sur p.texte ?

Le flottant à gauche repousse le texte et les éléments en-ligne, mais pas les limites des blocs. Il y a donc toute une partie de p.texte qui s'affiche sous le flottant. L'image de fond, alignée à gauche, est donc sous le flottant.

Florent V. a écrit :
Et un margin-left sur p.texte ?

Le flottant à gauche repousse le texte et les éléments en-ligne, mais pas les limites des blocs. Il y a donc toute une partie de p.texte qui s'affiche sous le flottant. L'image de fond, alignée à gauche, est donc sous le flottant.

c'est ce que j'ai soupconné aussi.
Je l'ai donc corrigé en positionnant la puce avec précision ainsi :

.texte{
	background-color: #FFFFFF;
	background-image: url(images/check.png);
	background-repeat: no-repeat;
	background-position: 7.8em top;
	text-align: justify;
	vertical-align: top;
	color: #FF0000;
	text-indent: 2em;
}

Conforme !


Merci encore à vous deux.
Et bonne journée !

Sventovit a écrit :
Conforme !

Bancal. Pas robuste pour deux sous.

Et sinon, une marge en pixels sur le paragraphe ?

Florent V. a écrit :

Bancal. Pas robuste pour deux sous.

allons bon !
c'est cruel !
et pourquoi ?

Florent V. a écrit :

Et sinon, une marge en pixels sur le paragraphe ?

essayé mais pas adopté
seule l'indentation m'a permis de faire apparaître l'image, mais je suis preneur de toute amélioration.

Sventovit a écrit :
et pourquoi ?

Parce que ton image de fond est positionnée en fonction de la taille du texte, taille du texte que tu ne maitrises pas (vu que seul l'utilisateur la contrôle) ?

Sventovit a écrit :
essayé mais pas adopté
seule l'indentation m'a permis de faire apparaître l'image, mais je suis preneur de toute amélioration.

.texte{
	margin-left: <la largeur en pixels du flottant de gauche>;
}

C'est pourtant pas la mer à boire, si ?...
Ne pas oublier de compter les padding et autres bordures dans la largeur du flottant.

Florent V. a écrit :

Parce que ton image de fond est positionnée en fonction de la taille du texte, taille du texte que tu ne maitrises pas (vu que seul l'utilisateur la contrôle) ?

.texte{
	margin-left: <la largeur en pixels du flottant de gauche>;
}

C'est pourtant pas la mer à boire, si ?...
Ne pas oublier de compter les padding et autres bordures dans la largeur du flottant.

pas taper Florent ! pas taper !
je vais voir ça... demain.

Merci encore une fois de m'avoir répondu.
Bonne fin de semaine à toi.