8791 sujets

Développement web côté serveur, CMS

[Résolu] Problème: Include et CSS qui ne fonctionne pas.

Bonjour. J'apprends actuellement à programmer en PHP et je tente actuellement de faire passer ma page d'accueil en format HTML au format PHP. J'ai donc créer un fichier PHP dans lequel j'ai écris l'instruction include afin d'insérer les deux parties de ma page d'accueil: La bannière et le menu puis un bloc de texte.

Le problème est le suivant: La bannière et le menu s'affiche sans problème mais le bloc de texte qui doit être situé en dessous n'affiche que le code HTML, son CSS ne s'affiche pas du tout, pas de fond, la position n'est pas respécté, rien du tout...
Comment cela se fait-il? Dois-je regrouper le code CSS de tout mes include dans une seule feuille CSS? Est-ce que ça peut venir du code minimale? De mon code HTML? Je suis perdu... Smiley confused

La page qui reccueil mes include:
<!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">
   <head>
       <title>R.F.O</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css"
	   title="Black Design" href=""/>
   </head>
   <body>
   
   <?php include ("banniere_et_menu/banniere_et_menu.php"); ?>
   
   <?php include ("bloc_articles/bloc_texte.php"); ?>
   
   
   </body>
   </html>


La page qui reccueil la bannière et le menu:
<!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">
   <head>
       <title>Nom du site.</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css"
	   title="Home Design" href="banniere_et_menu/banniere_et_menu_style.css"/>
   </head>
   
   <body>
   
   
   <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="ie1.css" />
      <![endif]-->
   
   
 <div id="banniere"><h1>Nom du site.</h1></div>
 
 <div id="menu"><ul>
 <li><a href="./index.php">Onglet 1.</a></li>
 <li><a href="./index.php">Onglet 2.</a></li>
 <li><a href="./index.php">Onglet 3.</a></li>
 <li><a href="./index.php">Onglet 4.</a></li>
 </ul></div></br>
 
 
   </body>
   </html>


Le code CSS pour la bannière et le menu:
body
{
background: url(images/fond.gif);
color: white;
font-family: arial;
}

#banniere h1
{
width: 1012px;
height: 120px;
background-color: white;
margin-left: auto;
margin-right: auto;
text-align: center;
border: black solid 1px;
margin-top: 0px;
margin-bottom: 1px;
color: red;
background: url(images/banniere.bmp);
text-indent: -3000px;
}


#menu
{
width: 1016px;
margin-left: auto;
margin-right: auto;
}

ul
{
list-style-type: none;
margin: 0px;
padding: 0px;
margin-top: 4px;
}

li
{
float: left;
}


li a
{
color: white;
margin: 1px;
text-transform: capitalize;
text-align: center;
float: left;
background: url(images/onglet_noir1.bmp) repeat-x;
text-decoration: none;
font-size: 18px;
width: 250px;
height: 28px;
border: 1px solid rgb(60,60,60);
}


La page qui reccueil le bloc de texte:
<!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">
   <head>
       <title>R.FO.</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css"
	   title="Design bloc" href="bloc_texte.css"/>
   </head>
   
   <body>
   
   
   <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="bloc_texte_ie.css" />
      <![endif]-->

	  

 <div id="articles"><h3>Titre du bloc:</h3>
 <p>Bloc de texte: Voici un paragraphe du bloc de texte.</p></div>
 
 
 
   </body>
   </html>


Le code CSS du bloc de texte:
body
{
background: url(images/fond.gif);
color: white;
font-family: arial;
}

#articles
{
width: 760px;
margin-left: 117px;
margin-top: 5px;
float: left;
}

#articles h3
{
margin-top: 0px;
height: 22px;
text-align: center;
text-transform: capitalize;
font-size: large;
background: url(images/fond_rouge6.png);
}

#articles p
{
margin-top: -19px;
height: 472px;
background-color: black;
border: 1px solid rgb(221,0,0);
}

Modifié par Black-Mentality (15 Sep 2012 - 01:22)
Modérateur
Bonjour,

Ton css doit etre ajouté dans le head de "La page qui recueille les includes".

Pour le include tu l'appel bien mais le fichier appelé ne doit pas contenir la structure :

<!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">
   <head>
       <title>R.F.O</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css"
	   title="Black Design" href=""/>
   </head>
   <body>

[...]
   
   </body>
   </html>


Les fichier a inclure ne doivent contenir que le code html dont tu as besoin. Exemple banniere_et_menu.php ne doit contenir que :



 <div id="banniere"><h1>Nom du site.</h1></div>
 
 <div id="menu"><ul>
 <li><a href="./index.php">Onglet 1.</a></li>
 <li><a href="./index.php">Onglet 2.</a></li>
 <li><a href="./index.php">Onglet 3.</a></li>
 <li><a href="./index.php">Onglet 4.</a></li>
 </ul></div></br>



Sinon tu remet une sturucture <html><head><body></head></body></html> dans un body !! Le include colle bêtement tout le fichier a l'endroit ou tu l'appelle, il réfléchie pas trop hein ^^'
Je viens d'apporter les modifications et... Tout fonctionne! Smiley biggrin
Merci beaucoup _laurent pour ton aide. J'ai aussi bien compris l'erreur que j'ai fait avec les balises <html><head><body>. J'apprends le PHP seul, c'est pas simple et je commençais à désespérer à cause de ces erreurs de rookie. Encore merci. Smiley cligne
Sujet clos
Aller à