1er site ,boulet en galère avec include

gassin Messages postés 3 Statut Membre -  
Reivax962 Messages postés 3742 Statut Membre -
Bonjour,
ce que je pense avoir compris : si tu appelle une page avec la fonction include la partie doctype doit être supprimé puisque la page php aura la sienne

ci dessous mon menu en .htmlà la racine du site
plus d'une semaine de recherche 6h par jour donc pas de la fainéantise, mais plus je lis moins je comprend

Citation:
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;
background-image: url(../b_infosite/image/armada06.jpg);
}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 51px;
top: 21px;
width: 1000px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #A05804;
background: #FFF33;
}

#smenu1, #smenu2, #smenu3, #smenu4 , #smenu5{
position: absolute;
left: 2px;
font-size: 0.7em;
border-top: 5px solid gray;
width: 1000px;
top: 22px;
height: 23px;
}

.mentions {
position: absolute;
bottom : 600px;
left : 10px;
color: #FFF33;
background-color: FFF33;
}
a {text-decoration: none;
color: #222;
}
.Style2 {color: #FFF33}

-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">

<div id="menu">
<dl style="color: red; background-color: rgb(255, 255, 51);">

<dt style="font-weight: bold;" onmouseover="montre('smenu1');"><a href="#">accueil</a></dt>
<dd id="smenu1">
<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
<li><a href="#">../www.stat/setup.php</a></li>
<li><a href="#">Sous-menu 1.2</a></li>
<li><a href="#">Sous-menu 1.3</a></li>
<li><a href="#">Sous-menu 1.4</a></li>
</ul>

<span class="Style2"></span></dd>
</dl>

<dl>
<dt style="font-weight: bold; color: rgb(255, 204, 102); background-color: rgb(204, 255, 255);" onmouseover="montre('smenu2');"><a href="#">p_en_cour</a></dt>
<dd id="smenu2">
<ul style="background-color: rgb(204, 255, 255);">
<li><a href="#">Sous-menu 2.1</a></li>
<li><a href="#">Sous-menu 2.2</a></li>

</ul>
</dd>
</dl>

<dl>
<span class="Style2"></span>
<dt style="font-weight: bold; background-color: rgb(255, 255, 51);" onmouseover="montre('smenu3');"><a href="#">p_à_tester</a></dt>
<dd id="smenu3">
<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
<li><a href="#">Sous-menu 3.1</a></li>
<li><a href="#">Sous-menu 3.2</a></li>
<li><a href="#">Sous-menu 3.3</a></li>
<li><a href="#">Sous-menu 3.4</a></li>
<li><a href="#">Sous-menu 3.5</a></li>
</ul>
</dd>
</dl>

<dl>
<span class="Style2"></span>
<dt style="font-weight: bold;" onmouseover="montre('smenu4);"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-menu 4.1</a></li>
<li><a href="#">Sous-menu 4.2</a></li>
<li><a href="#">Sous-menu 4.3</a></li>
<li><a href="#">Sous-menu 4.4</a></li>
<li><a href="#">Sous-menu 4.5</a></li>
</ul>
</dd>
</dl>

<dl>
<dt style="font-weight: bold; background-color: rgb(204, 255, 255);" onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
<dd id="smenu5">
<ul style="background-color: rgb(204, 255, 255);">
<li><a href="#">Sous-menu 5.1</a></li>
<li><a href="#">Sous-menu 5.2</a></li>
<li><a href="#">Sous-menu 5.3</a></li>

</ul>
</dd>
</dl>

</div>

<span class="Style2"></span>
<p>  </p>
<p> </p>
<p> </p>
</body></html>

ci desssous ma page php vierge ou j'aimerais le menu en iclude

comme tu m'as dis que pour la galerie le principe est le même je devrais y arriver non d'une pipe

Citation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Document sans titre</title>
</head>

<body>
</body>
</html>

si vous pouvez m'aidez merci si vous ne le pouvez pas merci d'avoir lu le post
A voir également:

3 réponses

Reivax962 Messages postés 3742 Statut Membre 1 011
 
Bonjour,

Pour coller des gros blocs de code, il y a une balise ô combien bien nommée, la balise code... Si tu pouvais l'utiliser, ça nous éviterait de nous brûler les yeux !

Et sinon, que fait exactement la fonction include ?
Elle prend un fichier, l'interprète si c'est du php, et le colle là où on en était dans le fichier d'origine. Et ensuite seulement, la page ainsi générée sera envoyée au navigateur client.

Donc, imagine que tu prends tel quel ton menu, et que tu le colles entre les balises <body> de ta page php.
Combien de balises <html> auras-tu ? Trop, n'est-ce pas ;)

Logiquement, toutes tes en-têtes CSS doivent aller dans le fichier d'origine, le fichier php. Encore mieux, dans un fichier CSS séparé.
Idem pour le javascript.

Ensuite, ton menu ne doit garder que ce qui fait qu'il est un menu, c'est-à-dire la balise <div id="menu"> et son contenu.

Et dans ta page php, tu mets :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
        <title>Document sans titre</title>
        <!-- Ici ton CSS -->
        <!-- Ici ton Javascript -->
    </head>

    <body>
<?php
    include ("menu.html");
?>
    </body>
</html>
(Note l'utilisation de cette balise code !)

Voilà voilà :)

Xavier
0
gassin Messages postés 3 Statut Membre
 
bonsoir à tous et toute

bonsoir Reivax962 et merci

j'ai bien avancé j'ai fait une feuille de style et ai réussi à l'appeler de ma page php

j'ai essayer avec une feuille pour java script "ma feuile.js ---> et la le menu ne se déroule plus

Dernier problème quand ma page php est appellé le curseur de la souris ce bloque à gauche du menu et ne veux plus descendre.

ma page php modèle
<!DOCTYPE etc
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Document sans titre</title>
<link href="/originaux/stle menu.css" rel="stylesheet" type="text/css" />
<script src="/originaux/menu_.js" type="text/!javascript!"></script>


</head>

<body>
<?php
    include ("originaux/corp_menu.html");

LA JE VOUDRAIS ÉCRIRE MAIS IMPOSSIBLE

</body>
</html>


ma feuille css

/* CSS Document */


body {
	margin: 10px;
	padding: 0;
	font: 1em Verdana, sans-serif;
	background-image: url(../b_infosite/image/armada06.jpg);
	background-repeat: repeat;
}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
	position : absolute;
	left: 51px;
	top: 21px;
	width: 1000px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #A05804;
background: #FFF33;
}

