Style CSS : image arrière plan

adameteve

Habitué
Salut à tous, :)

Windows XP Pro - Internet Explorer 6 - Dreamweaver MX 2004

Je suis à mon boulot et je travaille dans Dreamweaver MX 2004. Je ne parviens pas à placer une image gif en arrière-plan de chaque page de mon site (statique), via un style CSS.

J'ai créé une feuille de style CSS VerdanaNoir.css (pour les liens URL et le texte statique) dans laquelle j'ai ajouté un style .Fond dans la catégorie "Arrère-plan".

Le problème c'est que mon image n'apparaît nul part dans mes pages html, alors que les autres styles css fonctionnent bien (liens URL soulignés au passage de la souris, mise en forme du texte statique).

Voici le code de ma feuille de styles :
[cpp].Fond {
background-attachment: fixed;
background-image: url(images/CleSolFondPage.gif);
background-repeat: no-repeat;
background-position: center center;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: underline;
}
.VerdanaNoir10 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.VerdanaNoir10Gras {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
.VerdanaNoir12Gras {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
}
.Verdana12GrasBlanc {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.Verdana10GrasBlanc {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
[/cpp]

Ca fait une heure que je fais des tas d'essais, et je comprends de moins en moins !

Merci d'avance à tous ceux qui pourront m'aider, :merci:
Adam
 

Johan_et_Pirlouit

Grand Maître
/!\ Attention au chemin vers ton image !! C'est un classique..

Le lien dans ta CSS qui pointe vers ton image doit se faire à partir de l'emplacement de ta CSS..

En clais, si ta CSS est dans le même répertoire que ton image, ça te donnera ceci :
[cpp].Fond {
background-attachment: fixed;
background-image: url(CleSolFondPage.gif); // Cas d'une image dans le même dossier que la CSS
background-repeat: no-repeat;
background-position: center center;
}[/cpp]
Pour le reste, le code CSS est fait pour être simplifié..

>>
>>
>> (taduction française des spécifications CSS2 W3C)

:merci:
 

adameteve

Habitué
Oui j'ai vérifié et appliquer les 2 possibilités (Racine du site ou à partir du document)... et rien. C'est à devenire dingue cette histoire :fou: ! Tout semble correct mais aucune image apparaît.

Si tu as d'autres suggestions.

Je te laisse le code de ma page, on ne sait jamais :

[cpp]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/ModeleENM.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ecole - Pr&eacute;sentation</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.Style12 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
<style type="text/css">
<!--
.Style13 {font-size: 10px}
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
.Style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; }
.Style3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10;
font-weight: bold;
}
.Style4 {font-size: 10}
-->
</style>

<link href="VerdanaNoir.css" rel="stylesheet" type="text/css">

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url();
}
-->
</style>
</head>

<body>

