Problème image dans Header

[castor14]

Bonjour à vous tous qui me lisez !

Je redécouvre NVU devenu Kompozer maintenant !
Je m' étais penché sur NVU il y a quelques années, pour faire un site perso. Le travail faisant j' ai abandonné. Je reviens à cette idée de site perso, et je découvre Kompozer, qui a drôlement fait évoluer (NVU anciennement)

Aussi je suis mis à coder, très pratique à utiliser et rapide dans la construction des pages. De plus il produit un code valide pour W3C, ce qui est vraiement formidable, alors que d'autres n'ont pas ce résultat !

Je rencontre cependant un problème avec une image dans le "Header", pour la faire apparaître depuis la feuille CSS. Je viens de faire un tour sur le forum et beaucoup d'utilisateurs sont comme moi avec l' adresse relative? Je n' ai pas trouvé de réponse vraiment satisfaisante pour mon compte.

Dans mon "Header" j' ai créé un block avec un <div>. Dans ce <div> j'y ai mis un id="en_tete". Dans le code CSS, j' ai entré ces données :
#en_tete
width/ 760px;
height:100px;
margin-bottom: 10px;
background-image:url("essai_nvu/images/logo_manuscrits.jpg")
background-repeat:no-repeat;
Impossible d' afficher l' image !!!!!

Je remarque une chose,
background-image:url("essai_nvu/images/logo_manuscrits.jpg")
ce transforme en background-image:url(essai_nvu/images/logo_manuscrits.jpg) Les doubles apostrophes ont disparus
Merci de votre aide
Castor14

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

[Mongo Bob]

Oui, c'est la bonne syntaxe :

ce transforme en background-image:url(essai_nvu/images/logo_manuscrits.jpg) Les doubles apostrophes ont disparus

pas de """".
Si pas d'images, c'est que logo_manuscrits.jpg ne se trouve pas dans un dossier "images" lui-même inclus dans un dossier "essai_nvu".
C'est quoi, ce dossier "essai_nvu"? Il est supposé ne contenir que le dossier "images"? Auquel cas, il ne sert à rien! Parce que s'il est supposé contenir tout ton site, tu ne devrais avoir que :

Code : Tout sélectionner

url(images/logo_manuscrits.jpg)

tiens-nous au courant!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[castor14]

Bonjour Mongo Bob, et merci de ton aide !

Pour ta première question, les doubles apostrophes, viennes de ce que j' ai appris à coder, (html) il était recommandé de mettre un double apostrophe aprés et avant chaque parenthèse, mais si tu penses que ce n' est pas important laissons tombé;

Pour ta deuxième question: J' ai créé un dossier qui s' appelle "essai_nvu" dans lequel j' ai tous mes fichiers XHTML, et deux dossiers nommés, l' un, "css" dans lequel j' ai la feuille de style externe créée avec Kompozer, et l' autre qui se nomme "images", dans lequel j' ai l' image appellée "logo_manuscrit.jpg".
J' ai codé de différentes façons, comme suit: (j' abrège mon code) (images/logo_manuscrits.jpg), et (essai_nvu/images/logo_manuscrits.jpg)
et encore (../images/logo_manuscrits.jpg), sans résultat, d' où mon appelle au secours, et encore merci pour ton aide

J' ai du louper quelque chose, mais je ne vois quoi ?

A plus tard j' espère
castor14

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

[Fabrice.Tres.Net]

Pour ta première question, les doubles apostrophes, viennes de ce que j' ai appris à coder, (html) il était recommandé de mettre un double apostrophe aprés et avant chaque parenthèse, mais si tu penses que ce n' est pas important laissons tombé;

Ce n'est pas ici du HTML, mais du CSS!

[Mongo Bob]

les doubles apostrophes, viennes de ce que j' ai appris à coder, (html) il était recommandé de mettre un double apostrophe aprés et avant chaque parenthèse,

oui, mais c'est bien en html comme tu dis, là on est en css, laisse faire Kpz de toute façon, c'est lui qui code et le html et le css.

si tu penses que ce n' est pas important laissons tombé;

soit il en faut soit il en faut pas, des""""!

J' ai créé un dossier qui s' appelle "essai_nvu" dans lequel j' ai tous mes fichiers XHTML, et deux dossiers nommés, l' un, "css" dans lequel j' ai la feuille de style externe créée avec Kompozer, et l' autre qui se nomme "images", dans lequel j' ai l' image appellée "logo_manuscrit.jpg".

