[Résolu] Problème de menu. par Heiko - page 1

Page où il y a l'erreur :

<!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">
<head>

<meta name="author" content="">
<meta name="description" content="">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="keywords" content="">
<title></title>
<link href="orange.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="http://www.w.com/images/favicon.png" />

		<script type="text/javascript">
		sfHover = function() {
		var sfEls = document.getElementById("menu").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+="sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp("sfhover\\b"), "");
			}
		}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
		</script>


</head>

<body>


<div id="entete">

<table cellpadding="0" cellspacing="0">
<tr><td><a href="index.php"><img src="http://www.fr/images/logo.png" /></a></td>
<td width="540"></td>
<td><form action="connexion.php" method="post">
<table>
<tr><td height="25"><input type="text" name="login" maxlength="50" value="Adresse E-mail" class="form-acc" onfocus="this.value='';" /></td></tr>
<tr><td height="25"><input type="password" name="password" maxlength="20" value="Mot de passe" onfocus="this.value='';" /></td></tr>
<tr><td height="25"><input type="submit" value="Connexion " /></td></tr>
</table>
</form></td>
</tr>
</table>
</div>
<br><br>
<center>
<?php include('menu.php') ?>
</center>
<br><br><br><br><br>
		<div id="menu">		
			<div class="element_menu">
				<h3>L'info en direct et en continu</h3>

				
				
			</div>

			<div class="element_menu">
				<h3>Publicité</h3>
				<ul>
					<li><a href="page4.html">Lien</a></li>

					<li><a href="page5.html">Lien</a></li>
					<li><a href="page6.html">Lien</a></li>
				</ul>
			</div>		
		</div>

		<div id="corps">
			<h2>A la une</h2>


		</div>
		
				<div id="corps">
	


		</div>



</html>

Page menu.php :

<style>
#menu, #menu ul /* Liste */	
{
	padding : 0; /* pas de marge intérieure */
	margin : 0; /* ni extérieure */
	list-style : none; /* on supprime le style par défault de la liste */
	line-height : 21px; /* on défini une hauteur pour chaque élément */
	text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
	font-weight : bold; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial c'est plus beau  */
	font-size : 12px; /* hauteur du texte : 12 pixels */
}

#menu a /* Contenu des listes */
{
	display	: block; /* on change le type d'élément, les liens deviennent des balises de type block */
	padding	: 0; /* aucune marge intérieure */
	background : #005aae; /* couleur de fond */	
	color : #b1d9ff; /* couleur du texte */
	text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
	width : 144px; /* largeur */
}

#menu li /* Elements des listes */	
{ 
	float : left; 
	/* pour ie qui ne reconnait pas "transparent" */
	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
	border-right: 1px solid transparent ; /* on met une bordure transparante à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolu */
	width: 144px; /* Largeur des sous-listes */
	left: -999em; /* Hop, on envoi loin du champ de vision */
}


#menu li ul li /* Eléments de sous-listes */
{
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}

/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li		
{
	border-top : 1px solid transparent; /* on met une bordure transparante en haut de chaque élément */
}

#menu li ul ul 
{
	margin		: -22px 0 0 144px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */	
	/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
	border-left	: 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */	
}

/* ie ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul		
{
	border-left	: 1px solid transparent ; /* on met une bordure transparante sur la gauche de chaque élément */
}

#menu a:hover /* Lorsque la souris passe sur un des liens */	
{
	color: #005aae; /* On passe le texte en noir ... */
	background: #b1d9ff; /* ... et au contraire, le fond en blanc */
}

#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
	left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug */
}

a
{
	text-decoration: none;
	color: #ae0000;
}

a:hover
{
	font-weight: bold;
}
</style>



<ul id="menu">

					<li>
						<a href="#">Bienvenue</a>

					</li>
					
					<li>
						<a href="#">Actualité</a>
						<ul>
							<li><a href="#">Politique et économie</a></li>
							<li><a href="#">Evènements</a></li>
							<li><a href="#">Culture</a></li>
							<li><a href="#">Divers</a></li>
							<li><a href="#">Willkommen in Deutschland</a></li>
						</ul>

					</li>
					
					<li>
						<a href="#">Culture</a>
						<ul>
							<li><a href="#">Indentité</a>
							<li><a href="#">Pratique</a></li>
							<li><a href="#">Télévision</a></li>
							<li><a href="#">Musique</a></li>
							<li><a href="#">Cinéma</a></li>
							<li><a href="#">Sport</a></li>
							<li><a href="#">Histoire</a></li>
							<li><a href="#">Politique</a></li>
							<li><a href="#">Gastronomie</a></li>
							<li><a href="#">Evènements</a></li>
							<li><a href="#">Traditions</a></li>
							<li><a href="#">Pays germanophones</a></li>
							
						</ul>
					</li>
					
					<li>
						<a href="#">Découverte</a>

						<ul>
							<li><a href="#">Les länder</a></li>
							<li><a href="#">Les grandes villes</a></li>
							<li><a href="#">Les espaces naturels</a></li>
							<li><a href="#">Divers</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Forum</a>

						<ul>
							<li><a href="#">Connexion</a></li>
							<li><a href="#">Inscription</a></li>
							<li><a href="#">Règlement</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Fun & Extra</a>

						<ul>
							<li><a href="#">Quiz</a></li>
							<li><a href="#">Lexique</a></li>
							<li><a href="#">Dossier du mois</a></li>
						</ul>
					</li>

					
				</ul><br />

