Ou trouver de quoi remplir monbeau menu ?

Bonjour, ou plutot bonsoir...

Je cherche comme beaucoup certainement des infos suite à l'utilisation de l'un des tutos de ce sympathique site...

Voilà, je suis..débutante, je pense être donc dans la bonne salle...
J'ai utilisé un des tuto, pour réaliser une belle barre de menu..
Elle est jolie toute plein, mais j'aimerai pouvoir la placer sur les différentes pages de mon site (en cours de création donc ) sans pour autant avoir à remttre tous les liens des menus et sous menus à chaque fois...
Elle est bien nulle certainement ma question, mais je ne trouve pas de réponse.... et j'avoue que cela me chagrine pas mal...

Merci de votre aide

Hello et bienvenue,

Les réponses à tes questions passent certainement par l'instruction PHP include, qui te permettra d'inclure un fichier dans un autre.

Ton menu sera donc un fichier séparé (menu.txt par exemple) et sera inclu - comme un copier/coller automatique - dans chacune de tes pages.

Bonne chance
Modifié par Raphael (19 Jan 2007 - 23:57)

Bonsoir argiadel,

Ta question est la première question qui vient à l'esprit lorsque l'on débute dans la création d'un site internet ... c'est vrai que se "retaper" le même code sur plusieurs pages est (quelque peu) exaspérant ...

Je ne sais pas exactement quelle technologie tu utilises pour le moment mais je crois que tu dois en être à "l'étape" (x)html/css.

