Problème d'affichage des images (dans éditeur+navigateur) [Résolu]

Question

Chrispic

12 Jan 2007 à 01:58

Bonjour!

Tout d'abord, ceci est mon premier message sur ce forum, je tenais à remercier ce site qui m'aide pas mal dans la compréhension du xhtml et surtout du css. J'ai pris comme mission de refaire tout mon site, en utilisant une feuille de style, et en utilisant du xhtml 1.0 Strict.
Je viens vous demander à l'aide sur le forum car malgré mes recherches, je ne trouve rien (ou alors je cherche mal).

Donc: après pleins de galères, j'ai trouvé un kit graphique gratuit avec son css qui ressemble comme 2 goûtes d'eau à celui que j'ai déjà (c'est le même auteur). Je me suis dit que c'est enfin gagné, que j'allais réussir à faire ma mise en page!
J'ai donc modifié le style.css (qui est très bien expliqué en +!) en l'adaptant à mon site. Une fois celà terminé, j'ai copié le "body" de ce kit dans la page de mon site actuel, en y apportant les modifications nécessaire.

Résultat: - si j'ouvre dans mon éditeur l'index du kit que j'ai trouvé, la mise en page est parfaite, les images s'affichent, tout est ok.
- si j'ouvre mon "futur nouvel index" que j'avais modifié, les images n'apparaissent pas! La couleur et forme du texte a bien été modifié grâce aux informations de mon style.css, mais pas les images: elles ne sont tout simplement pas là.
- Idem que le point précédent si je publie.

==> J'ai vérifié les liens dans mon css, mais rien ne laisse penser que j'ai fait une erreur dans l'écriture Smiley biggol

Sauriez-vous m'aider à sortir de ce problème qui commence sérieusement à me Smiley bawling

quand je sais que je galère déjà depuis quelques jours pour faire une page. Je pensais être enfin arrivé au bout, et bien non Smiley bawling

Merci.
Modifié par Chrispic (26 Jan 2007 - 12:00)

Thomas D.

12 Jan 2007 à 02:03

Bonjour Chrispic et bienvenue!

Sans code & sans exemple en ligne, il va être difficile de t'aider à régler ce problème Smiley sweatdrop

Chrispic

12 Jan 2007 à 13:24