<table width="800" border="0" cellpadding="3" cellspacing="0">
<tr bgcolor="#FFFF99">
<td height="5" colspan="3" bgcolor="#FFFF99"></td>
</tr>
<tr bgcolor="#FFFF99">
<td width="3" bgcolor="#FFFF99">&nbsp;</td>
<td width="205"><a href="index.htm"><img src="images/LOGO-CiteDesMusiques_2.gif" width="205" height="44" border="0"></a></td>
<td align="center" valign="middle" bgcolor="#FFFF99"><table border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td width="50"><span class="Style11"><a href="Ecole_Presentation.htm">Ecole</a></a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="105"><span class="Style11"><a href="Enseignement.htm">Enseignement</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="65"><span class="Style11"><a href="http://www.addim89.org/siteweb/agenda/index.asp" target="_blank">Agenda</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="115"><span class="Style11"><a href="Divertissement.htm">Divertissement</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="45"><span class="Style11"><a href="FAQ.htm">FAQ</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="60"><span class="Style11"><a href="Contact.htm">Contact</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="60"><span class="Style11"><a href="Interne.php">Interne</a></span></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="3"><span class="Style4"></span><span class="Style4"></span> <!-- InstanceBeginEditable name="TableauENM" -->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="left" valign="middle">
<td height="80" colspan="2"><span class="Style13 Style12"></span> <table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top"><span class="VerdanaNoir12Gras"><strong> <strong>Ecole Nationale de Musique d'Auxerre</strong><span class="Style13 Style12"><strong></strong></span><br>
<span class="Style13 Style12"><strong>--------------------------------------------------------------------------------------------------------------------------------------------</strong></span> </strong></span></td>
</tr>
<tr>
<td height="16" align="left" valign="middle" bgcolor="#9DE7FF"><table border="0" cellpadding="0" cellspacing="0">
<tr align="center" valign="middle">
<td width="138" align="left"><span class="VerdanaNoir10Gras"><a href="Ecole_Presentation.htm">&nbsp;Pr&eacute;sentation de l'&eacute;cole</a> </span></td>
<td width="1" bgcolor="#000000"></td>
<td width="110"><span class="VerdanaNoir10Gras"><a href="Ecole_InscriptionTarifs.htm">Inscription/Tarifs</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="105"><span class="VerdanaNoir10Gras"><a href="Ecole_ParentsEleves.htm">Parents d'&eacute;l&egrave;ves </a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="80"><span class="Style11"><a href="Ecole_Professeurs.htm" class="VerdanaNoir10Gras">Professeurs</a></span></td>
<td width="1" bgcolor="#000000"></td>
<td width="70"><span class="VerdanaNoir10Gras"><a href="Ecole_Reglement.htm">R&egrave;glement</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15" colspan="2" align="left" valign="middle" class="VerdanaNoir12Gras">&nbsp;</td>
</tr>
<tr>
<td width="15" height="15" align="left" valign="middle" class="VerdanaNoir12Gras"><table width="10" height="10" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFCC33">
<tr>
<td></td>
</tr>
</table></td>
<td width="685" align="left" valign="middle" class="VerdanaNoir12Gras">Pr&eacute;sentation de l'&eacute;cole</td>
</tr>
<tr>
<td height="9" colspan="2" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33"><span class="Style12 Style13"><strong> &nbsp;QUOI ?</strong></span></td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"><span class="VerdanaNoir10">L'Ecole Nationale de Musique d'Auxerre propose un enseignement musical complet et attractif pour :<br>
- Pratiquer en amateur pour son plaisir<br>
- ou continuer des &eacute;tudes dans un but professionnel et pr&eacute;parer des dipl&ocirc;mes nationaux (Dipl&ocirc;me d'Etudes Musicales). </span></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;POUR QUI ?</td>
</tr>
<tr>
<td height="5" colspan="2" class="VerdanaNoir10"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Les enfants d&egrave;s l'&acirc;ge de 4 ans.<br>
- Les adultes dans la limites des places disponibles. </td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;QUAND ? </td>
</tr>
<tr>
<td height="5" colspan="2" class="VerdanaNoir10"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">En dehors des horaires scolaires (surtout le soir, et les mercredi et samedi)<br>
ou durant les horaires scolaires (pour les 6&egrave;me et 5&egrave;me <em>Musique Plus</em> &agrave; horaires am&eacute;nag&eacute;es).</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;COMMENT ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">L'&eacute;l&egrave;ve acquiert une formation compl&egrave;te avec plusierus enseignants de dsciplines compl&eacute;mentaires :<br>
<u>En cours collectifs</u> de formation musicale, analyse, chant choral, ensembles.<br>
<u>En cours individuels et de petits groupes</u> en instrument.<br>
<br>
Les pratiques collectives sont privil&eacute;gi&eacute;es (chant choral, musiques de chambre, orchestre).<br>
Les &eacute;l&egrave;ves se produisent r&eacute;guli&egrave;rement en public (audition, spectacles, concerts) seuls, avec accompagnateur, ou en ensembles orchestres. </td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;CURSUS</td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Formation musicale (solf&egrave;ge musical) et chant choral sont enseign&eacute;s d&egrave;s la premi&egrave;re ann&eacute;e.<br>
- Les cours d'instrument d&eacute;butent d&egrave;s la 2&egrave;me ann&eacute;e (parfois d&egrave;s la 1&egrave;re ann&eacute;e, selon l'instrument).<br>
- Le cursus normal comprend trois cycles de 4 &agrave; 5 ans chacun.<br>
- Les acquisitions sont appr&eacute;ci&eacute;es par &eacute;valuation continue (globale, comme la formation), accompagn&eacute;e d'un examen en fin de cycle. </td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras">&nbsp;O&Ugrave; ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">Tous les cours ont lieu &agrave; l'ENM.<br>
<br>
7, rue de l'&icirc;le aux plaisirs 89000 AUXERRE<br>
(entre le Pont Paul Bert et la Gare SNCF) <br>
<BR>
Tel : T&eacute;l : 03.86.18.05.70 <BR>
Fax : 03.86.18.05.72<BR>
Email : <A
href="mailto:enm.mairie@auxerre.com"><STRONG>enm.mairie@auxerre.com</STRONG></A></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr align="center" valign="top">
<td colspan="2"> <table width="10" border="1" cellpadding="0" cellspacing="0" bordercolor="#EAAF00">
<tr>
<td><table width="1" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
<tr>
<td><table width="400" border="0" align="center" cellpadding="7" cellspacing="0">
<tr>
<td align="left" valign="middle" bgcolor="#FFDF80" class="VerdanaNoir10">Comme tout langage, la ma&icirc;trise de la musique n&eacute;cessite du travail ainsi qu'une immersion.<br>
<br>
Ainsi, sans travail personnel, notamment &agrave; la maison, les efforts d&eacute;ploy&eacute;s par l'&eacute;quipe de l'ENM seront vains.
<p class="VerdanaNoir10"> Pensez-vous s&eacute;rieusement qu'il soit possible </p>
<p class="VerdanaNoir10"> d'apprendre &agrave; parler une langue &eacute;trang&egrave;re </p>
<p class="VerdanaNoir10"> avec deux heures de cours par semaine, </p>
<p class="VerdanaNoir10"> entrecoup&eacute;s de longues journ&eacute;es sans m&ecirc;me en entendre le son ?... </p>
<p class="VerdanaNoir10"> Pour cette raison, nous encourageons &agrave; pratiquer un peu chaque jour, et &agrave; inscrire ce moment privil&eacute;gi&eacute; dans l'emploi du temps quotidien. </p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>
<!-- InstanceEndEditable --></td>
</tr>
</table>
</body>
<!-- InstanceEnd --></html>
[/cpp]

