28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je viens vers vous pour un souci que je n'explique pas:

J'ai une feuille de style séparée, une page d'index qui par défaut m'affiche un lien "Collection", si je clique sur collection, je met à jour la variable page, qui lorsqu'elle vaut "collection" fait inclure un fichier "index_collection.php", au coeur de ma page d'index.

Le souci c'est que lorsque la variable page ne vaut rien, ma feuille de style est bien prise en compte, mais dès que j'inclue le fichier "index_collection.php" elle disparait.

Pourtant ce fichier ne contient aucun élément de type body, html ou autre, ni de mise en forme, pour moi il devrait s'inclure bêtement dans le div prévu à cet effet et ne pas affecter la mise en page due à la feuille de style ???

index.php
<html>
  <head>
    <title>Mon titre</title>
  <LINK REL=STYLESHEET HREF="style.css" TYPE="Text/css">  
  </head>
  <body>
  <div id="header"><? include 'header.php'; ?></div>
  <div id="droite">Un bandeau a droite</div>
  <div id="gauche">Un bandeau a gauche</div>
  <div id="main">
  <?
  if( isset( $_GET['page'] ) ) {$page=$_GET["page"];} else {$page="";}
  if ($page=="collection"){
    include('index_collection.php');
  }
  else {
  ?>
  <a href="./collection/">Collection</a>
  <?
  }
  ?>
  </div>
  <div id="footer"><? include "footer.php"; ?></div>
  </body>
</html>


index_collection.php
<?php
if( isset( $_GET['cat'] ) ) {$cat=$_GET["cat"];} else {$cat="";}
if( isset( $_GET['book'] ) ) {$book=$_GET["book"];} else {$book="";}

// Affichage de la liste des categories
if (( $book == "" ) && ( $cat == "")){
  echo 'Liste des cat&eacute;gories disponibles:<br>';
  
  require('db_connect.php');
  
  $req_get_cats=mysql_query("select cat_name,cat_url FROM cats") or die (mysql_error());
  $cat_nb = mysql_numrows($req_get_cats);
  
  $i=0;
  WHILE ($cat_nb!=$i){
    $cat_name = mysql_result($req_get_cats , $i , "cat_name");
    $cat_url = mysql_result($req_get_cats , $i , "cat_url"); 
    echo '<a href="./'.$cat_url.'.html">'.$cat_name.'</a><br>';
  $i++;
  }
  mysql_close(); 
  
  echo '<a href="../">Retour accueil</a>';

}
// Affichage d'une categorie
if (($cat != "") || ($cat !=0)){
  include('cat.php');
}
// Affichage d'un livre
if ($book != ""){
  include('book.php');  
}
?>


et bien sûr la feuille de style:

body {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
} 
h1, h2 {
font-weight: bold;
font-size: 13px;
} 

div#header {
padding: 10px;
border: solid 1px;
border-color: #cccccc;
clear: both;
} 

div#main {
padding: 10px;
float: middle;
height: 100%;
border: solid 1px;
border-color: #cccccc;
} 

div#droite {
float: right;
width: 15%;
height: 100%;
padding: 10px;
border: solid 1px;
border-color: #cccccc;
} 
div#gauche {
float: left;
width: 15%;
height: 100%;
padding: 10px;
border: solid 1px;
border-color: #cccccc;
} 

div#footer {
padding: 10px;
clear: both;
border: solid 1px;
border-color: #cccccc;

} 
merci pour l'aide que vous pourrez m'apporte Smiley smile

Le code source du résultat HMTL:

Ca marche:
<html>
  <head>
    <title>Titre</title>
  <LINK REL=STYLESHEET HREF="style.css" TYPE="Text/css">  
  </head>
  <body>
  <div id="header"><center><h1>Le Titre du site</h1>Ici apparaitra le bandeau du site</center>
</div>
  <div id="droite">Un bandeau a gauche</div>
  <div id="gauche">Un bandeau a droite</div>
  <div id="main">
    <a href="./collection/">Collection</a>
    </div>
  <div id="footer"><center>Ici apparaitra le pied de page</center>

</div>
  </body>
</html>


Ca marche plus:
<html>
  <head>
    <title>Titre</title>
  <LINK REL=STYLESHEET HREF="ultreia2.css" TYPE="Text/css">  
  </head>
  <body>
  <div id="header"><center><h1>Le Titre du site</h1>Ici apparaitra le bandeau du site</center>
</div>
  <div id="droite">Un bandeau a droite</div>
  <div id="gauche">Un bandeau a gauche</div>
  <div id="main">
  Liste des cat&eacute;gories disponibles:<br><a href="cat1.html">Cat 1</a><br><a href="cat2.html">Cat 2</a><br><a href="../">Retour accueil</a>
