Bonjour à tous, et avant toute chose, Félicitations et un grand Merci pour ce site qui démontre une fois de plus la réelle utilité du net.

Je suis un Néophyte (dans le sens le plus pur du terme), et j'ai un petit soucis, que je ne réussi pas à résoudre depuis plusieurs jours (je n'ai personne pour m'aider) :

Je met en application ce que j'apprends, seul et d'après quelques bouquins, et mon soucis est le suivant.

J'ai créé une page HTML (appelée Jardin.htm) et sa CSS associée (Jardin.css).
Jusqu'ici tout va bien, cela réagit à peu près comme je le souhaite.
Or, j'ai voulu créer une deuxième page, et réutilisant mon "Jardin.css" (le principal interet de la feuille de style) et là, comme suis plus bas, hormis mon element "body", mon code HTML me donne l'impression de ne pas reconnaitre les ID que je créé.

Exemple :

CSS :

body {
	background: #ebebeb url(ppeint.jpg) top left repeat-x;
	font-family: Arial;
	font-size: 13px;
	color: #676565;
}

#bando_passion {
	width: 960px;
	height: 505px;
	background: url(bando-passion.jpg) top left no-repeat;
}



HTML :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title>William Christie - Thiré - Le jardin - Une passion vivante</title>
  <link rel="stylesheet" style="text/css" href="Jardin.css" />
  
  </head>
  <body>
  
<div id="general">
    <div id="bando_passion">
    </div>
  
  
  
</div>
  </body>
</html>



Sachant que tous mes fichiers sont en local et dans le même répertoire, savez vous ce qui se passe ?

merci d'avance...
Modifié par Anundril (23 Apr 2009 - 14:13)
Bonjour

D'abord tu devrais rééditer ton message pour présenter les codes selon la norme (encadrés de [ code ] Smiley smile )

Ensuite si ta deuxième page ne retrouve pas la CSS c'est peut-être qu'elle n'est pas au même niveau hiérarchique que la première, donc si elle est dans un dossier :
 <link rel="stylesheet" style="text/css" href="../Jardin.css" />
Arsene a écrit :
Bonjour

D'abord tu devrais rééditer ton message pour présenter les codes selon la norme (encadrés de [ code ] Smiley smile )

Ensuite si ta deuxième page ne retrouve pas la CSS c'est peut-être qu'elle n'est pas au même niveau hiérarchique que la première, donc si elle est dans un dossier :
 <link rel="stylesheet" style="text/css" href="../Jardin.css" />



Bonjour Arsene, et merci de ta réponse

j'ai modifié mon message afin d'être à la norme.
Par contre, tous mes fichiers sont au même niveau hierarchique (si tu entends par là leur emplacement "géographique" dans mon arborescence)...
Bonjour
je vais peut être dire une bêtise mais...
tu la sort d'où ta div general?
Si elle n'est pas définit dans ta css je vois mal comment le navigateur peu l'interpréter?
Montre nous toute ta css pour mieux y voir, stp
tchô
boro64 a écrit :
Bonjour
je vais peut être dire une bêtise mais...
tu la sort d'où ta div general?
Si elle n'est pas définit dans ta css je vois mal comment le navigateur peu l'interpréter?
Montre nous toute ta css pour mieux y voir, stp
tchô


'Jour Boro64,

oui, j'aurai du mettre ma CSS complète effectivement

Voici donc



* {
	padding: 0;
	margin: 0;
	border: 0;
}
body {
	background: #ebebeb url(ppeint.jpg) top left repeat-x;
	font-family: Arial;
	font-size: 13px;
	color: #676565;
}
#general {
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin: 0 auto 20px auto
}
#bando_home {
	width: 960px;
	height: 505px;
	margin-left: 10px;
	margin-right: 10px;
	background: url(bando_home.jpg) top left repeat-x;
}
#1 {
	width: 653px;
	height: 435px;
	position: relative;
	margin-top: 73px;
	margin-left: 20px;
	background: url(1.jpg) top left;
}
#titre_home {
	width: 430px;
	height: 92px;
	margin-left: 50px;
	background: url(titre_home.jpg);
}
#menu {
	margin-top: 50px;
	margin-left: 10px;
	width: 650px;
	height: 40px;
	background: url(menu.jpg) no-repeat;
}
#texte1 {
	width: 630px;
	height: 13px;
	margin-left: 0px;
	text-align: left;
	font: bold;
}
#texte2 {
	margin-top: 0px;
	margin-left: 10px;
	margin-bottom: 20px;
	width: 650px;
	text-align: justify;
}
#contact {
	width: 653px;
	margin: 0 auto 15px auto;
	padding-top: 5px;
	border-top: 1px solid #919191;
}
#contact p {
	text-align: center;
}
#contact a {
	color: #676565;
	text-decoration: none
}
#contact a:hover {
	color: #919191;
	text-decoration: underline
}

