Développement site en local

Pochtroi · 14 Avril 2015

Bonjour,

Je suis en train de mettre à jour mon site, en HTML4.01/PHP3 pour passer en HTML5/PHP5.6.6.
J'ai téléchargé MAMP et tenté de le configurer. Dans l'ensemble, ça fonctionne plutôt bien mais je rencontre un gros souci au moment de mettre en place le CSS :
Au chargement d'une page, Firefox (comme Safari) voit bien toutes les feuilles de styles mais seule la première est visible. Je dois activer les suivantes en allant dans "Outils->Développement web->Editeur de style" comme sur la photo suivante :

Les feuilles de styles sont chargées dans une page séparée pour ne pas avoir à réécrire tout ce code sur chaque page :
index.php :

Bloc de code:

<!DOCTYPE html>
<html>
   <head>
    <?php include ('Commun/meta.php'); ?>
    <title>Accordéons Fratèlibénar, réparateur et accordeur d'accordéons dans les Pays de la Loire (Sarthe-72)</title>
   </head>
[...]

meta.php :

Bloc de code:

 <!-- Meta -->
  <meta charsert="utf-8" />
  <meta name="author" content="Antoine Besnard" />
  [...]
  <!-- Styles -->
  <link rel="stylesheet" title="Normal" href="Styles/normal.css" />
  <link rel="stylesheet" title="Balises-speciales" href="Styles/special.css" />
  <link rel="stylesheet" title="Menu" href="Styles/menu.css" />
  <noscript>
  <link rel="stylesheet" title="Menu-sans-JS" href="Styles/menunoJS.css" />
  </noscript>
  <link rel="stylesheet" title="Non IE" href="Styles/allnav.css" />
  <!--[if lt IE 7]>
  <link rel="stylesheet" title="IE 6" href="Styles/IE6.css" />
  <![endif]-->
  <!--[if lte IE 7]>
  <link rel="stylesheet" title="IE 6-7" href="Styles/IE7.css" />
  <![endif]-->
  <!--[if lt IE 9]>
  <link rel="stylesheet" title="IE 6-7-8" href="Styles/IE8.css" />
  <![endif]-->
[...]

Est-ce que vous savez ce qui se passe ? Pensez-vous que le problème sera réglé quand je mettrai les fichiers en ligne ?

Merci pour votre aide

MrLouki · 15 Avril 2015

Pochtroi a dit:
Bonjour,

Je suis en train de mettre à jour mon site, en HTML4.01/PHP3 pour passer en HTML5/PHP5.6.6.
J'ai téléchargé MAMP et tenté de le configurer. Dans l'ensemble, ça fonctionne plutôt bien mais je rencontre un gros souci au moment de mettre en place le CSS :
Au chargement d'une page, Firefox (comme Safari) voit bien toutes les feuilles de styles mais seule la première est visible. Je dois activer les suivantes en allant dans "Outils->Développement web->Editeur de style" comme sur la photo suivante :

Les feuilles de styles sont chargées dans une page séparée pour ne pas avoir à réécrire tout ce code sur chaque page :
index.php :

Bloc de code:

<!DOCTYPE html> <html> <head> <?php include ('Commun/meta.php'); ?> <title>Accordéons Fratèlibénar, réparateur et accordeur d'accordéons dans les Pays de la Loire (Sarthe-72)</title> </head> [...]

meta.php :

Bloc de code:

 <meta charsert="utf-8" /> <meta name="author" content="Antoine Besnard" /> [...]  <link rel="stylesheet" title="Normal" href="Styles/normal.css" /> <link rel="stylesheet" title="Balises-speciales" href="Styles/special.css" /> <link rel="stylesheet" title="Menu" href="Styles/menu.css" /> <noscript> <link rel="stylesheet" title="Menu-sans-JS" href="Styles/menunoJS.css" /> </noscript> <link rel="stylesheet" title="Non IE" href="Styles/allnav.css" />    [...]

Est-ce que vous savez ce qui se passe ? Pensez-vous que le problème sera réglé quand je mettrai les fichiers en ligne ?

Merci pour votre aide

Salut,

