28172 sujets

CSS et mise en forme, CSS3

Bonjour

C'est mon 1er post et je suis quasi débutant en XHTML et CSS.

Voila mon soucis :
J'utilise le gabarit04 d'alsacreation pour refondre l'un de mes sites web (créés il y a longtemps sous DW4)

J'ai un soucis pour faire afficher une image de fond sur ce gabarit.
voici le code utilisé dans le fichier .css :

body {
	color: #F0E39E;
	background: lightslategray;
	background-image: url(images/fond_bois.png);
	background-repeat: repeat;
	background-position: center;
}


Je ne comprends pas car l'image "fond_bois.png" ne s'affiche pas du tout

Quelqu'un peut-il m'aider et me dire ce qu'il manque dans la feuille de style ?

Merci beaucoup
Modifié par miroune (22 Dec 2008 - 22:15)
Adieu FranZz et merci pour ton aide rapide

As tu besoin de TOUT le code Html de ma page index ou bien ?
Le code de la page concernée en fait !

Es-tu certain que le chemin vers ton image est bon?
Es-tu certain que le chemin vers ta feuille css est bon?
Es-tu certain que l'orthographe de ton .png est bonne? Smiley smile
Modifié par FranZz (22 Dec 2008 - 14:50)
Bonjour,

Déjà, c'est je pense une erreur de définir background dans un premier temps avec juste une valeur pour la couleur, puis différentes propriétés background-image, background-repeat, etc. Soit tu utilises background-color pour la couleur, soit tu regroupes toutes les valeurs avec une seule propriété background.
Note que ce n'est pas tellement une erreur technique (le code actuel sera pris en compte correctement je pense), mais plutôt une erreur méthodologique: l'écriture utilisée n'est pas très rigoureuse et peut amener à faire des erreurs.

Ensuite, si l'image ne s'affiche pas du tout cela peut avoir trois raisons principales:
1. L'élément auquel on a appliqué l'image de fond a une hauteur ou une largeur de zéro pixels.
2. Le chemin vers l'image est mauvais.
3. Le fichier de l'image est corrompu (mauvais transfert FTP par exemple), ou bien le fichier a des permissions trop restreintes qui ne permettent pas au serveur web de l'envoyer au navigateur (ce qui retourne souvent une erreur 403).

Dans le cas présent je voterais plutôt pour le numéro 2.
bon voila le code de ma page appelée (ATTENTION : celle-ci n'est pas encore en ligne car je refond mon site web en local avant de le mettre en ligne)


C:\Documents and Settings\Cedric\amaya\2\index.html
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="fr" lang="fr">
<head>
  <meta name="description"
  content="Appartement pour 6 a 7 personnes a louer dans le chalet La Louviere a La Toussuire Savoie France. Situé plein sud au pied des pistes de ski, venez voir les chamois et les marmottes, et pourquoi pas apercevoir le loup..."
  />
  <meta name="keywords"
  content="location,chalet,vacances,vacance,meublé,meublés,meuble,meubles,savoie,france,gite,aiguilles d arves,arvan,villards,montagne,ski,hiver,été,ete,alpes,la toussuire,maurienne,sybelles,vacances,jean pierre vidal,randonnée pedestre,raquettes,neige,surf,snowboard,station de ski,telesiege,teleski,remontées mécaniques,damage,avalanche,poudreuse,flocon,marmottes,chamois,aigle,loup,massif,soleil,vallée,corniche,terrasse,sud,est,saint jean de maurienne,miel,hermine,faune,flore,raclette,fondue,tartiflette,savoyard,sud"
  />
  <meta name="author" content="C Girollet" />
  <meta name="owner" content="C Girollet" />
  <meta name="Identifier-URL" content="http://www.chalet-lalouviere.net" />
  <meta name="Date-Creation-yyyymmdd" content="20030510" />
  <meta name="revisit-after" content="2 days" />
  <meta name="Copyright" content="C Girollet" />
  <meta name="verify-v1" content="EfDD2yl7HhnMSRVWOuR+zVkS7sAC2Kk+2vRWnH71GAM="
  />
  <meta name="generator" content="Amaya, see  http://www.w3.org/Amaya/"  />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Chalet La Louvière La Toussuire Savoie France / Louez votre
  appartement en chalet</title>
  <!-- La feuille de styles "base.css" doit être appelée en premier. -->
  <link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
  <link rel="stylesheet" type="text/css" href="styles/modele04.css"
  media="screen" />
</head>

<body>

<div id="global">

<div id="navigation">
<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="liste.html">Le gîte</a></li>
  <li><a href="utiliser.html">Accès</a></li>
  <li><a href="licence.html">Disponibilités</a></li>
  <li><a href="credits.html">Faune et flore</a></li>
  <li><a href="credits.html">Livre d'or</a></li>
  <li><a href="credits.html">Liens</a></li>
</ul>
</div>
<!-- #navigation -->

<div id="contenu">
<h2 style="text-align:center;">Chalet La Louvière - Savoie - France</h2>

<h3 style="text-align:center;">Bienvenue au chalet La Louvière situé à La
Toussuire au coeur des Alpes de Savoie dans le domaine skiable des Sybelles
(310 km de pistes)</h3>

<p style="text-align:center;">Réservez et louez votre appartement 3 pièces
(50m²) en chalet skis aux pieds, pour 6 personnes été comme hiver</p>

<p style="text-align:center;">(Pour toute réservation par internet, une
bouteille de vin de Savoie vous sera offerte ! )</p>

<p style="text-align:center;"><img alt="Nouveau !"
src="images/1_gif_nouveau_bleu.gif" width="35" height="11" />Les tarifs Hiver
2008-2009 ont été mis à jour<img alt="Nouveau !"
src="images/1_gif_nouveau_bleu.gif" width="35" height="11" /></p>

<p style="text-align:center;"><img alt="Le chalet La Louvière en été"
src="images/image_accueil_chalet_450x254_v2.png" width="450" height="254" /></p>

<p style="text-align:center;"><a href="http://www.loup.org/"><img
alt="loup.org" src="http://www.loup.org/spip/IMG/png/jaime_loups.png"
width="80" height="15" /></a></p>

<p></p>

</div>
<!-- #contenu -->
</div>
<!-- #global -->
</body>
</html>


J'ai vérifé le chemin et il est bon (l'image lorsque je la positionne dans mon body pour voir si ça fonctionne).