#bando_passion {
	width: 960px;
	height: 505px;
	background: url(bando-passion.jpg) top left no-repeat;
}



merci encore
Hummmmm...Comme ça, sans tester, je me dis que ta div general n'a pas de valeur "height" mais des margin, et que ta div bando-passion a une valeur height stricte....je dirais comme ça, une valeur "height" de la div "general" en : auto par exemple serait peut être une solution (si ton pb vient de là, car tu ne nous dit pas quel est le problème exactment...une dv qui n'apparait pas? laquelle?)
boro64 a écrit :
Hummmmm...Comme ça, sans tester, je me dis que ta div general n'a pas de valeur "height" mais des margin, et que ta div bando-passion a une valeur height stricte....je dirais comme ça, une valeur "height" de la div "general" en : auto par exemple serait peut être une solution (si ton pb vient de là, car tu ne nous dit pas quel est le problème exactment...une dv qui n'apparait pas? laquelle?)


En fait, aucune de mes divs n'apparait, je n'ai que le Body qui à l'air d'être "compris"...
Donc, je me dis que j'ai bien relié mon .htm et mon .css. Seulement, les divs ne veulent pas s'afficher.
Pour info, ce CSS m'a servi pour une autre page, et je n'ai eu aucun probleme concernant les valeurs ...
(bobo ma tete la Smiley cligne )
Peut-tu nous montrer les deux pages (celle qui marche et celle qui ne marche pas) en ligne ?

Il est effectivement possible que, comme tes div n'ont aucune contenu, elle n'apparaissent pas car le "contenu absent" ne prend pas assez de place.

Pour tester la "hauteur" affichée d'une div, le plus simple est de lui attribuer une bordure (border:1px solid red) pour voir exactement que qu'elle fait.
Laurie-Anne a écrit :
Peut-tu nous montrer les deux pages (celle qui marche et celle qui ne marche pas) en ligne ?

Il est effectivement possible que, comme tes div n'ont aucune contenu, elle n'apparaissent pas car le "contenu absent" ne prend pas assez de place.

Pour tester la "hauteur" affichée d'une div, le plus simple est de lui attribuer une bordure (border:1px solid red) pour voir exactement que qu'elle fait.


Bonjour Laurie-Anne,

Avec plaisir.
La page qui ne marche pas est dans mon premier message, voici celle qui fonctionne :



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title>Acceuil - William Christie</title>
  <link rel="stylesheet" style="text/css" href="Jardin.css" />
  
  </head>
  <body>

<div id="general">
  <div id="bando_home">
    <div id="1">
    </div>
  
  </div>
  <div id="titre_home">
  </div>
  <div id="menu">
  </div>
  <div id="texte1">… ou l'Arcadie d'un musicien
  </div>
  <div id="texte2"><br>Lorsque vous arrivez dans le village de Thiré, dans le sud du département de la Vendée, vous ne pouvez vous douter de la surprise qui vous attend lorsque vous frachissez le portail du Bâtiment, demeure du chef d'orchestre franco-américain William Christie, spécialiste de musique baroque. En 1985, ce dernier tombe amoureux d'un logis de la fin du 16 ème/début du 17ème siècle, dans un état pitoyable, qu'il décide de sauver de la ruine. Cet endroit, dénué de toute végétation, va lui donner l'opportunité de créer de toutes pièces un jardin inspiré des jardins italiens et français du grand siècle, époque chère à notre musicien. En évolution permanente depuis sa création il y a plus de vingt ans, le Jardin du Bâtiment s'agrandit et s'enrichit, le tout orchestré par William Christie.