Et quand tu met le code brut (càd celui de meta.php) directement dans l'index ?

Si cela fonctionne, on peut déjà réperer plus précisement le problème.

momo-fr · 16 Avril 2015

Première chose à faire c'est enlever les capitales à tes dossiers :
- <?php include ('commun/meta.php'); ?>
- href="styles/special.css" />

Ça devrait aider, sinon je ne vois rien d'autre (ou peut être un javasscript ?) qui peut bloquer le chargement des feuilles de styles…

Pochtroi · 16 Avril 2015

Bonjour,

Merci pour votre aide mais rien de tout ça ne règle le problème. J'ai remarqué qu'en revanche, quand j'intègre un iframe dans le site (comme par exemple une carte GoogleMaps), de nouvelles feuilles de style sont chargées et cette fois elles sont immédiatement visibles.
Je n'ai toujours pas fait d'essai en ligne, j'espère que ce sera différents, mais je ne vois as pourquoi. Dans un sens je ne vois pas non plus pourquoi mes feuilles sont chargées en "caché".

J'ai essayé d'inverser l'ordre de chargement des feuilles, seule la première est visible au chargement.
En désactivant Javascript dans Firefox, le problème existe toujours...

C'est quoi c'boxon?

momo-fr · 16 Avril 2015

Essaye de bien décrire le lien, genre :

Bloc de code:

<link rel="stylesheet" media="all" type="text/css" href="style.css" />

Pochtroi · 16 Avril 2015

Toujours rien...
Ce n'est pas si grave si ça se met à fonctionner correctement quand je mettrai tout en ligne, mais ça me fait peur si ça ne change pas.

momo-fr · 16 Avril 2015

Ce n'est pas normal, en local ça doit marcher, je ne vois pas pourquoi ça marcherais en ligne… une URL en relatif quelque part ? J'avoue que PHP est moi on fait deux… ou quatre… ou plus.

Pochtroi · 16 Avril 2015

momo-fr a dit:
une URL en relatif quelque part ?

Je ne comprends pas ce que tu veux dire ?

En effet, là je bosse sur Linux (Xampp) à la place de mon OS X sous Xamp et le problème est identique, donc dur à croire que ce soit différent en ligne...
Mais je ne comprends pas du tout pourquoi

Pour info, voici le code source HTML généré : (oui j'ai remis les majuscules mais ça ne changeait rien et c'est tellement plus lisible pour moi...)

Bloc de code:

