18041 sujets

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

Pb avec background-image lors exportation de feuille de style [Résolu]

Bonjour,
j'essaie de transformer une feuille de style interne en externe
les images de fond que j'utilise dans les blocs en-tête et menu ne s'affichent plus avec la feuille de style externe alors que tout va bien quand la feuille est interne ...
qq'un peut-il m'aider ? merci d'avance !
voici mes codes :
NB : les fichiers images et la feuille de style externe se trouvent dans des sous-dossiers (images et styles, respectivement) du dossier dans lequel se trouvent mes pages html
- ma page html initiale (donc avec feuille de style interne), qui fonctionne :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>mise en page css</title><script
 type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script><style title="style 1" type="text/css">
#conteneur {
border-style: none;
border-color: #ffffff;
margin: 0 auto;
background-color: #ffffff;
font-size: smaller;
width: 900px;
}
#entete {
border: 1px solid gray;
height: 80px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/banniere8.jpg);
}
body {
margin: 0;
padding: 0;
background: white none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 15em;
float: left;
margin-top: 20px;
}
#menu dt {
border: 1px solid gray;
margin: 2px 0;
background: #000066 url(images/bouton_menu.jpg) repeat scroll left top;
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
color: #ffffff;
font-weight: inherit;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu dt a {
border: none;
text-decoration: none;
display: block;
height: 100%;
color: #ffffff;
}
#menu li a {
border: none;
text-decoration: none;
display: block;
height: 100%;
color: #000099;
background-color: #ffff66;
}
#menu li a:hover, #menu dt a:hover {
background: #ff9900 none repeat scroll 0% 50%;
text-decoration: underline;
color: #ffffff;
}
#pubs {
border-color: #cc0000;
top: 0;
left: 0;
width: 15em;
float: left;
height: 450px;
clear: left;
}
#texte {
background-color: #ffffff;
left: 5px;
padding-left: 15px;
margin-left: 15em;
margin-right: 5%;
}
#pied {
background-color: #ccffff;
clear: both;
}
img {
margin-right: 20px;
margin-bottom: 20px;
}
</style></head>
<body><div id="conteneur"><div id="entete"></div><dl
 id="menu"><dt onclick="javascript:montre();"><a
 href="#">Accueil
</a></dt><dt onclick="javascript:montre('smenu2');"><a
 href="#">Le mot de la Présidente</a></dt><dd
 id="smenu2"><ul><li><a href="#">Sous-menu
2.1</a></li><li><a href="#">Sous-menu 2.2</a></li>
</ul></dd><dt onclick="javascript:montre('smenu3');"><a
 href="#">Les dirigeants
</a></dt><dd id="smenu3"><ul><li><a
 href="#">Sous-Menu 3.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu4');"><a
 href="#">Actualités
</a></dt><dd id="smenu4"><ul><li><a
 href="#">Sous-menu 4.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu5');"><a
 href="#">Enseignement
</a></dt><dd id="smenu5"><ul><li><a
 href="#">Sous-Menu 5.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu6');"><a
 href="#">Compétition
</a></dt><dd id="smenu6"><ul><li><a
 href="#">Sous-menu 6.1</a></li></ul></dd><dt
 onclick="javascript:montre();"><a href="#">Tennis
loisir
</a></dt><dt onclick="javascript:montre();"><a
 href="#">Inscriptions et tarifs
</a></dt><dt onclick="javascript:montre();"><a
 href="#">Galerie photos
</a></dt><dt onclick="javascript:montre();"><a
 href="#">Recherche partenaires
</a></dt></dl><div style="text-align: center;"
 id="pubs"><br><img
 style="width: 71px; height: 71px;" alt="logo fft"
 src="images/logo%20fft.jpg"><br><img
 style="width: 108px; height: 72px;" alt="comite isere tennis"
 src="images/comit%E9%20is%E8re%20tennis.jpg"><br><img
 style="width: 150px; height: 100px;" alt="classim"
 src="images/Classim.jpg"></div><div id="texte"><h1
 style="color: rgb(204, 0, 0); font-style: italic;">Accueil</h1><h2>le
SNET vous souhaite une très bonne année 2007, sur les courts et
ailleurs !</h2><h2><img
 style="width: 168px; height: 224px;" alt="ace ?"
 src="images/FOTO%20TOURNOI%203%20172.jpg"></h2><br>Vous
disposez d'un
droit d'accès gratuit, de modification, de
rectification et de suppression des données qui vous concernent (art.34
de la loi informatique et libertés N°78-17 du 6 janvier 1978).<br>Pour
exercer ce droit, adressez-vous à :&nbsp;Olivier Attrée, 180 chemin
des Ayets, 38330 ST NAZAIRE les EYMES&nbsp;ou <a
 href="mailto:snet@fft.fr">snet@fft.fr</a><h2><br><img
 style="width: 300px; height: 227px; position: absolute; top: 200px; left: 475px;"
 alt="belledonne" src="images/moyen_belledonne1.jpg"></h2><h2></h2><br><br><br></div>
<div id="pied">Pied-de-page</div>
</div></body></html>