La vieille bâtisse au milieu d'une étendue bien fruste est devenue un havre de beauté et de paix. "Jardin remarquable" depuis 2004, le Jardin du Bâtiment a été inscrit à l'Inventaire Supplémentaire des Monuments Historiques en 2006.
Amoureux des jardins, laissez-vous séduire par les photos de ce site, tout en sachant que vous pouvez vous rendre sur place puisque le jardin est accessible au public.
  </div>
 
  <div id="contact">
    <p><a href="http://www.rhesusweb.com">Conception / Réalisation : Rhésusweb</a>
     - <a href="contact.html">Contactez-nous</a>
     - <a href="liens.html">Liens</a>
</div>

  </body>
</html>


Laurie-Anne a raison...si ta div est vide il semble normal qu'elle n'apparaisse pas. Tu as essayé en appelant une div avec contenu?
Edit: je viens de tester en ligne,bien entendu je n'ai pas test .jpg, mais j'ai toutes les div appelée... Visible ...ICI...
Modifié par boro64 (23 Apr 2009 - 15:04)
boro64 a écrit :

Arf Smiley bawling
Je suis perdu, car j'ai bien remplacé ma div "vide" (qui me sert de conteneur général) par une div avec du contenu (du texte) et cela ne fonctionne pas ...
J'ai également utilisé ta méthode, Laurie-Anne, avec le
border:1px solid red

et le résultat : rien, nada.

La seule chose apparaissant est le papier peint définit dans le Body...
(toutes mes excuses, ça peut vous sembler futile, mais j'en ai perdu le sommeil hier, à force d'y réflechir)
Smiley eek ???? tu as regardé le lien que j'ai mis????l texte est dans ta balise "bando_passion" .....
boro64 a écrit :
Smiley eek ???? tu as regardé le lien que j'ai mis????l texte est dans ta balise "bando_passion" .....

lol, oui, toutes mes excuses, je viens de voir.
Cependant je ne saisis pas : ma div "general" étant vide, je devrais avoir un cadre blanc de la taille définie dans celle ci, et ensuite, une image (correspondant à la div "bando_passion").
mais le texte passe bien (je viens de le saisir).
Cela voudrait dire que mon fichier HTML n'arrive pas à lire les IDs, mais uniquement les élements (de type BODY, etc)...
est-ce bien cela ?
Bonjour,

En vrac:

1. Utiliser un Doctype en bonne et due forme. Les Doctype HTML 4.01 Transitional tronqués (sans URL de la DTD), c'est le mal, ça fait passer les navigateurs en mode Quirks et le mode Quirks c'est le mal.

Recherche à faire:
- Outil Squelettor ici même sur Alsacréations.
- Doctype, ici même sur Alsacréations.
- Mode Quirks, ici même sur Alsacréations.

Tout va bien, il ne faut pas aller trop loin. Smiley smile

2. Tu utilises des majuscules dans tes noms de fichiers, et comme séparateur de mots tu utilises tour à tour des underscore (_) et des tirets (-). Je te conseille de n'utiliser que des minuscules, pas d'espaces, et soit les traits de soulignement soit les tirets mais pas les deux. Ça évitera les bêtes fautes de frappe dans les noms de fichiers, par exemple.

3. Ton code HTML contient des erreurs. C'est mal.

Hop: http://validator.w3.org

4. Je ne vois pas de titres (éléments H1, H2...) dans tes contenus HTML. Quelques lacunes en HTML de base?

Recherche à faire:

- Introduction à la sémantique HTML.

5. Apprendre à se servir d'un outil tel que Firebug pour déceler soi-même une partie des problèmes serait un plus. Smiley cligne

Recherche à faire:

- Firebug.

6. Les Reset CSS, c'est mal.

Recherche à faire:
- Reset CSS (ici même sur Alsacréations).
- Feuille de styles de base (ici même sur Alsacréations).