Je me doutais que j'aurais cette remarque, mais comme il était tard, j'avais ni le temps ni le courage ^^ Je vais donc vous montrer ça en détail (c'est un peu long désolé):

Kit Graphique que j'ai trouvé, vu sur mon éditeur:

http://img96.imageshack.us/img96/75/110vx0.th.jpg

La même chose mais avec le style.css adapté à mon design et avec un code html un peu différent dans head:

http://img299.imageshack.us/img299/7913/2uo1.th.jpg

Code HTML de l'index du Kit Graphique trouvé:

a écrit :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>RedRey Abstract : Kit Graphique Gratuit de Tcheval</title>
<link href="style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="conteneurmenu">
<div id="menuhaut"></div>
<div id="menu">
<p class="menucont"> <a href="#">Liens 1</a><br>
<br>
<a href="#">Liens 2</a><br>
<br>
<a href="#">Liens 3</a><br>
<br>
<a href="#">Liens 4</a><br>
<br>
</p>
</div>
<div id="menubas"></div>
<div id="pubhaut"></div>
<div id="pub">
<p class="menucont"> <a href="#">Liens 1</a><br>
<br>
<a href="#">Liens 2</a><br>
<br>
<a href="#">Liens 3</a><br>
<br>
<a href="#">Liens 4</a><br>
<br>
</p>
</div>
<div id="pubbas"></div>
</div>
<div id="conteneurcontenu">
<div id="contenuhaut"></div>
<div id="contenu"> <br>
<p class="cont">Présentation du kit graphique 'RedRey
Abstract' <br>
</p>
<hr>
<p class="cont"> Voici mon deuxieme kit graphique Gratuit
avec une feuille de Style. Le site est donc valide aux normes du W3C.<br>
Cliquez sur l'image pour avoir la preuve en image : <a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br>
</p>
<br>
<p class="cont"> Bonjour, voici un kit graphique gratuit
réalisé par Tcheval.<br>
<br>
Vous pouvez modifier librement tout le thème à une seule condition :<br>
<br>
Laissez ce texte : "<b>Kit Graphique : <a
href="http://www.tcheval.net" target="_blank">Tcheval</a></b>"
en bas de chaque page de votre site.<br>
<br>
Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br>
<br>
</p>
<hr>
<h2>Vous trouverez dans l'archive de téléchargement :</h2>
<ol>
<li>Le .PSD du kit graphique, vous pourrez donc changer très
simplement le texte, insérer votre logo et/ou votre slogan à l'aide
d'Adobe Photoshop. </li>
<li>La feuille de style CSS. </li>
<li>L'intégralité du kit à modifier soit même. </li>
</ol>
<br>
<p class="cont"> Pour toute question relative à ce kit
graphique rendez vous sur <a
href="http://tchevalboard.free.fr/forum">Le Forum</a>.<br>
</p>
<hr>
<p class="cont"> Votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici,<br>
<br>
</p>
<h2>Exemple de Titre !</h2>
<h1>Exemple de News :</h1>
<ol>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
</ol>
<br>
<h1>Exemple de News 2 :</h1>
<ol>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
</ol>
<hr>
<p class="cont"> Vous pouvez modifier librement tout le
thème à une seule condition :<br>
<br>
Laissez ce texte : "<b>Kit Graphique : <a
href="http://www.tcheval.net" target="_blank">Tcheval</a></b>"
en bas de chaque page de votre site.<br>
<br>
Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br>
<br>
<br>
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br>
<br>
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici...<br>
<br>
Ce que vous voulez ici.<br>
</p>
<br>
</div>
<div id="contenubas"> <a id="zone1"
target="_blank" href="http://www.tcheval.net"
title="Visitez le site de l'auteur du Kit Graphique"></a>

<noscript> <a href="http://www.tcheval.net" target="_blank"
title="Kit Graphique Gratuit">Tcheval</a> </noscript>
</div>
</div>
</div>
</body>
</html>

Code HTML de ma page:

a écrit :
<!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">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Chrispic - Page vierge de Base</title>
<link rel="stylesheet" type="text/css" media="screen"
href="./css/style.css" />

<meta name="keywords"
content="chrispic,gratte-ciel,defense,montpellier,tours,photo,paris,immeuble,chantier,monument,architecture" />
<meta name="description"
content="Photos de villes, gratte-ciel, chantiers, et plus encore" />
<meta name="DC.Description"
content="Photos de villes, gratte-ciel, chantiers, et plus encore" />
<meta name="DC.Title"
content="Chrispic - Pics of Cities, Skyscrapers, Building sites, and more..." />
<meta name="DC.Subject"
content="Photos, gratte-ciel, architecture" />
<meta name="DC.Creator" content="C.C. Chrispic" />
<meta name="DC.Publisher"
content="http://chrispics.free.fr/" />
<meta name="DC.Rights" content="http://chrispics.free.fr/" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Language" scheme="RFC1766"
content="fr" />
<meta name="DC.Date" content="2004" />
<meta http-equiv="Content-language" content="fr-FR" />
<meta http-equiv="Content-script-type"
content="text/javascript" />
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="robots" content="index,follow" />
<meta name="author" content="C.C. Chrispic" />
<meta name="reply-to" content="chrispics(a)free(.)fr" />
<meta name="owner" content="chrispics(a)free(.)fr" />
<meta name="identifier-url"
content="http://chrispics.free.fr/" />
<meta name="copyright"
content="Copyright (c) 2004-2007 - By C.C. Chrispic" />
<meta name="expires" content="never" />
<meta name="revisit-after" content="7 days" />
<meta name="date-creation-yyyymmdd" content="20040626" />
<meta name="coverage" content="France" />
<meta name="geo.country" content="fr" />
<meta name="rating" content="General" />
<meta name="distribution" content="Global" />
<meta name="audience" content="all" />
<meta name="category"
content="Photo,architecture,gratte-ciel,skyscraper" />
<meta name="generator" content="KompoZer" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="conteneurmenu">
<div id="menuhaut"></div>
<div id="menu">
<p class="menucont"> <a href="#">Liens 1</a><br />
<br />
<a href="#">Liens 2</a><br />
<br />
<a href="#">Liens 3</a><br />
<br />
<a href="#">Liens 4</a><br />
<br />
</p>
</div>
<div id="conteneurcontenu">
<div id="contenuhaut"></div>
<div id="contenu"> <br />
<p class="cont">Présentation du kit graphique 'RedRey
Abstract' <br />
</p>
<hr />
<p class="cont"> Voici mon deuxieme kit graphique Gratuit
avec une feuille de Style. Le site est donc valide aux normes du W3C.<br />
Cliquez sur l'image pour avoir la preuve en image : <a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88" /></a><br />
</p>
<br />
<p class="cont"> Bonjour, voici un kit graphique gratuit
réalisé par Tcheval.<br />
<br />
Vous pouvez modifier librement tout le thème à une seule condition :<br />
<br />
Laissez ce texte : "<b>Kit Graphique : <a
href="http://www.tcheval.net" target="_blank">Tcheval</a></b>"
en bas de chaque page de votre site.<br />
<br />
Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br />
<br />
</p>
<hr />
<h2>Vous trouverez dans l'archive de téléchargement :</h2>
<ol>
<li>Le .PSD du kit graphique, vous pourrez donc changer très
simplement le texte, insérer votre logo et/ou votre slogan à l'aide
d'Adobe Photoshop. </li>
<li>La feuille de style CSS. </li>
<li>L'intégralité du kit à modifier soit même. </li>
</ol>
<br />
<p class="cont"> Pour toute question relative à ce kit
graphique rendez vous sur <a
href="http://tchevalboard.free.fr/forum">Le Forum</a>.<br />
</p>
<hr />
<p class="cont"> Votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici, votre texte ici, votre texte ici, votre texte ici, votre
texte ici,<br />
<br />
</p>
<h2>Exemple de Titre !</h2>
<h1>Exemple de News :</h1>
<ol>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
</ol>
<br />
<h1>Exemple de News 2 :</h1>
<ol>
<li>Mettez ici ce que vous voulez. </li>
<li>Mettez ici ce que vous voulez. </li>
</ol>
<hr />
<p class="cont"> Vous pouvez modifier librement tout le
thème à une seule condition :<br />
<br />
Laissez ce texte : "<b>Kit Graphique : <a
href="http://www.tcheval.net" target="_blank">Tcheval</a></b>"
en bas de chaque page de votre site.<br />
<br />
Merci de respecter le travail gratuit que Tcheval à réalisé pour vous.<br />
<br />
<br />
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,<br />
<br />
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici, votre texte ici, votre texte ici,
votre texte ici, votre texte ici...<br />
<br />
Ce que vous voulez ici.<br />
</p>
<br />
</div>
<div id="contenubas">
<noscript> <a href="http://www.tcheval.net" target="_blank"
title="Kit Graphique Gratuit">Tcheval</a> </noscript>
</div>
</div>
</div>
</div>
</body>
</html>

Pour finir, le style.css du kit graphique:

a écrit :
/*////////////////////////*/
/* Information de la page */
/*////////////////////////*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /* Police Verdana utilisé par défaut */
font-size: 10pt; /* Taille de la police par défaut */
margin: 0px; /* Pas de marge */
padding: 0px; /* Pas d'espacement */
background-color:#FFFFFF; /* Couleur de fond de la page Web */
border-style:hidden; /* Les bordures sont cachés */
}