</div>
  <div id="footer"><center>Ici apparaitra le pied de page</center>

</div>
  </body>
</html>


Je ne comprends pas, la seule chose qui change est là:
<div id="main">
    <a href="./collection/">Collection</a>
    </div>
-
<div id="main">
  Liste des cat&eacute;gories disponibles:<br><a href="cat1.html">Cat 1</a><br><a href="cat2.html">Cat 2</a><br><a href="../">Retour accueil</a>
</div>


Ca ne devrait pas bazarder la feuille de style, non?
Modifié par Lomic (13 Jul 2007 - 12:43)
Bonjour,

C'est assez difficile de voir ce qui se passe sans page en ligne, vérifie quand même le code source de ta page une fois ta variable attribuée, tu verras peut être pourquoi ça cloche !
ghost a écrit :
difficile de voir ce qui se passe sans page en ligne
je me doute mais pour l'instant mon hébergeur ne me permet pas d'utiliser l'URL rewriting, hors cet embryon de site l'utilise

j'ai construit d'abord la navigation entre les rubriques via l'URL rewriting, et là je commence la mise en forme avec les CSS, mais je ne comprends pas pourquoi lorsque j'inclue la page index_collection.php, le style dégage.

J'inclue déjà l'en-tête, le pied de page, etc... sans souci, mais là avec le index_collection.php, le style disparait, je suis perplexe Smiley confus

[Edit] je viens d'essayer de bypasser l'URL rewriting, en passant moi même à l'index le param "page" valant "collection", et ça marche... je sens que je vais creuser de ce côté

[Edit2] bon ben c'est bien l'URL rewriting qui perd le style, dans les logs apache je vois qu'il cherche mon style.css dans /root/monsite/collection/style.css au lieu de /root/monsite/style.css, pourtant il trouve bien index.php qui est sous /root/monsite/ et pour style est à son niveau donc lorsqu'il l'appelle il ne devrait pas l'appeler depuis /root/monsite/collection/ Smiley confus
Modifié par Lomic (13 Jul 2007 - 11:32)
Lomic a écrit :
bon ben c'est bien l'URL rewriting qui perd le style, dans les logs apache je vois qu'il cherche mon style.css dans /root/monsite/collection/style.css au lieu de /root/monsite/style.css

Si l'url de ta page est /root/monsite/collection au lieu de /root/monsite/index.php?page=collection, c'est tout à fait normal. Si tu simules l'existence de dossier pour faire de jolies URL, le navigateur en tient compte. Ou plutôt: il n'a aucun moyen de savoir que c'est du flan, pour lui c'est exactement pareil que si tu avais vraiment un dossier "collection".

Lomic a écrit :
pourtant il trouve bien index.php

Tu veux dire qu'il trouve index.php quand tu l'appelles directement, ou bien qu'il trouve index.php malgré l'URL rewriting? Dans le deuxième cas, ce n'est pas le navigateur qui trouve index.php, c'est le serveur.


Lomic a écrit :
donc lorsqu'il l'appelle il ne devrait pas l'appeler depuis /root/monsite/collection/ Smiley confus

Ben si, il devrait. Qu'est-ce qui te semble le plus probable:
- ton navigateur web n'est pas capable de faire des requêtes HTTP GET correctement?
- tu n'as pas tout à fait compris les subtilités de l'URL Rewriting?

Je vote pour la seconde explication. Smiley cligne

Pour résoudre ton problème, je te conseille de faire des liens absolus vers les ressources utilisées dans ta page:
<link rel="stylesheet" href="/style.css" type="text/css">

ou bien:
<link rel="stylesheet" href="/monsite/style.css" type="text/css">

si le site n'est pas directement à la racine.

Et tant qu'on est dans les conseils, faire du HTML valide avec un Doctype qui va bien, ça peut être intéressant. Smiley cligne
Modifié par Florent V. (13 Jul 2007 - 11:46)
Florent V. a écrit :
Et tant qu'on est dans les conseils, faire du HTML valide avec un Doctype qui va bien, ça peut être intéressant. Smiley cligne
ça viendra par la suite Smiley cligne merci pour tes conseils

j'ai compris mon souci, mon serveur PHP trouve bien mes fichiers php et analyse le code, par contre une fois que c'est une page web, apache lui lit les URL, du coup la relativité entre l'index.php et style.css, il ne la voit pas du même oeil

donc -> plus de style Smiley smile

reste à faire en sorte qu'il trouve la feuille de style de partout Smiley cligne et comme tu le conseilles, le lien absolu semble le plus indiqué Smiley smile
Modifié par Lomic (13 Jul 2007 - 12:42)