Ce que tu recherches existe dans les technologies côté serveur (donc nécessitant un minimum (infime) de connaissance en programmation) : par exemple la fonction include en php (il doit y'avoir des tutos php sur alsa).

Je ne veux pas non plus t'embrouiller ou te déstabiliser (en te parlant de tas de truc) ; il faut savoir être patient avec le temps (ça vient très vite) et franchir le pas ...

Bonne continuation.
Romain

Edit : grillé par Raphaël ! lol
Modifié par yodaswii (20 Jan 2007 - 00:01)

Merci de vos réponses !
C'est justement pil ça que j'aimerai arriver à faire, mais ... je suis pas très douée !

Le hic dans ce que j'ai lu sur le lien indiqué, est pour moi double (sisi, je doit faire parti des boulets )
- la création d'un menu tel qu'indiqué dans le tuto place du code entre les parties "head" , le menu lui même intervenant après
- dans la mise en forme avec un fichier appelé , le "faire une feuille" et copié le code sans mettre les balises "head" et " body" me souci... puisque le menu est prévu pour être avant et après ??

Alors simplement, comment créé t on une simple feuille en .css ? (avec le "bloc note"?)
je mets quoi dedans ? (tout le code du menu et juste lui ? en enlevant les body head html ?)

Merci d avance !

Edit : Flo
Modifié par argiadel (20 Jan 2007 - 18:52)

Salut,

Alors oui, tu peux créer une feuille de style simplement avec le bloc notes...
non, la feuille de style ne comportera pas le code du menu... (je suppose que tu voulais dire le code html?)

Il faut que tu ailles dans la rubrique tutoriel et affiche "tous les tutoriels", puis choisis les bases... n'hésite pas à cliquez sur les liens qui sont dans les tutoriels (openweb, etc..)

Pour syntétiser ce que tu dois faire pour ton projet désigné dans ton premier message:

- tu auras 3 fichiers:
-- 1 fichier qui sera ta CSS
-- 1 fichier qui sera ta page web, mais à la place du menu, il y aura une ligne de code en php (include) qui servira à appeler ton troisième fichier (le menu) au bon endroit.
--1 fichier qui sera ton menu (le code html de ton menu, mais sans les balises html, head, body, etc..), ce fichier sera donc appelé par la ligne de code que tu auras placé dans ton précédent fichier.

Ta feuille de style n'est pas faite pour lier tes fichiers 2 et 3, mais c'est elle qui comportera tous les "codes" indiquant la couleur de ton menu, la mise en page de celui-ci, la mise en page des paragraphes de ta page web, etc... (tes fihciers 2 et 3 se référeront à elle, à ses codes).

bon tu peux très bien avoir ta "feuille de style", non pas dans un fichier à part, mais incluse dans le fichier de ta page web... mais on peut partir du principe que ta feuille de style est "externe" dans un fichier à part donc, personnellement, je trouve cela plus souple.

dans l'exemple que tu donnes, en parlant du fait qu'il y a du code entre les balises <head> et </head> là il s'agit surement d'un code en javascript... utile pour le menu choisi.

Ce code, reste dans le fichier 2, celui de ta page web principale, il indiquera la marche à suivre pour que ton menu (situé dans le fichier 3 et appelé dans le 2 lorsque l'internaute affichera sur son écran ton site) marche comme il se doit.

Tous les menus ne fonctionnent pas de la même façon, certains n'ont pas besoin de java...

a+
Modifié par Vajra (21 Jan 2007 - 00:36)

"Vajra" a écrit :
java..

attention, JavaScripts, il ne faut surtout pas mélanger JS avec Java qui sont deux langage bien distinct, un est indépendant, l'autre à besoin d'un navigateur pour s'executer


Argiadel, si tu veux que je te code ca, je peux te le faire, il suffit juste de me fournir le code html et css de tes page.

Apres je te donnerais directement fait le résultat avec les explications qui vont avec, tu verras, apres tu comprendras bien mieux.

Mais dans un premier temps essayes de le faire toute seule, c'est plus "dur", mais ca rentre mieux.
Modifié par Super_baloo8 (21 Jan 2007 - 03:59)

Re

bon, je dois être plus truffe que la moyenne...

j'utilise frontpage pour esauyer de créer mon site..
J'ai tout suivi la création du fichier .css
j'ai créé ensuite un autre fichier avec la description du menu sans les balises head/body et html

j'ai ouvert une page "index" dans laquelle j'ai inclus entre les balises "head" le code java pour le bon fonctionnement du dit menu, puis le liens vers le fichier.css pour la mise en forme

Sur le mode aperçu de frontpage, ça marche ! yes !!!
Mais... lorsque je fais un aperçu dans le navigateur...(IE) ya rien qui s'affiche..... je comprends pas où je fais la boulette qui empêche le menu d'être affiché....

voici mon code pour le fichier Css (donc, un ficheir où il n'y a que ceci :

<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: 3d4384;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
color: white;
font-weight: bold;
background: #035dd5;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: white;
}
#menu li a, #menu dt a {
color: #3d4384;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #c3daf9;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: white;
background-color: white;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>

Modifié par argiadel (22 Jan 2007 - 18:00)

le fichier où est contenu le menu (enregistré en .htm):

<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<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>
				<li><a href="#">Sous-Menu 1.5</a></li>
				<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="#">Sous-Menu 2.1</a></li>
				<li><a href="#">Sous-Menu 2.2</a></li>
				<li><a href="#">Sous-Menu 2.3</a></li>
				<li><a href="#">Sous-Menu 2.4</a></li>
			</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>

				<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>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<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>

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

Modifié par argiadel (22 Jan 2007 - 18:00)

et enfin ma page d'index qui serait l'accueil du site :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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>
<link rel="stylesheet" type="text/css" href="Mise en page/Styles.css" />
<title>Nouvelle page 1</title>
</head>

<body>

<!--webbot bot="Include" U-Include="Mise en page/menu deroulant.htm" TAG="BODY" -->

</body>

</html>

Modifié par argiadel (22 Jan 2007 - 17:59)

Merci de respecter l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Désolée... j'avais pas vu....
j'ai lu , rapidement certe, et certainement de travers .....

je ne trouve pas de quoi résoudre mon prob dans les explications...désolée d'avoir dérangé..

Bonjour,

Frontpage est un cauchemar dès qu'on ne se contente pas de ce qu'il propose. Et quand on regarde le code source et son respect des Standards du web (que nous pronons ici), c'est dans tous les cas un cauchemar
Si ton site a un peu d'ampleur (plusieurs pages et toujours le même menu), tu peux soit essayer de supporter Frontpage (on est d'ailleurs pas nombreux à l'utiliser encore, ça va être difficile d'obtenir de l'aide sur ce forum), soit passer à un logiciel comme NVu.
Le passage au Bloc-Notes (enfin plutôt PSPad, UltraEdit, etc pour que le code HTML soit coloré) est nettement plus ardu puisque tu ne vois plus immédiatement le résultat et nécessite un apprentissage du code HTML et des CSS (voir le Salon des Ressources et les tutoriels pour cela )

Merci
j'ai bien vu que frontpage n'est pas le logiciel qui me convient (je n'aime pas les visuels tout pret , je souhaite faire quelque chose qui me ressemble..) Certe, ce n'est pas le débat
Le hic, c'est que neuneu comme je suis, faut que je trouve un truc un peu simple...
(je n'ai aucune base en info, dois je pour autant me contenter de créer un site moche pas conviviale et qui plus est avec un fonctionnement archaïque? Non ) Alolrs j'essaie avec ce que j'ai de faire un truc potable...
Mais là, je plante....
Je vais essayer avec ton lien ! Merci

Salut Argiadel, désolé d'avoir mis autant de temps à te répondre, mais j'étais toute la semaine en déplacement professionnel et je faisais des heures de malades (16h/j) donc je n'avais pas de temps pour moi.

--------------------------------------

Mais enfin, voici ce que tu souhaitais. Tout les fichiers se trouvent dans le même dossier bien sur

Ton fichier css :

Nom du fichier : css.css

body {
margin: 0;
padding: 0;
background: 3d4384;
font: 80% verdana, arial, sans-serif;
}

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

#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}

#menu dl {
float: left;
width: 12em;
}

#menu dt {
cursor: pointer;
text-align: center;
color: white;
font-weight: bold;
background: #035dd5;
border: 1px solid gray;
margin: 1px;
}

#menu dd {
display: none;
border: 1px solid gray;
}

#menu li {
text-align: center;
background: white;
}