ceci confirme que tu dois avoir dans ton css, récapitulons :

Code : Tout sélectionner

#en_tete
width:760px;
height:100px;
margin-bottom: 10px;
background-image:url(images/logo_manuscrits.jpg);
background-repeat:no-repeat; 

Si ta feuille css est dans un dossier, le code qui s'y trouve ne peut pas faire référence à une image qui se trouve dans un dossier externe... J'ai pas vu ça plus tôt.
La ou les feuilles css doivent se retrouver hors tout dossier à côté de tes pages html...
attention :

Dans le code CSS, j' ai entré ces données :
#en_tete
width/ 760px;

"/"tabou ":" pas tabou.

Dans le code CSS, j' ai entré ces données :
#en_tete
(...)
background-image:url("essai_nvu/images/logo_manuscrits.jpg")

à la fin de cette ligne comme de chaque ligne, un ";" à la fin, sinon, ça va pas marcher...

Corrige les erreurs de code, et sors le css du dossier "css", ça devrait aller...
à bientôt...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Fabrice.Tres.Net]

Pour ta deuxième question: J' ai créé un dossier qui s' appelle "essai_nvu" dans lequel j' ai tous mes fichiers XHTML, et deux dossiers nommés, l' un, "css" dans lequel j' ai la feuille de style externe créée avec Kompozer, et l' autre qui se nomme "images", dans lequel j' ai l' image appellée "logo_manuscrit.jpg".
J' ai codé de différentes façons, comme suit: (j' abrège mon code) (images/logo_manuscrits.jpg), et (essai_nvu/images/logo_manuscrits.jpg)
et encore (../images/logo_manuscrits.jpg), sans résultat, d' où mon appelle au secours, et encore merci pour ton aide

J' ai du louper quelque chose, mais je ne vois quoi ?

Tu as loupé que les références se font par rapport au fichier css.

Si tu as :
.
<images>
<js>
<php>
<styles> contenant le fichier messtyles.css


alors on aura des url de la forme url(../images/Fond.png) faisant référence à une image du répertoire images !

[Mongo Bob]

je comprends qu'on crée un dossier pour plusieurs feuilles de style, mais quand y'en a qu'une...

alors on aura des url de la forme url(../images/Fond.png) faisant référence à une image du répertoire images !

les "..." signifient que la feuille css dans un dossier va pouvoir s'adresser à un contenu dans un dossier externe?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[Fabrice.Tres.Net]

je comprends qu'on crée un dossier pour plusieurs feuilles de style, mais quand y'en a qu'une...

alors on aura des url de la forme url(../images/Fond.png) faisant référence à une image du répertoire images !

les "..." signifient que la feuille css dans un dossier va pouvoir s'adresser à un contenu dans un dossier externe?

Point 1: tu peux isoler des bouts de css que tu utilises peu dans un fichier css, je pense en particuliers aux styles liés à des formulaires ou à des pages nécessitant une présentation différente... et bien entendu les styles pour l'impression, ou même pour les périphériques audio,...

Point 2: pas compris donc je fais une réponse dans le noir!
Pour faire référence à un fichier externe, il suffit de mettre "url(http://bidule.com/images/monjolifond.png)"
Les 2 points ( .. ) font référence au répertoire père

[Mongo Bob]

les "..." signifient que la feuille css dans un dossier va pouvoir s'adresser à un contenu dans un dossier externe?

mon erreur, comme disent les british, pas trois points mais deux :
tabou :

Code : Tout sélectionner

url(.../images/Fond.png)

pas tabou y'a bon :

Code : Tout sélectionner

url(../images/Fond.png)

Donc si je mets ".." au début du chemin, mon css inclus dans un dossier va pouvoir retrouver une image incluse dans un dossier voisin. Bon. C'est pour ça que je viens ici, on en apprend tous les jours.

Point 2: pas compris donc je fais une réponse dans le noir!

si, c'était bien ça.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[castor14]

Bonjour à tous ceux qui m' aident et qui me lisent !!!!!!

Depuis hier soir j' ai planché pour comprendre certaines choses !

Suite à vos interventions que je mettais en application, rien ne fonctionnait !