CSS de la page où il y a l'erreur :

/*                Général                */

body{
background: #F0F0F0 repeat-x;
width:870px;
margin:auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
}

a img{
border:none;
}

a
/*                Entête                */

#entete{
padding:0;
margin:0;
height:102px;
overflow:hidden;
}

#entete input[type=text], #entete input[type=password]{
width:130px !important;
background:url(http://www.eedeo.fr/images/text-bg.png) no-repeat;
border:none;
height:16px;
color:#333333;
padding-left:5px;
padding-right:5px;
}

#entete input[type=submit]{
width:140px !important;
background:url(http://www.eedeo.fr/images/btn-bg-orange.png) repeat-x center;
border:none;
color:#FFFFFF;
text-align:center;
}

#entete input[type=submit]:hover{
width:140px !important;
background:url(http://www.eedeo.fr/images/btn-bg-hover-orange.png) repeat-x center;
border:none;
color:#FFFFFF;
text-align:center;
}

/*                Menu & Barre de Menu                */

		/* Le menu */

			#menu
			{
				float:right;
				width:300px;
			}

			.element_menu
			{
				background-color:#626262;
				background-image:url("motif.png");
				background-repeat:repeat-x;
				
				border:2px solid black;
				
				margin-bottom:20px;
			}


			.element_menu h3
			{	
				color:#B3B3B3;
				font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
				text-align:center;
			}

			.element_menu ul
			{
				list-style-image:url("puce.png");
				padding:0px;
				padding-left:20px;
				margin:0px;
				margin-bottom:5px;
			}

			.element_menu a
			{
				color:#B3B3B3;
			}

			.element_menu a:hover
			{
				background-color:#B3B3B3;
				color:black;
			}



/*                Corps                */





			/* Le corps de la page */

			#corps
			{
				margin-right:320px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
				margin-bottom:20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
				padding:5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
				
				color:#B3B3B3;
				background-color:#626262; /* Une couleur de fond pour le corps */
				background-image:url("motif.png");
				background-repeat:repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */
				
				border:2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
			}

Heiko

26 septembre 2009 à 17:05:51

Bonjour,

J'ai créé un fichier PHP avec le menu de mon site (menu déroulant comme l'on peut voir ici : http://skitime.free-h.org/sdz/tuto_menu.html ). J'aimerais avoir seulement ce fichier à modifier (quand je veux changer quelque chose dans le menu) et qu'ensuite ça change sur toute les pages.

J'ai essayé avec l'IFRAME, mais ça ne rend pas comme je veux, y'a t'il d'autres moyens ?

Merci

Quentin01

26 septembre 2009 à 17:11:33

Oui il y a les includes php mais pour ça il te faudra aprendre a t'en servir

26 septembre 2009 à 17:12:42

Tu peux me donner un bon tutoriel là-dessus vu que tu t'y connais bien

26 septembre 2009 à 17:17:18

Il y a pas de tutoriel pour ça puisque ce n'est que une fonction php ^^. Alors je vais t'expliquer comment ça marche :
Deja tes pages tu les enregistre en .php au lieu de .html et tu met ceci a la place de ton menu : <?php include('Lien de ta page menu.html') ?>
Bien sur il faut que tu mette tout ton menu dans menu.html et le tour est joué

26 septembre 2009 à 17:28:25

Et on peut voir si ça marche seulement si c'est hébergé ?

26 septembre 2009 à 17:42:13

Et bien soit si c'est hebergé, ou il faut utiliser un logiciel comme Wamp server

26 septembre 2009 à 17:51:13

Euh ... j'ai un problème : http://files.webopload.net/994398192.blem_1jpg.jpg

26 septembre 2009 à 17:56:53

Peux tu nous donner ton code source qu'on voye ou est l'erreur, qui est surement tres simple.

26 septembre 2009 à 18:01:50

26 septembre 2009 à 18:13:45

Deja pourquoi juste apres avoir inclus menu.php tu remet un id menu ? Et pis sinon je vois pas l'erreur

26 septembre 2009 à 18:15:06

Merci quand même

Quelqu'un à t'il trouvé l'erreur ?

26 septembre 2009 à 18:31:37

Essaye de mettre ton css qui est dans menu.php dans ton fichier css normalement ça devrait marcher, je sais pas pourquoi tu l'a mis dans menu.php mais par contre met ton javascript dans menu.php

26 septembre 2009 à 18:33:59

J'ai résolu le problème

Il y avait une confusion avec les cadres que j'avais également appelés "menu". Merci de ton aide

26 septembre 2009 à 18:35:36

De rien

Problème de menu.

Problème de menu.

Supprimer

Modérer

Signaler le message aux modérateurs