#menu li a, #menu dt a {
color: #3d4384;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #c3daf9;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: white;
background-color: white;
padding: 5px;
border: 1px solid gray; 
}

----------------------------------------------

Ton menu dans un fichier (j'ai mis .php car quand je fais un site, je prefere que toutes mes pages ais les même extension) :

Nom du fichier : menu.php

<div id="menu">

	<dl>



		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>

	</dl>

	

	<dl>			

		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>



		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">

			<ul>

				<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>

				<li><a href="#">Sous-Menu 1.5</a></li>

				<li><a href="#">Sous-Menu 1.6</a></li>

				</ul>

		</dd>

	</dl>

	

	

	<dl>	

		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>



			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">

			<ul>

				<li><a href="#">Sous-Menu 2.1</a></li>

				<li><a href="#">Sous-Menu 2.2</a></li>

				<li><a href="#">Sous-Menu 2.3</a></li>

				<li><a href="#">Sous-Menu 2.4</a></li>

			</ul>



			</dd>

	</dl>

	

	<dl>	

		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>

			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

			<ul>



				<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>	

		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">

			<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>



			</ul>

			</dd>

	</dl>

--------------------------------------------------

Ta page qui va inclure ton fichier de menu :

Nom du fichier : index.php

<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<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>

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

<title>Nouvelle page 1</title>

</head>



<body>

[#red]<?php[/#]

[#green]/* Ici j'utilise la fonction include de php qui aura comme role d'insere le contenu du fichier menu.php a cette emplacement */[/#]

[#blue]include('menu.php');[/#]
[#red]?>[/#]

</body>



</html>

Voilà, ce n'étais pas compliqué du tout, ca m'as pris 1 minute et tu peux beaucoup mieux découper que ca, mais si ca te suffit ne t'embete pas

@++

Merci !!!
Je vais l'essayer au plus vite !
(et surtout essayer de comprendre comment tu as fait

Jusque là, j'avais bien téléchargé easy php, mais je n'en voyais que moyennement l'utilité !
C'est chose faite, j'ai bien compris...
Bon un pas en avant, merci de ton aide !

Post inutile visant à détecter un bug, ne pas tenir compte de ce post merci. N°17
Modifié par Felipe (13 Feb 2007 - 19:26)

Post inutile visant à détecter un bug, ne pas tenir compte de ce post merci. N°18
Modifié par Felipe (13 Feb 2007 - 19:26)

Post inutile visant à détecter un bug, ne pas tenir compte de ce post merci. N°19
(let's warp)
Modifié par Felipe (13 Feb 2007 - 19:26)