<!DOCTYPE html>
<html>
   <head>
    <!-- Meta -->
  <meta charset="utf-8" />
  <meta name="author" content="Antoine Besnard" />
  <meta name="description" content="Accordéons Fratèlibénar, Facteur, Accordeur et Réparateur d'accordéons, Facteur d'accordéons automatiques" />
  <meta name="keywords" content="réparation accordéon, accordage accordéon, facteur accordéons, accordéon automatique, vente instruments de musique, accordéon occasion, cavagnolo, accordéon, bandonéon, harmonica, harmonium, concertina, accordina, mélodica, accordeur d'accordéons, réparateur d'accordéons, fratelli, besnard" />
  <meta name="reply-to" content="[email protected]" />
  <!--margin auto pour IE8-->
  <meta http-equiv="X-UA-Compatible" content="IE=8" />

  <!-- Styles -->
  <link rel="stylesheet" media="all" type="text/css" title="Normal" href="Styles/normal.css" />
  <link rel="stylesheet" media="all" type="text/css" title="Balises-perso" href="Styles/special.css" />
  <link rel="stylesheet" media="all" type="text/css" title="Menu" href="Styles/menu.css" />
  <!--[if lt IE 7]>
  <link rel="stylesheet" title="IE 6" href="Styles/IE6.css" />
  <![endif]-->
  <!--[if lte IE 7]>
  <link rel="stylesheet" title="IE 6-7" href="Styles/IE7.css" />
  <![endif]-->
  <!--[if lt IE 9]>
  <link rel="stylesheet" title="IE 6-7-8" href="Styles/IE8.css" />
  <![endif]-->

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="Styles/favicon.png" />
  <!--[if IE]>
  <link rel="shortcut icon" type="image/x-icon" href="Styles/favicon.ico" />
  <![endif]-->

  <!-- Javascript -->
  <script type="text/javascript" src="Java/ahah.js"></script>
  <script type="text/javascript" src="Java/menu.js"></script>
  <script type="text/javascript" src="Java/scriptforms.js"></script>
  <!-- Ajouter les balises header, section, aside... à IE<9 -->
  <!--[if lt IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

  <!-- RSS -->
  <link rel="alternate" href="http://www.accordeons-fratelibenar.fr/RSS/rss-creations.xml" type="application/rss+xml" title="Dernières Créations de Fratèlibénar" />
  <link rel="alternate" href="http://www.accordeons-fratelibenar.fr/RSS/rss-occasions.xml" type="application/rss+xml" title="Dernières Occasions de Fratèlibénar" />
  <link rel="alternate" href="http://www.accordeons-fratelibenar.fr/RSS/rss-spectacles.xml" type="application/rss+xml" title="Prochains Spectacles de Fratèlibénar" />
  <link rel="alternate" href="http://www.accordeons-fratelibenar.fr/RSS/rss-news.xml" type="application/rss+xml" title="Dernières News de Fratèlibénar" />
      <title>Le coin des accordéons d'occasion de Fratèlibénar</title>
   </head>
  
   <body>

Pochtroi · 17 Avril 2015

C'est vraiment très très bizarre : petit essai au plus simple. J'ai 2 css (normal.css et special.css) dans le même dossier que l'index.php et aucun autre fichier.

Bloc de code:

<!DOCTYPE html>
<html>
  <head>

  <meta charset="utf-8" />
  <link rel="stylesheet" media="all" type="text/css" title="Normal" href="normal.css" />
  <link rel="stylesheet" media="all" type="text/css" title="Special" href="special.css" />
  <title>Essais styles</title>
  </head>

  <body>
  </body>
</html>

Difficile de faire plus simple.

Encore une fois, les feuilles de style (vides toutes les deux) sont chargées par le navigateur mais la seconde est masquée, il faut cliquer sur le petit oeil à côté de la feuille pour l'activer. Dans un autre navigateur que Firefox, je ne sais pas comment l'activer.

momo-fr · 18 Avril 2015

Tu as des outils qui te permettent de voir ce qui est chargé dans ton navigateur, ça permet de trouver l'erreur car intrinsèquement ton code semble bon… mais pour ma part je n'utilise jamais la balise title sur les link CSS, ça pourrait venir de là… je ne sais pas.

Un peu de lecture…

Avec notamment ceci :

Recommendations
Les auteurs doivent s'assurer que chaque feuille de style qui doit toujours s'appliquer est permanente et non alternative.

Pour rendre une feuille de style permanente, il faut spécifier la valeur "stylesheet" pour l'attribut rel, et ne pas spécifier d'attribut title.

Pour rendre une feuille de style par défaut, il faut spécifier la valeur "stylesheet" pour l'attribut rel, et spécifier un attribut title.

Tu vas y arriver… :rolleyes:

Pochtroi · 18 Avril 2015

MERCI !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

C'était bien ça ! C'est pas bien clair leur truc, un attribut type="permanent | default | alternate" aurait été plus clair.
Pour information pour ceux que ça peut intéresser, mon ancien site fonctionnait très bien avec des attributs title sur chaque feuille de style... mais il était défini à "Normal" pour toutes les feuilles alors qu'ici, je leur avais donné des titres différents.

Merci beaucoup, comme disais l'autre, tu me retires un fière chandelle du pied !

PS : je pense que je n'ai pas fini de vous embêter, je n'en suis qu'au début du développement, mais ce sujet est réglé

...

Développement site en local

Pochtroi

Membre actif

MrLouki

Membre confirmé

momo-fr

Ancien Aveyronnais

Pochtroi

Membre actif

momo-fr

Ancien Aveyronnais

Pochtroi

Membre actif

momo-fr

Ancien Aveyronnais

Pochtroi

Membre actif

Pochtroi

Membre actif

momo-fr

Ancien Aveyronnais

Pochtroi

Membre actif

Sujets similaires