/*//////////////////////*/
/* Mise en page du site */
/*//////////////////////*/

#conteneur {
position: absolute;
border-style:hidden; /* Les bordures sont cachés */
border-style:colapse; /* Les bordures fusionnent lorsqu'elles sont à côtés */
width: 750px; /* Taille fixé à 750 pixel */
left: 50%;
margin-left: -375px;
}

/*///////////////////////*/
/* Informations Diverses */
/*///////////////////////*/

/* Mise en page des News */
h1 {
font-size: 10pt; /* Taille de la police */
text-decoration :underline; /* On souligne la police */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
}

/* Mise en page des Titres en bleu foncé */
h2 {
font-size: 10pt; /* Taille de la police */
color:#000080; /* Couleur du texte bleu foncé */
font-weight :bold; /* On met en gras */
text-align:left; /* On aligne au gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
border-top: solid 1px;
border-bottom: solid 1px;
}

/* Mise en page des puces */
LI {
list-style-type : disc; /* On utilise des cercles noirs pleins */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:30px; /* On fais une marge de 30 pixel à droite pour éviter que le texte ne colle à la bordure et aussi pour décaler le texte des puces par rapport au texte normal */
}

/* Mise en page des traits horizontaux */
hr {
width:70%; /* On créer une ligne centré et de 70% par rapport à la taille de la page */
color:#000000; /* Couleur du trait : noir */
background-color:#000000;
height:1px; /* Taille du trait : 1 pixel */
border: 0;
}

/*////////*/
/* Header */
/*////////*/

/* Image de fond */
#header {
height: 200px; /* Hauteur de l'Header */
background-image:url('images/header.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
}

/*//////*/
/* Menu */
/*//////*/

#conteneurmenu {
position: absolute;
left:0;
width: 150px;
}

