Tom's Guide > Forum > Programmation > problème insertion images en CSS

problème insertion images en CSS

Forum Programmation : problème insertion images en CSS

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Voilà, je n'arrive pas à insérer d'images, ni dans le CSS,ni dans le HTML.
Esct-ce que quelqu'un pourrait m'expliquer de manière claire comment on fait pour voir pourquoi je n'y arrive pas.
Merci

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

bonjour,
pour une image avec la balise img dans la page:
<img src="monimage.jpg" alt="description de l'image"/>
dans le css pour une image d'arriere plan:
background-image: url(images/image.gif);

n'hesite pas a lire les tutos que tu peux trouver sur internet ,
consulter les dicos des balises html,
il y a aussi des generateurs de css qui peuvent t'aider a faire tes premieres feuilles de style de façon correcte....
les tutos du site aussi !
bon web, a plus
gcyrillus

Répondre à gccyrillus

je fais bien comme tu m'a dis mais ça ne marche pas, j'ai l'impression qu'il ne trouve pas l'image..

Répondre à boxtheco

met l'image dans le meme dossier que le fichier html, ensuite met le code pour insérer une image comme t'as donenr notre ami(e) gccyrillus, et biensur cette fois au lieu de mettre "C:\......." tu met juste le nom de ton images "image.jpg" par exemple.

Répondre à karamouss

ça ne marche toujours pas, est-ce que quelqu'un pourrait m'envoyer un dossier avec un code et ne comprenant juste une phto pour voir, svp.
boxtheco@hotmail.com

Répondre à boxtheco

bonjour,
il serait peut-etre plus simple que tu nous laisse ton bout de code qui pose probleme ou eventuellemnt le lien vers la page !
pour info, sur le web, minuscule et majuscule sont differenciées !
monimage.jpg
et
monimage.JPG
sont donc 2 fichiers differents ! donc si tu demande d'afficher l'un cela n'affichera pas l'autre même si c'est le seul present sur ton espace web.
des exemples tu en a plein, cette page par exemple, elle affiche des images, regarde le source !
Prend patience, bientot ces petit soucis te feront rire!
a plus

Répondre à gccyrillus

oui, je veux bien prendre le code de la page mais il n'y a pas d'image.
J'aimerais juste un dossier comprenant une image, un code html de base et le css qui va avec pour voir si c'est moi qui suis vraiment débile...

Répondre à boxtheco

bonjour,
je n'arrive pas a comprendre ce que tu "comprends" , ton avatar a cote de ton post, c'est bien une image non ! :-)
Laisse nous les codes que tu essaie pour que l'on puisse t'expliquer ou tu fais une erreur.
a plus

Répondre à gccyrillus

Voilà le CSS

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("siteweb/motifs.jpeg" );
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png" );
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

Et là le HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

</body>
</html>

Répondre à boxtheco

bonsoir,
je comprend ton probleme,

en fait tu n'affiche rien et c'est normal, ton css semble bien renseigner mais dans ta page html tu ne met rien et tu n'appelle pas le fichier css.

par exemple pour afficher ta banniere et ton memenu tu pourrait faire comme ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style

type="text/css">
@import url("style.css" );
</style>
</head>
<body>
<div id="en_tete">pour afficher l'en_tete</div>
<div id="menu" class="element_menu">
<h3>menu</h3><hr/>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2 </a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</div>
</body>
</html>

ou
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

/* L'en-tête */

#en_tete
{
width: 760px;
height: 100px;
background-image: url("siteweb/motifs.jpeg" );
background-repeat: no-repeat;
margin-bottom: 10px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
}

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png" );
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="en_tete">pour afficher l'en_tete</div>
<div id="menu" class="element_menu">
<h3>menu</h3><hr/>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2 </a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</div>
</body>
</html>

tu as besoin de lire encore quelques tutos pour comprendre comment se construit une page web, il y a le site du zero qui est pas mal, mais c'est pas le seul .
a plus et bon web !

Répondre à gccyrillus

bon je laisse tomber, j'ai essayé tes codes et ça marche pas.

Merci de m'avoir aider...

Répondre à boxtheco

bonsoir,
le code de la page html que tu donne ne peut afficher rien d'autre qu'une page blanche !

1. les elements qui peuvent etre afficher dans une page web se trouve entre <body> et </body> et la tu n'as rien ! meme pas un texte simple !

2. ton fichier css n'est pas lier a ta page, (d'ailleurs je ne sais pas comment tu la nommer, donc même ecrit correctement, il n'aura aucun effets).

3.les adresses des images que tu donnent doivent pointer reellement sur le fichier, si il est ailleurs, tu n'afficheras rien !

4. en plaçant des balises vides entre les balises "body", tu n'afficheras rien non plus.

5. les 2 morceaux de codes que je t'ai donner doivent afficher quelque chose si tu les a mis chacun dans un fichier.

au moins ceci :

pour afficher l'en_tete
menu
(une barre de separation)
Lien 1 Lien 2 Lien 3

----------------------------------------

dans le premier cas si ton fichier css n'etait pas dans le même repertoire et/ou avec un nom different il ne pouvait avoir aucun effets.
ici il devait etre nommer :"style.css"

dans le second cas ton fichiers css est inclus dans la page , et pour que les images soit affichées il faut qu'elles se trouvent la ou tu l'indique.

tu as besoin d'acquerir les bases, ce n'est pas long ni difficile, mais il faut que tu y passe autrement tu apprend a te servir d'un editeur web !

bon courage.

Répondre à gccyrillus

bonjour,

j'ai le meme probleme avec le code suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le meilleur du web au maroc !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>

<h1>Enfant Du 21<sup>eme</sup> Siecle Et Envie D'un Espace De Detente? <sub>C'est Ici!!!</sub></h1>
<h2>Du streaming</h2>
<p> Sur ce site, vous trouverez prochainement une section <em>streaming manga</em> dediee aux fans d'animation japonaise.<br/>
D'autres sections sont prevues, mais je garde le secret!</p>
<p><a href="streaming.html"><img src="image/girl.jpg" alt="Anime girl"> </a></p>
<h2>Un Forum</h2>
<p>Je vous annonce donc qu'un forum est prevu et ce dans le but de vous permettre de discuter de
vos gouts, donner votre avis ou encore me feliciter pour mon <strong>magnifique</strong> travail (blague).!</p>
<h2>Des Fonds d'ecran</h2>
<p>Ma selection de fonds d'ecran, histoire de se rincer l'oeuil ou d'embellir son ecran.</p>
<p>PS: Pour les apprentis programmeurs, Je connais un site qui est vraiment super : le <a href="http://www.siteduzero.com"title="Site réservé aux débutants">Site du Zér0</a><br />
N'hésitez pas à aller le visiter, il vaut <strong>vraiment</strong> le coup d'oeil </p>
<p><img src="image/anime.jpg" alt="Anime Girl"/></p>
<h2>Des idees pour ameliorer le site, contactez moi!</h2>
<p><a href="mailto:anas_lyg@hotmail.fr">Administrateur</a></p>
</body>
</html>

Puis-je esperer de l'aide s'il vous plait. Merci d'avance.

Répondre à Anonyme

ton code vien de :http: //www.siteduzero.com
ta juste a relire le tuto ...

------------------------------ XD --> peut aussi se dessiner --> XP
Microsoft se fout-il pas ne notre tete avec son XP ???
Répondre à andrelec1

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > problème insertion images en CSS

Aller à :

Aide |
Règles du forum

Il y a 2369 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 1,170 secondes

Liens