Bonne continuation. Smiley smile
Modifié par Florent V. (23 Apr 2009 - 15:31)
Oupss...Grillé par maître Florent V....J'allais y venir (vu des <p> sans </p> par exemple...)
Effectivement, il semble que tu doives commencer par maitriser m'sieur html...Un conseil pour la suite: met tes photos dans des dossiers à part; là dans un même dossier tu as tes images, ta css, tes pages html....bonjour le fouillis pour t'y retrouver par la suite. Ordre et méthode vont t'être nécessaire, jeune padawan. Smiley ravi
A Firebug, j'ajouterai la barre "web developer" de FF...Ha, et une image de 960*505 en background....je te déconseille...mais bon....chacun son truc....
Florent V. a écrit :
Bonjour,

En vrac:

1. Utiliser un Doctype en bonne et due forme. Les Doctype HTML 4.01 Transitional tronqués (sans URL de la DTD), c'est le mal, ça fait passer les navigateurs en mode Quirks et le mode Quirks c'est le mal.

Recherche à faire:
- Outil Squelettor ici même sur Alsacréations.
- Doctype, ici même sur Alsacréations.
- Mode Quirks, ici même sur Alsacréations.

Tout va bien, il ne faut pas aller trop loin. Smiley smile

2. Tu utilises des majuscules dans tes noms de fichiers, et comme séparateur de mots tu utilises tour à tour des underscore (_) et des tirets (-). Je te conseille de n'utiliser que des minuscules, pas d'espaces, et soit les traits de soulignement soit les tirets mais pas les deux. Ça évitera les bêtes fautes de frappe dans les noms de fichiers, par exemple.

3. Ton code HTML contient des erreurs. C'est mal.

Hop: http://validator.w3.org

4. Je ne vois pas de titres (éléments H1, H2...) dans tes contenus HTML. Quelques lacunes en HTML de base?

Recherche à faire:

- Introduction à la sémantique HTML.

5. Apprendre à se servir d'un outil tel que Firebug pour déceler soi-même une partie des problèmes serait un plus. Smiley cligne

Recherche à faire:

- Firebug.

6. Les Reset CSS, c'est mal.

Recherche à faire:
- Reset CSS (ici même sur Alsacréations).
- Feuille de styles de base (ici même sur Alsacréations).

Bonne continuation. Smiley smile


Arf
ça c'est du point par point
Smiley langue

1. Je vais de suite aller voir cela de mes propres yeux

2. Je vais suivre tes conseils et banir :
- Les majuscules de mes noms de fichiers
- N'utiliser qu'un seul type de séparateur de mots

3. Je vois l'utilité de faire valider le code, je ne m'en étais pas encore servi (j'ai la barre web-developer de Firefox, qui permet entre autres de le faire).

4. J'ai effectivement quelques lacunes en HTML de base, puisque je n'ai aucune notion scolaire de celui-ci : je tente d'apprendre par moi-même et viens de découvrir alsacreations, qui sans jeter de fleurs, est vraiment top.
Donc, je dois tout reprendre depuis le début en HTML, si je te suis ?

5. J'installerai dès que possible Firebug

6. Je vais me plonger dans tout ça

Merci de ta réponse détaillée Florent, qui même si elle ne m'apporte pas de piste pour mon soucis, me permet de me rendre compte de certaines failles et faire en sorte de les corriger pour la suite.
boro64 a écrit :
Oupss...Grillé par maître Florent V....J'allais y venir (vu des <p> sans </p> par exemple...)
Effectivement, il semble que tu doives commencer par maitriser m'sieur html...Un conseil pour la suite: met tes photos dans des dossiers à part; là dans un même dossier tu as tes images, ta css, tes pages html....bonjour le fouillis pour t'y retrouver par la suite. Ordre et méthode vont t'être nécessaire, jeune padawan. Smiley ravi
A Firebug, j'ajouterai la barre "web developer" de FF...Ha, et une image de 960*505 en background....je te déconseille...mais bon....chacun son truc....



Merci Boro64, je vais m'organiser un peu mieux alors
Et comme je suis là pour apprendre, vive la critique ! (sans ironie)

En tout cas, je reste sur une très bonne impression de ce forum, tant en terme de réactivité que de sympathie.