18041 sujets

Questions générales et questions de débutants

Problème d'affichage d'images

Bonjour,
Je suis débutant en xhtml et css. Je fais la formation avec le livre du site du zéro. J'ai mes sous dossiers 'images' et 'css' dans un même dossier 'ETOILES'.
Dans le code xhtml, j'ai défini le div suivant:
<div id="etoile_filante"> </div>
Dans le css, j'écris:
#etoile_filante
{
width: 200px;
height: 168px;
position: absolute;
top: 0px;
left: 0px;

background: url("images/filante2.gif") no-repeat;
}

Résultat: rien ne s'affiche, ni sous IE ni sous firefox.

Que dois-je faire pour que le bloc apparaisse avec l'image à l'intérieur?

Merci de votre secours.
Modérateur
Bonjour,

On dirait un problème de chemin vers l'image.

Si j'interprète bien la structure de tes dossiers, j'essayerais :

background: url("../images/filante2.gif") no-repeat;
Modifié par Tony Monast (05 Jul 2011 - 18:19)
Modérateur
Si ça ne fonctionne toujours pas, assures-toi que le nom de l'image est exact (lettres majuscules et minuscules).

Est-ce que ta page est en ligne? Ce serait plus facile de constater le problème.
Modifié par Tony Monast (05 Jul 2011 - 21:07)
Le nom de l'image est bien exact.
Malheureusement pas encore. Je ne suis qu'au début et je n'ai encore aucun nom de domaine
Si vous voulez, je peux vous envoyer les deux fichiers (index html, css ) et l'image pour que vous essayiez
humm, as-tu essayé de vérifier le chemin pour parvenir à l´image comme Tony Monast l´a mentionné? Peux-tu dire exactement dans quels répertoires tu as enregistré index.html, le fichier css et ton image?
Le répertoire s'appelle ETOILE. Il contient les dossiers css, images et l'index.html. Toutes mes images se trouvent dans le di=ossier images.
Modérateur
Peux-tu essayer ceci?

HTML

<div id="etoile_filante">&nbsp;</div>

<p><img src="../images/filante2.gif" width="200" height="168" alt="Si je vois ce texte, le chemin est incorrect" /></p>


CSS

#etoile_filante
{
width: 200px;
height: 168px;
position: absolute;
top: 0;
left: 0;
background: url("../images/filante2.gif") no-repeat;
}


Qu'est-ce que tu vois?
Modérateur
gbeadewogbe, il faudrait répondre dans le sujet plutôt que par message privé.

Tu vois donc l'image?

À noter que le code suivant est simplement pour tester le chemin de l'image : <p><img src="../images/filante2.gif" width="200" height="168" alt="Si je vois ce texte, le chemin est incorrect" /></p>

Il devra évidemment être enlevé une fois le test effectué.
Le but d'un lien est d'être suivi...

Merci d'éditer ton premier message et d'indiquer que le sujet est résolu comme demandé dans les règles du forum.
Merci du conseil et du rappel.

J'ai découvert que le problème provenait de l'espace entre le "#" et le "en_tete". Il a suffit de supprimer l'espace, comme le présentait l'exemple de Tony, pour que le problème se résolve.
Vive la solidarité et le partage sur la toile!
Bonne journée à tous.
Modifié par gbeadewogbe (06 Jul 2011 - 09:39)
Sujet clos
Aller à