Je me suis pris la tête, afin de comprendre le pourquoi . Plusieurs choses étaient en causes.
1) Tout d' abord, mon "logo_manuscrit.jpg" a été créé avec INKSCAPE, (très bon logiciel de vectorisation), que j' avais renommé en jpg il y a de cela quelque temps, mais il a dut ce passer quelque chose, que Komposer n' aime pas dans cette image. Il refuse de l' afficher. J' ai donc, pour me rendre compte, recréé un logo rapidement fait avec Photofiltre, avec l' extension JPG. Ce nouveau logo mis en dehors de mon dossier "images" s' affiche. Dès que je le mets dans le dossier "images" il ne s' affiche plus. Bien sûr, après correction du code. Donc si je code de la façon suivante : background-image:url(nouveau_logo.jpg); il s' affiche, si je code de ces deux façons : background-image:url(images/nouveau_logo.jpeg); et background-image:url(../images/nouveau_logo.jpg); il ne s' affiche pas. Donc, pour que cela fonctionne, il ne faut pas de dossiers, pour la feuille de style, ni pour les images. Pour moi cela fonctionne dans ces conditions, pour d'autres je ne sais pas ?

Merci à vous tous de votre aide, il n' empêche que Kompozer est un excellent logiciel de création de page web, malgré quelques difficultés rencontrées en cours d' utilisation ! Et bravo à toute l' équipe qui soutient Kompozer, car rendre un code Xhtml est une chose, mais rendre un code valide W3C en est une autre
Castor14

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

[Mongo Bob]

Donc, pour que cela fonctionne, il ne faut pas de dossiers, pour la feuille de style, ni pour les images

non, on peut utiliser des dossiers, c'est quand même plus clair pour s'y retrouver, c'est la feuille css dans laquelle se trouve le code qui va chercher l'image que je n'ai pas l'habitude de mettre dans un dossier, mais selon Fabrice, avec les "..", ça marche.
J'ai aussi l'habitude de mettre l'image qui doit être appelée par le même code dans un dossier par contre, en indiquant le nom du dossier au début, ça marche. Quand tu as 50 images pour ton site, c'est quand même utile! Tu n'as jamais autant de feuilles de style.
les 3 façons que tu indiques :

Donc si je code de la façon suivante : background-image:url(nouveau_logo.jpg); il s' affiche, si je code de ces deux façons : background-image:url(images/nouveau_logo.jpeg); et background-image:url(../images/nouveau_logo.jpg);

doivent fonctionner chacune selon l'emplacement de ta feuille de style, dans l'ordre :

1. background-image:url(nouveau_logo.jpg) : ta feuille de style n'est pas dans un dossier, ni ton image
2. background-image:url(images/nouveau_logo.jpeg) : ta feuille de style n'est pas dans un dossier, ton image, si
3. background-image:url(../images/nouveau_logo.jpg) : ta feuille de style et ton image sont chacune dans un dossier.

mon "logo_manuscrit.jpg" a été créé avec INKSCAPE, (très bon logiciel de vectorisation), que j' avais renommé en jpg il y a de cela quelque temps, mais il a dut ce passer quelque chose, que Komposer n' aime pas dans cette image. Il refuse de l' afficher.

mmm... pas très scientifique, ça... Kpz n'aime pas...

à+...
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[chinon37]

Bonjour,

1) Tout d' abord, mon "logo_manuscrit.jpg" a été créé avec INKSCAPE, (très bon logiciel de vectorisation), que j' avais renommé en jpg il y a de cela quelque temps,

Comment ça, renommé???? simplement remplacé svg par jpg??
Un fichier svg et un fichier jpg sont 2 choses totalement différentes et, sauf erreur, Inkscape n'enregistre pas en jpg. Il faut passer par une application de conversion.
ce n'est pas l'extension d'un fichier qui fait la qualité de celui-ci, mais son contenu.

Une image dont le type est reconnu par le web s'affichera toujours (même insérée dans la page à partir de KompoZer) pour peu que le chemin vers celle-ci soit juste.

Il me semblerait plus simple pour t'apporter de l'aide que tu donnes l'adresse de ton site en ligne...

[Fabrice.Tres.Net]

Moi j'ai un fichier mp3 de Mireille Mathieu, mais comme je ne l'aime pas je l'ai renommé JacquesBrel.mp3... Et bien, cela ne marche pas, c'est toujours Mireille qui chante, il y a certainement un bug!

[GAUNCE]

Moi j'ai un fichier mp3 de Mireille Mathieu, mais comme je ne l'aime pas je l'ai renommé JacquesBrel.mp3... Et bien, cela ne marche pas, c'est toujours Mireille qui chante, il y a certainement un bug!

Tu devrais faire attention! à une certaine altitude l'oxygène se raréfie!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6