#smenu1, #smenu2, #smenu3, #smenu4 , #smenu5{
	position: absolute;
	left: 2px;
	font-size: 0.7em;
	border-top: 5px solid gray;
	width: 1000px;
	top: 22px;
	height: 23px;
}


.mentions {
position: absolute;
bottom : 600px;
left : 10px;
color: #FFF33;
background-color: FFF33;
}
a {text-decoration: none;
color: #222;
}
.Style2 {color: #FFF33}



ma feuille .js

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>


avec ces codes ça marche mais je perd tout l 'avantage du phb.
il me semble pourtant avoir bien différencier les fichiers et les avoir correctement appelé dans ma page php

<!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" lang="fr"><head>
<title>Menu horizontal déroulant sur une ligne en CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
/* CSS issu des tutoriels https://www.alsacreations.com/ */
body {
	margin: 10px;
	padding: 0;
	font: 1em Verdana, sans-serif;
	background-image: url(armada06.jpg);
}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
	position : absolute;
	left: 51px;
	top: 21px;
	width: 1000px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #A05804;
background: #FFF33;
}

#smenu1, #smenu2, #smenu3, #smenu4 , #smenu5{
	position: absolute;
	left: 2px;
	font-size: 0.7em;
	border-top: 5px solid gray;
	width: 1000px;
	top: 22px;
	height: 23px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #FFF33;
background-color: FFF33;
}
a {text-decoration: none;
color: #222;
}
.Style2 {color: #FFF33}

-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body style="color: rgb(0, 0, 0);" alink="#ee0000" link="#0000ee" vlink="#551a8b">

<div id="menu">
	<dl style="color: red; background-color: rgb(255, 255, 51);">

		<dt style="font-weight: bold;" onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
			<dd id="smenu1">
					<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
					<li><a href="#">Sous-menu 1.1</a></li>
					<li><a href="#">Sous-menu 1.2</a></li>
					<li><a href="#">Sous-menu 1.3</a></li>
					<li><a href="#">Sous-menu 1.4</a></li>
				</ul>

      <span class="Style2"></span></dd>
	</dl>
	
	<dl>			
		<dt style="font-weight: bold; color: rgb(255, 204, 102); background-color: rgb(204, 255, 255);" onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2">
				<ul style="background-color: rgb(204, 255, 255);">
					<li><a href="#">Sous-menu 2.1</a></li>
					<li><a href="#">Sous-menu 2.2</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
	  <span class="Style2"></span>
	  <dt style="font-weight: bold; background-color: rgb(255, 255, 51);" onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
			<dd id="smenu3">
				<ul style="font-weight: bold; background-color: rgb(255, 255, 51);">
					<li><a href="#">Sous-menu 3.1</a></li>
					<li><a href="#">Sous-menu 3.2</a></li>
					<li><a href="#">Sous-menu 3.3</a></li>
					<li><a href="#">Sous-menu 3.4</a></li>
					<li><a href="#">Sous-menu 3.5</a></li>
				</ul>
	  </dd>
	</dl>

<dl>	
	  <span class="Style2"></span>
	  <dt style="font-weight: bold;" onmouseover="montre('smenu4);"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-menu 4.1</a></li>
					<li><a href="#">Sous-menu 4.2</a></li>
					<li><a href="#">Sous-menu 4.3</a></li>
					<li><a href="#">Sous-menu 4.4</a></li>
					<li><a href="#">Sous-menu 4.5</a></li>
				</ul>
	  </dd>
  </dl>
	
	<dl>	
		<dt style="font-weight: bold; background-color: rgb(204, 255, 255);" onmouseover="montre('smenu5');"><a href="#">Menu 5</a></dt>
			<dd id="smenu5">
				<ul style="background-color: rgb(204, 255, 255);">
					<li><a href="#">Sous-menu 5.1</a></li>
					<li><a href="#">Sous-menu 5.2</a></li>
					<li><a href="#">Sous-menu 5.3</a></li>

				</ul>
	  </dd>
	</dl>
	
</div>

<span class="Style2"></span>
<p>  </p>
<p> </p>
<p> </p>
</body></html>

0
Reivax962 Messages postés 3742 Statut Membre 1 011
 
Bonjour,

<body>
<?php
    include ("originaux/corp_menu.html");

LA JE VOUDRAIS ÉCRIRE MAIS IMPOSSIBLE

</body>
</html>
Tu n'as pas oublié la balise fermante du php, "?>" ?

Pour ton fichier .js, supprime tout l'HTML :
<script type="text/javascript">
et
//-->
</script>

</style>
<script type="text/javascript">
<!--
et
</script>
0