- ma feuille de style externe (donc après exportation) :
#conteneur {
border-style: none;
border-color: #ffffff;
margin: 0 auto;
background-color: #ffffff;
font-size: smaller;
width: 900px;
}
#entete {
border: 1px solid gray;
height: 80px;
background-repeat: no-repeat;
background-position: left top;
background-image: url(images/banniere8.jpg);
}
body {
margin: 0;
padding: 0;
background: white none repeat scroll 0% 50%;
font-family: verdana,arial,sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 80%;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 15em;
float: left;
margin-top: 20px;
}
#menu dt {
border: 1px solid gray;
margin: 2px 0;
background: #000066 url(images/bouton_menu.jpg) repeat scroll left top;
cursor: pointer;
height: 20px;
line-height: 20px;
text-align: center;
color: #ffffff;
font-weight: inherit;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
background: #ffffff none repeat scroll 0% 50%;
text-align: center;
}
#menu dt a {
border: none;
text-decoration: none;
display: block;
height: 100%;
color: #ffffff;
}
#menu li a {
border: none;
text-decoration: none;
display: block;
height: 100%;
color: #000099;
background-color: #ffff66;
}
#menu li a:hover, #menu dt a:hover {
background: #ff9900 none repeat scroll 0% 50%;
text-decoration: underline;
color: #ffffff;
}
#pubs {
border-color: #cc0000;
top: 0;
left: 0;
width: 15em;
float: left;
height: 450px;
clear: left;
}
#texte {
background-color: #ffffff;
left: 5px;
padding-left: 15px;
margin-left: 15em;
margin-right: 5%;
}
#pied {
background-color: #ccffff;
clear: both;
}
img {
margin-right: 20px;
margin-bottom: 20px;
}

- ma page html après exportation de la feuille de style :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>mise en page css</title><script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script><link rel="stylesheet" type="text/css" title="Design" href="styles/essai_style_ext.css" /></head>
<body><div id="conteneur"><div id="entete"></div><dl id="menu"><dt onclick="javascript:montre();"><a href="#">Accueil
</a></dt><dt onclick="javascript:montre('smenu2');"><a href="#">Le mot de la Présidente</a></dt><dd id="smenu2"><ul><li><a href="#">Sous-menu 2.1</a></li><li><a href="#">Sous-menu 2.2</a></li>
</ul></dd><dt onclick="javascript:montre('smenu3');"><a href="#">Les dirigeants
</a></dt><dd id="smenu3"><ul><li><a href="#">Sous-Menu 3.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu4');"><a href="#">Actualités
</a></dt><dd id="smenu4"><ul><li><a href="#">Sous-menu 4.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu5');"><a href="#">Enseignement
</a></dt><dd id="smenu5"><ul><li><a href="#">Sous-Menu 5.1</a></li>
</ul></dd><dt onclick="javascript:montre('smenu6');"><a href="#">Compétition
</a></dt><dd id="smenu6"><ul><li><a href="#">Sous-menu 6.1</a></li></ul></dd><dt onclick="javascript:montre();"><a href="#">Tennis
loisir
</a></dt><dt onclick="javascript:montre();"><a href="#">Inscriptions et tarifs
</a></dt><dt onclick="javascript:montre();"><a href="#">Galerie photos
</a></dt><dt onclick="javascript:montre();"><a href="#">Recherche partenaires
</a></dt></dl><div style="text-align: center;" id="pubs"><br><img style="width: 71px; height: 71px;" alt="logo fft" src="images/logo%20fft.jpg"><br><img style="width: 108px; height: 72px;" alt="comite isere tennis" src="images/comit%E9%20is%E8re%20tennis.jpg"><br><img style="width: 150px; height: 100px;" alt="classim" src="images/Classim.jpg"></div><div id="texte"><h1 style="color: rgb(204, 0, 0); font-style: italic;">Accueil</h1><h2>le
SNET vous souhaite une très bonne année 2007, sur les courts et
ailleurs !</h2><h2><img style="width: 168px; height: 224px;" alt="ace ?" src="images/FOTO%20TOURNOI%203%20172.jpg"></h2><br>Vous
disposez d'un
droit d'accès gratuit, de modification, de
rectification et de suppression des données qui vous concernent (art.34
de la loi informatique et libertés N°78-17 du 6 janvier 1978).<br>Pour
exercer ce droit, adressez-vous à :&nbsp;Olivier Attrée, 180 chemin
des Ayets, 38330 ST NAZAIRE les EYMES&nbsp;ou <a href="mailto:snet@fft.fr">snet@fft.fr</a><h2><br><img style="width: 300px; height: 227px; position: absolute; top: 200px; left: 475px;" alt="belledonne" src="images/moyen_belledonne1.jpg"></h2><h2></h2><br><br><br></div>
<div id="pied">Pied-de-page</div>
</div></body></html>

Modifié par olivier attree (17 Jan 2007 - 12:06)
Bonjour,

C'est sûrement un problème de chemin.
Essayes:

background-image: url(../images/banniere8.jpg);
+1 pour le problème de chemin.

Les chemins vers les images doivent partir de la feuille de style. Si tu as l'arborescence suivante :
page.html
images/image.jpg
styles/essai.css

Pour pointer depuis essai.css vers image.jpg, il te faudra le chemin suivant :
background-image: url(../images/image.jpg);
effectivement, c'était la solution !! merci de m'avoir aidé si rapidement !

désolé pour la naïveté de ma question, j'avais lu plusieurs tutoriels (orientés Nvu/KompoZer) (j'ai cherché aussi dans la FAQ du forum, ... mal sans doute) et dans aucun je n'ai vu explicitement cette syntaxe pour les chemins ;

en fait avec l'éditeur CSS de KompoZer je ne devrais même pas avoir à me préoccuper du chemin mais quand je clique sur ma feuille interne puis sur "Exporter la feuille de style et utiliser la version exportée" ça ne marche pas ; savez-vous si c'est un bug de KompoZer ?
Sujet clos
Aller à