Style CSS : image arrière plan

FORUM Tom's Hardware » Programmation » HTML / Javascript » Style CSS : image arrière plan

Style CSS : image arrière plan

96 utilisateurs inconnus

Voir les posts : Par défaut Tous Les bonnes notes Les notes insuffisantes

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Style CSS : image arrière plan

adameteve

Plus d'informations

11-08-2005 à 14:51:41

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 :

Code :

.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;

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, :jap:
Adam

Johan_et_P irlouit

Inside my own Second Life

Plus d'informations

11-08-2005 à 15:17:34

Masquer

/!\ 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 :

Code :

.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;
}

Pour le reste, le code CSS est fait pour être simplifié..

>> http://openweb.eu.org/
>> http://css.alsacreations.com/
>> http://www.yoyodesign.org/doc/w3c/css2/cover.html (taduction française des spécifications CSS2 W3C)

:jap:

---------------
Retrouvez moi sur mon blog : http://www.nicolasullern.net/leblog/
Et aussi sur :
http://www.linkedin.com/in/nicolasullern
http://www.viadeo.com/fr/profile/nicolas.ullern
http://www.copaing.net/johanpirlouit/

adameteve

Plus d'informations

11-08-2005 à 15:33:39

Masquer

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 :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ecole - Présentation</title>
<style type="text/css">
<!--
.Style12 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
<style type="text/css">
<!--
.Style13 {font-size: 10px}
-->
</style>
<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"> </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>
<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"> Présentation de l'é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'élè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èglement</a></span></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15" colspan="2" align="left" valign="middle" class="VerdanaNoir12Gras"> </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ésentation de l'école</td>
</tr>
<tr>
<td height="9" colspan="2" align="left" valign="top"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33"><span class="Style12 Style13"><strong>  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 études dans un but professionnel et préparer des diplômes nationaux (Diplôme d'Etudes Musicales). </span></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> POUR QUI ?</td>
</tr>
<tr>
<td height="5" colspan="2" class="VerdanaNoir10"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Les enfants dès l'âge de 4 ans.<br>
- Les adultes dans la limites des places disponibles. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> 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ème et 5ème <em>Musique Plus</em> à horaires aménagées).</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> COMMENT ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">L'élève acquiert une formation complète avec plusierus enseignants de dsciplines complé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égiées (chant choral, musiques de chambre, orchestre).<br>
Les élèves se produisent régulièrement en public (audition, spectacles, concerts) seuls, avec accompagnateur, ou en ensembles orchestres. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> CURSUS</td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">- Formation musicale (solfège musical) et chant choral sont enseignés dès la première année.<br>
- Les cours d'instrument débutent dès la 2ème année (parfois dès la 1ère année, selon l'instrument).<br>
- Le cursus normal comprend trois cycles de 4 à 5 ans chacun.<br>
- Les acquisitions sont appréciées par évaluation continue (globale, comme la formation), accompagnée d'un examen en fin de cycle. </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="15" colspan="2" bgcolor="#FFCC33" class="VerdanaNoir10Gras"> OÙ ? </td>
</tr>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="VerdanaNoir10">Tous les cours ont lieu à l'ENM.<br>
<br>
7, rue de l'île aux plaisirs 89000 AUXERRE<br>
(entre le Pont Paul Bert et la Gare SNCF) <br>
<BR>
Tel : Té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"> </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îtrise de la musique nécessite du travail ainsi qu'une immersion.<br>
<br>
Ainsi, sans travail personnel, notamment à la maison, les efforts déployés par l'équipe de l'ENM seront vains.
<p class="VerdanaNoir10"> Pensez-vous sérieusement qu'il soit possible </p>
<p class="VerdanaNoir10"> d'apprendre à parler une langue étrangère </p>
<p class="VerdanaNoir10"> avec deux heures de cours par semaine, </p>
<p class="VerdanaNoir10"> entrecoupés de longues journées sans même en entendre le son ?... </p>
<p class="VerdanaNoir10"> Pour cette raison, nous encourageons à pratiquer un peu chaque jour, et à inscrire ce moment privilégié dans l'emploi du temps quotidien. </p></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Merci encore, :jap:
Adam

Johan_et_P irlouit

Inside my own Second Life

Plus d'informations

11-08-2005 à 17:20:20

Masquer

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 (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 >> http://www.siteduzero.com/xhtml-css/
- Tutoriels CSS >> http://css.alsacreations.com/
- A propos des standards du Web + tutos >> http://openweb.eu.org/
- Taduction française des spécifications CSS2 W3C >> http://www.yoyodesign.org/doc/w3c/css2/cover.html

:jap:

Anubis_

Plus d'informations

11-08-2005 à 18:06:04

Masquer

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 :
----------------------

Code :

.MenuPrincipal { (...) }

couplé à

Code :

<div class="MenuPrincipal">(...)</div>

au lieu de

Code :

#MenuPrincipal { (...) }

couplé à

Code :

<div id="MenuPrincipal">(...)</div>

(en faisant l'hypothèse farfelue que le document ne contient qu'un seul menu principal...)
----------------------

Code :

.Fond { (...) }

couplé à

Code :

<body class=".Fond">(...)

au lieu de

Code :

body { (...) }

----------------------

Code :

.Titre1Menu { (...) }
.Titre1CadrePrincipal { (...) }

couplé à

Code :

<div><p class="Titre1Menu"> (...) </p></div>
<div><p class="Titre1CadrePrincipal"> (...) </p></div>

au lieu de

Code :

h1 div#Menu { (...) }
h1 div#CadrePrincipal { (...) }

couplé à

Code :

<div id="Menu"><h1> (...) <h1></div>
<div id="CadrePrincipal"><h1> (...) </h1></div>

----------------------

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.

Message édité par Anubis_ le 11-08-2005 à 18:10:52

adameteve

Plus d'informations

11-08-2005 à 18:13:02

Masquer

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, :jap:
Adam

Aller à :

FORUM Tom's Hardware » Programmation » HTML / Javascript » Style CSS : image arrière plan

Page générée en 0.624 secondes

Annonces Google

Sujets relatifs

voir tout

Actualités relatives

Les dernières actualités

voir tout

Les derniers tests

voir tout

Dans les albums

Les ressources relatives

Les téléchargements