/* Image en haut du menu */
#menuhaut {
width: 150px;
height: 40px; /* Hauteur de l'image */
background-image:url('images/hautmenu.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin-top:20px; /* 20 pixel de marge */
}

/* Image de fond des liens du menu */
#menu {
width: 150px;
background-image:url('images/fondmenu.gif'); /* URL de l'image de fond, ici on autorise la répétition du fond */
margin:0px; /* Pas de marge */
}

/* Image en bas du menu */
#menubas {
width: 150px;
height: 13px; /* Hauteur de l'image */
background-image:url('images/basmenu.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
}

/* Image en haut de publicité */
#pubhaut {
width: 150px;
height: 40px; /* Hauteur de l'image */
background-image:url('images/hautpublicite.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin-top:20px; /* Pas de marge */
}

/* Image de fond des publicité */
#pub {
width: 150px;
background-image:url('images/fondmenu.gif'); /* URL de l'image de fond, ici on autorise la répétition du fond */
margin:0px; /* Pas de marge */
}

/* Image en bas des publicités */
#pubbas {
width: 150px;
height: 13px; /* Hauteur de l'image */
background-image:url('images/basmenu.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
margin:0px; /* Pas de marge */
}

/* Information sur les liens du menu */
.menucont {
text-align:center; /* On centre les liens */
font-weight :bold; /* On met en gras */
}

p.menucont {
margin: 0px;
padding-top: 8px;
}

p.menucont a {
margin: 0px;
padding-top: 8px;
}

p.menucont a:link {
color: #003471;
text-decoration: none;
}

p.menucont a:visited {
color: #003471;
text-decoration: none;
}

p.menucont a:hover {
color: #03015C;
text-decoration: underline;
}

p.menucont a:active {
color: #760000;
text-decoration: underline;
}

/*/////////*/
/* Contenu */
/*/////////*/

#conteneurcontenu {
margin-top: 20px;
margin-left: 170px;
width: 580px; /* Largeur de l'image */
}

/* Image de fond du haut du contenu */
#contenuhaut {
margin-top: 20px;
height: 40px; /* Hauteur de l'image */
background-image:url('images/hautcontenu.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
}

/* Image de fond du contenu */
#contenu {
background-image:url('images/fondcontenu.gif'); /* URL de l'image de fond */
}

#contenubas {
height: 40px; /* Hauteur de l'image */
background-image:url('images/bascontenu.gif'); /* URL de l'image de fond */
background-repeat:no-repeat; /* On interdit la reproduction de l'image de fond */
}

/* Liens vers l'index */
#zone1 {
float: left; /* On place le rectangle de selection */
width : 50px; /* Largeur du rectangle de selection */
height: 10px; /* Hauteur du rectangle de selection */
margin-left:305px; /* On place le rectangle de selection */
margin-top:9px; /* On place le rectangle de selection */
}

/* Information sur le contenu */
.cont {
text-align:left; /* On place le texte à gauche */
text-align:justify; /* On justifie le texte */
margin-right:15px; /* On fais une marge de 15 pixel à droite pour éviter que le texte ne colle à la bordure */
margin-left:15px; /* On fais une marge de 15 pixel à gauche pour éviter que le texte ne colle à la bordure */
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

Et le style.css modifié pour s'adapter à mon design:

a écrit :
/*/////////////////////////*/
/* CSS de chrispics.free.fr */
/*/////////////////////////*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
margin:5px 0px 5px 0px;
padding: 0px;
background-color:#ffffff;
border-style:hidden;
}

/*//////////////*/
/* Mise en page */
/*//////////////*/

#conteneur {
position: absolute;
border-style:hidden;
border-style:colapse;
width: 700px;
left: 50%;
margin-left: -375px;
}

/*////////////////*/
/* Infos Diverses */
/*////////////////*/

h1 {
font-size: 10pt;
text-decoration :underline;
font-weight :bold;
text-align:left;
text-align:justify;
margin-right:10px;
margin-left:10px;
}

h2 {
font-size: 10pt;
color:#0066cc;
font-weight :bold;
text-align:left;
text-align:justify;
margin-right:10px;
margin-left:10px;
border-top: solid 1px;
border-bottom: solid 1px;
}

