[Résolu] Fichiers CSS, répertoires, images

Bonjours à tous. Je débute dans le domaine de la mise en forme et CSS. Comme tout bon débutant, j'ai suivi le tutoral : "Réalisation d'un design complet (XHTML / CSS) en 5 étapes" (après avoir lu les bases...).

J'ai copié le code HTML et CSS dans une page, télécharger les images, et placé tout ça en ligne. Tout est OK.

étape 2 : sortir le code CSS de la page HTML et le placer dans un fichier externe .CSS. Pas de problème je coupe/colle le code CSS dans un fichier styles.css placé dans le meme répertoire que la page html. Ca fonctionne !!

étape 3 : placer la feuille de style dans un répertoire regroupant les (futures) feuilles des styles de mon site. Par example /mes_styles/. Je change le lien dans le cde HTML

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

Mais là pas d'image !! Ok le chemin des images est pris par rapport à l'emplacement de la feuille CSS et non de la feuille HTML. Je change donc tous les chemin d'images en ajoutant ../ (pour revenir dans le répertoire de la page HTML où sont les images)
J'ai retrouvé mes images !!

Enfin presque (et la c'est le drame ) Les images du menu n'apparaissent pas !!! Sauf lorsque la sourie passe dessus : apparition !! Super je viens de trouver comment faire un menu caché en CSS sauf que c'est pas ce que je veux
De plus le titre (4ème étape - Le titre et le menu) qui suis le menu n'est pas placé en dessous du menu mais à la suite de ce dernier.

Hypothèses:
1. l'image servant pour le menu "bg_menu.gif" n'est pas trouvée pour faire le roolover. Mais pourtant le nom de l'image est spécifié 2 fois : dans "ul#menu" et dans "ul#menu li a:hover" et j'ai changé les 2 chemins.
2. pour que le roolover fonctionne, l'image doit être dans le répertoire de la feuille CSS. Mais j'ai copié les images dans ce répertoire et remis les liens initiaux sans succes.

Des idées ???
Modifié par cbe (22 Oct 2006 - 11:55)

Salut cbe,

Comme ça, on a un peu de mal à t'aider à priori...
Il faudrait que tu nous montres le morceau de code, mais si tu as copié-collé, normalement il ne devrait pas y avoir de problème...

As-tu vérifié que les images sont bien toutes présentes et ues les chemins sont bien les bons ?

salut Cygnus,

voici des précisions: le code est celui du tutoriel, j'ai juste copié la partie CSS dans un fichier style.css que j'ai placé dans un répertoire /style avec toutes les images (normalement j'ai bien vérifié...)

En plus il y a que le menu qui cloche !!

J'ai lu le tutoriel sur le rollover et me suis aperçu qu'en fait il n'y a qu'une seule image pour les liens. Donc si quand je passe ma souris sue le lien une image apparait, c'est que le fichier est correctement trouvé.
Donc ce n'est pas un pb de fichier ou de lien.
J'ai augmenté la taille de la ligne contenant les liens, histoire de voir si l'image était bien là, et elle y est !!

J'ai déplacé la ligne :

	background: url(bg_menu.gif) repeat-x 0 -25px ;

qui était dans "ul#menu" dans "ul#menu li" et ça fonctionne !! mieux disons car j'ai encore le titre qui est mal placé. Mais j'ai mes liens qui fonctionnent correctement !!!

Alors d'où viens l'erreur ?? Une faute dans le code du Tutoriel, ou une bizzarerie du CSS ou de IE ??

J'ai comparé le code donné dans l'étape 4, qui ne fonctionne pas et le code souce de cette meme page (bouton droite, afficher source) qui lui fonctionne parfaitement. Les différences sont:
- l'indentation mais je ne pense pas que ça ai un effet ??
- les commentaires positionnés comme cela

  {codecode
}/*commentaire*/

est ce que le fait de placer un commentaire juste après une acolade fermante peut provoquer une erreur ?? (à priori non quand meme)
- les paragraphes suivants :

		h1#header
		{
			height: 258px ;
			margin: 0 ;
			background: url(apple.jpg) no-repeat left top ;
		}

dans le fichier qui fonctionne et

h1#header
{
	height: 258px ;
	background: url(apple.jpg) no-repeat left top ;
	margin: 0 ;
}

dans le fichier qui ne fonctionne pas.

Est ce que la position de la ligne margin: 0; peut influer sue le résultat??

En attendant vos avis ou solutions je fais des tests
Modifié par cbe (22 Oct 2006 - 10:36)

Bon ben j'ai trouvé

C'est les commentaires qui perturbent !!! J'ai enlevé tout les commentaires du fichier qui ne fonctionnais pas: la copie du code du Tutoriel, et ça marche !!!

Conclusion: /*bla bla*/ ne fonctionne pas pour faire des commentaires en CSS !! Merci le Tutoriel

Alors comment fait-t-on pour faire des commentaires ??

cbe a écrit :
Conclusion: /*bla bla*/ ne fonctionne pas pour faire des commentaires en CSS !! Merci le Tutoriel

Alors comment fait-t-on pour faire des commentaires ??

/* commentaire */ fontionne plutôt bien en général, mais je crois que le commentaire doit être seul sur sa ligne.

Si tu veux ajouter un commentaire à la suite d'une règle, tu peux faire ainsi :

.test {
propriété : valeur ; // commentaire
}

Salut

Non, la position de margin ne devrait pas influencer le résultats. Pas plus que les commentaires.

Les commentaires en CSS s'écrivent entre /* et */. Si ça ne fonctionne pas, c'est qu'il te manquait quelque chose (un commentaire mal fermé, par exemple).

Raphael > Il n'y a pas de précision dans la spécification sur la position des commentaires. En gros, il est écrit "n'importe où mais pas au milieu d'une propriété", non ?

En effet, c'est pas les commentaires qui genent !! C'est un ; à la fin d'une ligne de commentaire, en dehors des /* */ qui gene !!! ici pour etre précis :

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	position: relative ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose possible grâce à la propriété display: block ; qui transforme le lien en élément de type block, auquel on peut donner des propriétés de taille. On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */;
/* Le text-indent négatif est fait pour pouvoir ne cacher le texte hors de la page, ce que nous voulons. Ainsi il reste exploitable pour les syntèses vocales */

avant dernière ligne !!

Un modo peut-il fermer le sujet (je n'ai pas trouvé de bouton "résolu" !! et corriger le tutoriel
Ca éviteras des prises de tête aux prochains nouveaux

Merci en tout cas pour vos réponses !!!!
Modifié par cbe (22 Oct 2006 - 10:55)

cbe a écrit :
Un modo peut-il fermer le sujet (je n'ai pas trouvé de bouton "résolu" !! et corriger le tutoriel

Hello.

On ne ferme les sujets que lorsqu'ils partent en vrille (spam, contraire aux règles, etc.), car tous les sujets peuvent être enrichis par d'autres avis.

Pour le "bouton Résolu", quelque chose me dit que tu n'as pas correctement lu les Règles du forum que tu as pourtant lues et approuvées en t'inscrivant


Je t'invite donc à relire certaines parties de ces règles et d'avoir la courtoisie de bien vouloir les appliquer.

Merci

PS : je corrige le tutoriel
Modifié par Raphael (22 Oct 2006 - 11:22)

Désolé Je n'ai pas lu les règles en effet A force d'avoir lu 10 fois la meme regle sur différents forum je passe mon chemin à cette étape.

Encore désolé.