18041 sujets

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

Problème - Affichage d'images

Bonjour Smiley smile

Nouveau dans le monde du développement web, j'ai un petit soucis pour l'affichage des images que je compte introduire dans mon site. Newbie dans le domaine, j'ai suivi - presqu'à la lettre - le tutoriel "Réalisation d'un design complet (XHTML / CSS) en 5 étapes" de ce site. Tout fonctionne très bien, le site répond bien, les liens répondent comme prévus,... Le seul soucis vient des illustrations - background de l'entête et background de menu - qui ne s'affichent tout simplement pas.

Le lien du site: http://specqueucl.ibelgique.com/

Et voila les codes - CSS (juste les passages problématiques) et HTML de la page d'accueil (complet):

h1#entete
{
	width: 770px;
	height: 300px;
	background: url(\Images\bg-header.jpg);
	backgrounf-color: #c50007;
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(\Images\bg-menu.jpg) repeat-x 0 -25px ;
	list-style-type: none ;
	backgrounf-color: #c50007;
}

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	width: 120px ;
	line-height: 25px ;
	font-family:verdana, sans-serif;
	font-size: 100% ;
	color: #f6d31f ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #f6d31f ;
}

ul#menu li a:hover
{
	background: (\Images\bg-menu.jpg) repeat-x 0 0 ;
}





<!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" lang="fr">
	<head>
		<title>Specque - Délégation Académie Louvain: Accueil</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/style" />
		<meta http-equiv="Content-Language" content="fr" />
		<style type="text/css" media="all">@import "style.css";</style>

	</head>
	
	<body>
		
	<div id="conteneur">


		<h1 id="entete"><a href="index.html" title="Specque - Délégation Académie Louvain: Accueil - Accueil"><span>Specque - Académie Louvain</span></a></h1>

		<ul id="menu">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="specque.html">Qu'est-ce que la Specque?</a></li>
			<li><a href="sujets.html">Les sujets pour 2010</a></li>
			<li><a href="moncton.html">Moncton</a></li>
			<li><a href="dossierfinancement.html">Le dossier de financement</a></li>
			<li><a href="partenaires.html">Nos partenaires</a></li>
		</ul>
		
		<div id="contenu">
			<h2>Accueil</h2>
			<p>Bienvenue sur le site de la délégation Specque de l'Académie Louvain.</p>
		</div>
		
		<p id="pied">Mise en page réalisée grâce aux tutoriels <a href="http://www.alsacreations.com/">Alsacréations</a></p>
		</div>

	</body>
</html>



Et enfin voila la manière dont se présente le dossier contenant les fichiers du site.
upload/27840-Sanstitre2.jpg


Je suspecte fortement un problème dans l'URL de l'image, mais je n'ai pas réussi à trouver la solution malgré une grosse heure de recherches actives sur le web...

Merci pour votre aide Smiley smile
Bonjour,

Les images s'affichent.

Par contre, je me doit de te signaler que l'image bg-header.jpg ne DOIT pas se trouver dans le CSS mais dans le HTML. Cette image est "porteuse de contenu" (en gros il y a du texte dessus), elle doit donc être appellée par une balise img et comporter un attribut alt qui reprendra le même contenu (texte) que l'image.
Une image est considérée comme porteuse de contenu à partir du moment où un élément texte y est présent? Et ce même si ce texte est inclus dans l'image elle-même (intégrer via Gimp dans mon cas)? D'autant que la bannière sera la même sur l'ensemble des pages du site. Bref, je pense qu'elle est à sa place dans le CSS? A moins que je ne fasse complétement fausse route...

Concernant l'affichage, c'est très bizarre. Chez moi, ça ne marche toujours pas... Mais je pense plus avoir à faire à un soucis d'hébergement: quand j'essaye d'affiche l'image de fond, j'obtiens comme réponse un truc du genre "le document recherché n'existe pas". Alors qu'il est bien présent sur le serveur... J'arrête la digression en hors-sujet et regarde dans cette direction là.
Je vous tiendrai au courant de l'avancement de mon cas Smiley smile
rip3200 a écrit :
Une image est considérée comme porteuse de contenu à partir du moment où un élément texte y est présent? Et ce même si ce texte est inclus dans l'image elle-même (intégrer via Gimp dans mon cas)? D'autant que la bannière sera la même sur l'ensemble des pages du site. Bref, je pense qu'elle est à sa place dans le CSS? A moins que je ne fasse complétement fausse route...
Tu fais effectivement complètement fausse route. Ta réflexion c'est un peu (et parce que je commence à avoir une petite fringalle) comme si tu demandais s'il y avait du sucre dans un gateau dont la recette demande 200g de sucre (oui c'est nul comme comparaison, mais on est vendredÿ et j'ai faim ^^; ).

Le principal problème a placer une image qui a du contenu dans le CSS c'est que : 1. si l'image de ne charge pas, on perd de l'information (le texte de l'image) ; 2. si les CSS ne sont pas interprétés on perd de l'information ; 3. pour les utilisateurs aveugles qui utilisent des lecteurs d'écran l'information est zappée (le lecteur d'écran ne sachant pas "lire" ce qu'il y a une une image). L'avantage à placer une image dans le core HTML avec un attribut alt c'est que dans les cas 1 et 3 précédents, c'est le contenu du alt qui prendra alors le pas sur l'image et permettra au visiteur de bénéficier de tout le contenu de ton site (là en l'occurence, son titre, donc un contenu extremement important).

rip3200 a écrit :
Concernant l'affichage, c'est très bizarre. Chez moi, ça ne marche toujours pas... Mais je pense plus avoir à faire à un soucis d'hébergement: quand j'essaye d'affiche l'image de fond, j'obtiens comme réponse un truc du genre "le document recherché n'existe pas". Alors qu'il est bien présent sur le serveur... J'arrête la digression en hors-sujet et regarde dans cette direction là.
Est-ce que tu as essayé de faire un refesh de ton cache (Ctrl + F5) ?
Sujet clos
Aller à