Je vais redéfinir le code de mon .css selon les conseils de florent, à savoir (et dis moi si c'est bon) de la manière suivante :


/* Général */
body {
	color: #F0E39E;
	background: lightslategray url(images/fond_bois.png) repeat center;
}


A vous lire
Modifié par miroune (22 Dec 2008 - 18:35)
Alors premier point: virer la déclaration XML (en tout début de code HTML) qui concrètement ne te sert à rien et qui fait buguer IE6.

Deuxième point: pour la modification du code CSS, c'est ok.

Troisième point:
miroune a écrit :
J'ai vérifé le chemin et il est bon (l'image lorsque je la positionne dans mon body pour voir si ça fonctionne).

Le chemin est bon depuis la page HTML, mais ta feuille de styles est-elle placée dans la page HTML ou à un autre niveau (dans un sous-dossier par exemple)?

Pour rappel, les chemins relatifs exprimés dans un fichier CSS partent du fichier CSS et pas de la page HTML.

Si ta structure est la suivante:
/index.html
/styles/base.css
/styles/modele04.css
/images/fond_bois.png
alors le chemin depuis la feuille de styles devrait être:
../images/fond_bois.png
et pas
images/fond_bois.png

Modifié par Florent V. (22 Dec 2008 - 22:02)
Dans le mille Smiley smile

C'est bien les "../" qui manquaient

...mais là je reste pantois, je ne comprends pas pourquoi il faut ses "../" dans mon fichier model04.css pour faire afficher l'image.

ta phrase "les chemins relatifs exprimés dans un fichier CSS partent du fichier CSS et pas de la page HTML." est encore un mystère pour moi Smiley cligne

Merci encore même si le chemin est long mais rien n'est impossible
Quand tu indiques un chemin dans une feuille de styles, il peut être de deux natures:
1. Absolu, par exemple http://www.example.org/dossier/fichier ou encore /dossier/fichier.
2. Relatif, par exemple dossier/fichier.

Un chemin relatif a forcément un point de départ. Un chemin relatif, c'est une série d'instructions pour aller d'un point A (un fichier donné, par exemple une page HTML ou un fichier CSS) à un point B (par exemple un fichier image à utiliser, ou un fichier CSS à appliquer ou importer, etc.).

Dans le cas d'une feuille de styles CSS qui appelle une image de fond (ou tout autre fichier), si on utilise un chemin relatif ce chemin doit partir du fichier .css, et pas de la page HTML. Pas grand chose d'autre à dire sur ce point, c'est comme ça que ça marche et puis c'est tout. Smiley cligne

Dans un chemin relatif, les .. indiquent que l'on remonte d'un niveau dans l'arborescence. Donc si mon point de départ est le suivant:
/dossier1/dossier1.1/dossier1.1.1/fichierA
et que je veux aller au fichier
/dossier2/dossier2.1/dossier2.1.1/fichierB
, mon chemin relatif va être:
../../../dossier2/dossier2.1/dossier2.1.1/fichierB


On remonte de trois niveaux (jusqu'à la racine), puis on redescend en passant par les bons dossiers pour arriver au fichierB.

La FAQ parle aussi des chemins relatifs et absolus:
http://forum.alsacreations.com/faq/faq-93-Quelle-est-la-difference-entre-les-chemins-relatifs-et-absolus-.html
Modifié par Florent V. (23 Dec 2008 - 00:05)