li {
list-style-type : disc;
margin-right:15px;
margin-left:30px;
}

hr {
width:70%;
color:#000000;
background-color:#000000;
height:1px;
border: 0;
}

/*///////////////////*/
/* Bannière (header) */
/*///////////////////*/

#header {
height: 134px;
background: url(kit/header.gif);
background-repeat:no-repeat;
}

/*//////*/
/* Menu */
/*//////*/

#conteneurmenu {
position: absolute;
left:0;
width: 153px;
}

#menuhaut {
width: 153px;
height: 17px;
background-image:url('./kit/menu.gif');
background-repeat:no-repeat;
margin-top:20px;
}

#menu {
width: 153px;
background-image:url('./kit/fondmenu.gif');
margin:0px;
}

#menubas {
width: 153px;
height: 17px;
background-image:url('./kit/menu13.gif');
background-repeat:no-repeat;
margin:0px;
}

.menucont {
text-align:center;
font-weight :bold;
}

p.menucont {
margin: 0px;
padding-top: 8px;
}

p.menucont a {
margin: 0px;
padding-top: 8px;
}

p.menucont a:link {
color: #ffffff;
text-decoration: none;
}

p.menucont a:visited {
color: #cccccc;
text-decoration: none;
}

p.menucont a:hover {
color: #cc0000;
text-decoration: none;
}

p.menucont a:active {
color: #760000;
text-decoration: underline;
}

/*/////////*/
/* Contenu */
/*/////////*/

#conteneurcontenu {
margin-top: 20px;
width: 509px;
}

#contenuhaut {
margin-top: 20px;
height: 17px;
background-image:url('./kit/contenu.gif');
background-repeat:no-repeat;
}

#contenu {
background-image:url('./kit/fondcontenu.gif');
}

#contenubas {
height: 17px;
background-image: url(kit/bascontenu.gif);
background-repeat:no-repeat;
}

.cont {
text-align:left;
text-align:justify;
margin-right:10px;
margin-left:10px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

Modifié par Chrispic (12 Jan 2007 - 13:27)

Raphael

Administrateur

12 Jan 2007 à 13:43

Je crois que tu as battu le record du message le plus long du forum Smiley sweatdrop

Crois-tu vraiment que beaucoup de membres vont prendre la peine de copier-coller tout ça et tester chez eux ? Smiley confus

Ce ne serait pas plus facile pour eux de montrer le résultat en ligne ?

Igor

12 Jan 2007 à 13:49

Bonjour,

Belle tartine Smiley cligne

. Le plus serait vraiment une version en ligne, cela permettrait aux membre de pouvoir tester les urls des images, vérifier que ton éditeur de laisse pas les liens vers les images de ton disque local etc.

Question bête, mais çà arrive parfois, tu as bien transférer les images ?

Chrispic

12 Jan 2007 à 14:11

Lol, soit j'en dit pas assez, soit j'en dis trop Smiley decu

Bien, voici ma page en ligne: http://chrispics.free.fr/pagebasexhmltcss.html
Comme vous pouvez le voir, l'habillage du texte s'est bien mis comme je le voulais, mais il n'y a aucune image.

Oui, j'ai bien transféré les images.

Corinne S.

12 Jan 2007 à 14:25

Chrispic a écrit :
Lol, soit j'en dit pas assez, soit j'en dis trop

C'est un peu ça oui ... Smiley cligne

Mais avoue que même avec la meilleure volonté du monde, toi aussi, tu serais découragé devant un tel pavé ...
Non ? Smiley rolleyes

Et tu verras, une fois que tu auras pris le pli...
Tu troueras le juste milieu Smiley ravi

Chrispic

12 Jan 2007 à 18:39

Oui c'est sur Smiley smile

Personne n'a trouvé d'où pourrait venir le problème?

Chrispic

15 Jan 2007 à 01:13

Désolé pour le flood occasioné avec ce nouveau message mais il n'y a vraiment personne qui voit d'où pourrait provenir mon problème? Smiley decu

C'est super frustrant de pas trouver la solution alors que tout semble être bon Smiley bawling

Corinne S.

15 Jan 2007 à 09:38

Je viens de jeter un œil à la page en ligne et au CSS.
Et j'ai pu constater qu'il n'y a pas de défaut d'images, celle-ci se trouve bien dans le dossier spécifié. Donc il m'est avis qu'il s'agit d'un problème de mise en page. As-tu essayé de mettre simplement des background colorés à tes différents éléments pour voir d'où pourraient provenir le problème ? Smiley murf

Commence par essayer de mettre un arrière-plan au niveau du header et tu verras déjà si celui-ci se colore. Si tel n'est pas le cas, cela signifie que ton header est mal codé ou qu'un élément le cache. Il ne te restera plus qu'à colorer les différents éléments de ta page pour découvrir quel est le fautif. Smiley cligne

Chrispic

15 Jan 2007 à 19:20

Merci pour ta réponse Cygnus. J'avais pas pensé à ça! J'ai essayé, mais toujours rien dans le header. J'ai donc coloré les autres parties où devrait apparaître mes images pour le design, mais rien ne se colore, vraiment rien Smiley decu

Le résultat est toujours en ligne: - css: http://chrispics.free.fr/css/style.css
- http://chrispics.free.fr/pagebasexhmltcss.html

Quand tu dis que mon header serait mal codé, c'est dans la feuille de style ou bien dans la page html?

Chrispic

18 Jan 2007 à 21:49

Désolé pour ce second flood, mais j'ai beau me casser la tête à changer des trucs dans mon style pour voir si ça marche, mais rien ne s'arrenge. Smiley bawling

Je dois être maudit, c'est pas possible...

Personne n'a une autre idée?

fvsch

18 Jan 2007 à 23:18

#contenu {
	background-image: #AACC22
}