Merci encore, :merci:
Adam

 

Johan_et_Pirlouit

Grand Maître
Bin, pour être franc, ton code est à chier :/....... Comme le mien quand j'ai commencé il y a bientôt 5 ans et que j'ai gardé près de 4 ans :D (entre tables au début et "calques" en position "absolute" par la suite)..

Dans ton code HTML, je n'ai pas vu d'élément faisant appel à ta class Fond [:spamafote].. Donc, tu ne risques pas de voir s'afficher ton image de fond..

Mais d'une manière générale, il te faut apprendre le standard de programmation en vigueur depuis 2000 : le XHTML / CSS.

Plus précisément, le code XHTML d'un côté (fichiers .htm ou .html), les CSS de l'autre (fichiers .css)..

Et pas de tables utilisées pour la mise en page, les DIV sont là pour ça.. En plus, tu nous fais des tables imbriquées :kaola: !!

Alors voici des liens pour t'aider :
- Toutes les bases sur la prog XHTML / CSS + exercices >>
- Tutoriels CSS >>
- A propos des standards du Web + tutos >>
- Taduction française des spécifications CSS2 W3C >>

:merci:
 

Anubis_

Expert
Puis-je également m'insurger ?

Je plains le pauvre (x)html qui est utilisé n'importe comment dans bien des cas, mais ce sujet est récurrent (donc là concrétement je me retiens de hurler pour les tableaux).

Alors je vais gueuler pour le CSS qui est utilisé n'importe comment...

alors le css, ok, c'est des mots anglais et des chiffres entre des accolades, mais on dirait que presque personne n'a remarqué que ce qu'il y avait devant l'accolade ouvrantes, et appelé "sélecteur", mérite d'être réfléchi également. et les cascades ça n'a l'air d'intéresser personne non plus.

Voici quelques (juste quelques-uns) détails qui doivent faire pleurer les gens qui ont réfléchi sur CSS :
----------------------
[cpp].MenuPrincipal { (...) }[/cpp]
couplé à
[cpp]<div class="MenuPrincipal">(...)</div>[/cpp]
au lieu de
[cpp]#MenuPrincipal { (...) }[/cpp]
couplé à
[cpp]<div id="MenuPrincipal">(...)</div>[/cpp]
(en faisant l'hypothèse farfelue que le document ne contient qu'un seul menu principal...)
----------------------
[cpp].Fond { (...) }[/cpp]
couplé à
[cpp]<body class=".Fond">(...)[/cpp]
au lieu de
[cpp]body { (...) }[/cpp]
----------------------
[cpp].Titre1Menu { (...) }
.Titre1CadrePrincipal { (...) }[/cpp]
couplé à
[cpp]<div><p class="Titre1Menu"> (...) </p></div>
<div><p class="Titre1CadrePrincipal"> (...) </p></div>[/cpp]
au lieu de
[cpp]h1 div#Menu { (...) }
h1 div#CadrePrincipal { (...) }[/cpp]
couplé à
[cpp]<div id="Menu"><h1> (...) <h1></div>
<div id="CadrePrincipal"><h1> (...) </h1></div>[/cpp]
----------------------

le sélecteur "." + nom est inadapté dans beaucoup de cas
HTML et CSS ont une sémantique, c'est encore mieux quand elle reflète la sémantique du contenu.
 

adameteve

Habitué
J'ai résolu mon problème sans savoir exactement d'où il venait. J'ai simplement trouvé la balise body dans ma page et je l'ai complétée.

Je suis nul en code, je vais donc lire la doc que vous m'avez conseillée.

Merci, :merci:
Adam
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 098
Messages
6 717 073
Membres
1 586 286
Dernier membre
petitangebleu1977
Partager cette page
Haut