Ça c'est une erreur de champion. Smiley winner

Plus sérieusement :
- #AACC22 est une indication de couleur ;
- la propriété CSS permettant d'indiquer une couleur de fond pour un élément est background-color ;
- la syntaxe de la propriété CSS background-image est la suivante :

background-image: url(dossier-depuis-fichier-css/monimage.jpg);

Mon verdict : bien que la feuille de style récupérée soit joliment commentée, tu as apporté des modifications quelque peu hasardeuses dans ta version personnalisée. Aucune image n'est appelée (jamais vu de url(image) dans ta feuille de style), et les couleurs de fond sont indiquées avec la mauvaise propriété. De plus, tu oublies systématiquement de refermer la déclaration par un point-virgule. Conséquence : la déclaration de la ligne suivante ne sera pas interprétée non plus.

Mon conseil : avant de se lancer dans la modification d'une feuille de style CSS, avoir quelques notions même très basiques de la syntaxe de base des CSS serait un plus appréciable.

Chrispic

19 Jan 2007 à 00:07

Ah oui, normal que mon test ne marche pas ^^ Merci pour la remarque!! Je vais voir si ça marche maintenant.
Par contre, pour ce qui est:

a écrit :
Aucune image n'est appelée (jamais vu de url(image) dans ta feuille de style)

=> C'est normal, je les ai tous enlevé pour tester avec des couleurs à la place des images (mais, comme tu me l'as fait remarquer, je n'ai pas changer la syntaxe). Mais sinon, quand mes images sont présentes, ça ne marche pas; Cygnus l'a constaté dans son post précédent.

Chrispic

26 Jan 2007 à 12:02

Bonjour!
Aujourd'hui, j'ai décidé de reprendre mon travail de recherche à mon problème, et j'ai visiblement réussi à le résoudre Smiley smile

(j'ai donc édité le titre du thread).

C'est tout bête, mais en fait, il semblerait que mon problème venait du fait que ma feuille de style était dans un sous-dossier, et non dans le même dossier que mes pages html. Malgré un chemin modifié, ça ne marchait pas. Et là, avec la page html et son css juste à côté, dans le même dossier, ça marche Smiley ravi

Julien Royer

26 Jan 2007 à 12:06

Hello,

Chrispic a écrit :
C'est tout bête, mais en fait, il semblerait que mon problème venait du fait que ma feuille de style était dans un sous-dossier, et non dans le même dossier que mes pages html. Malgré un chemin modifié, ça ne marchait pas.

C'est étrange, je n'ai jamais entendu parler de ce genre de problèmes. est-ce que tu as un exemple minimal qui illustre ce problème (en gros, un fichier CSS d'une ligne avec un background-image par exemple) ?

C'est quand même dommage que tu sois obligé de déplacer ton fichier CSS pour que cela fonctionne...
Modifié par Julien Royer (26 Jan 2007 - 12:06)

Sujet clos

CSS et mise en forme, CSS3

Problème d'affichage des images (dans éditeur+navigateur) [Résolu]