Menus dynamiques

gigab · Message par **gigab** » 12 juil. 2006, 21:47

Bonjour, il y a quelques jours un intervenant de ce forum donnait ce lien http://fabiwan.kenobi.free.fr/css/NestedLists.html# au sujet de menus.
J'aimerai avoir le menu Garbiak en menu horizontal. Comment puis-je faire?
Merci d'avance de vos réponses

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

gigab · Message par **gigab** » 13 juil. 2006, 09:12

Bon, visiblement ça n'inspire pas grand monde

Je vais la refaire plus simplifiée..
Voilà, je voudrai faire un menu qui se répète sur toutes les pages du site. Il y a le tutoriel en haut donc je vais tâcher de me débrouiller.
Ma question c'est que j'ai un code html et un code Css à mettre.

Code : Tout sélectionner

<div id="navcontainer">
<ul id="navlist">
	<li><a href="" title="">Accueil</a></li>
	<li><a href="" title="">Compositeurs</a></li>
	<li><a href="" title="">Contact</a></li>
	<li><a href="" title="">Liens</a></li>
</ul>
</div>

Code : Tout sélectionner

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}

#navlist a:hover { color: #000; }

Si je suis bon, le code html se place après le <br/> dans l'onglet source de Nvu, qui est après title, head et body ?
Mais pour le code Css, je ne sais pas du tout où il se place ;'(
Dans les tutoriels que j'ai vu, ils donnent le code sans dire où l'insérer...

Un grand merci pour votre aide !!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Do-IT · Message par **Do-IT** » 13 juil. 2006, 09:28

Tu as un fichier qui contient ton code menu (ci-dessus).
Tu as un fichier qui contient tes styles css (ci-dessus).
Ton hébergeur doit accepter le php. Le fichier ci-dessous doit avoir une extension .php

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="messtyles.css" type="text/css">
</head>
<body>
<br>
<div>
<?php include('monmenu.inc.php'); ?>
</div>
</body>
</html>

Pour le doctype et le charset et les noms de fichier tu adaptes à tes goûts.

gigab · Message par **gigab** » 13 juil. 2006, 10:17

Bon alors, si je comprend bien, dans l'affaire j'ai deux pages :
Une qui contient toutes les données du site (genre accueil, liens, contact, etc)
et l'autre *unique* qui sera dupliquée automatiquement et qui s'appelle menu.inc.php

Si c'est cela, où met-je le code html, et où met-je le code Css ?
Parce que là, je vois pas du tout

(à part recopier chaque ligne du code Css dans l'éditeur de code Css)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Do-IT · Message par **Do-IT** » 13 juil. 2006, 10:33

J'ai pas expliqué en chinois pourtant.

Tu as 3 fichiers.

1er fichier monmenu.inc.php

Code : Tout sélectionner

<div id="navcontainer">
<ul id="navlist">
   <li><a href="" title="">Accueil</a></li>
   <li><a href="" title="">Compositeurs</a></li>
   <li><a href="" title="">Contact</a></li>
   <li><a href="" title="">Liens</a></li>
</ul>
</div>

2eme fichier messtyles.css

Code : Tout sélectionner

#navlist
{
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #000;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}

#navlist a:link#current, #navlist a:visited#current, #navlist a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}

#navlist a:hover { color: #000; }

3eme fichier mapage.php

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="messtyles.css" type="text/css">
</head>
<body>
<br>
<div>
<?php include('monmenu.inc.php'); ?>
</div>
</body>
</html>

Le 1er fichier tu le fais avec un éditeur de texte externe, pas avec nvu !
Pour éditer le 2eme et 3eme fichier tu peux utiliser Nvu ou Kompozer.

gigab · Message par **gigab** » 13 juil. 2006, 10:57

ça fonctionne à peu près..bon faut tout faire en php alors ?
Sinon pour modifier le Css, il faut que j'en écrive un à côté et puis après que je fasse un copier coller ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Mongo Bob · Message par **Mongo Bob** » 13 juil. 2006, 13:38

Pour modifier le css, tu utilises l'éditeur css de NVU qui ira reporter tes modifs dans le fichier lié "messtyles.css", pas de copier-coller, mais d'où vient-il le css? Tu l'as bien créé dans l'éditeur css de NVU, au départ? Ou viendrait-il de DW, puisque suite à ton autre post, je vois que tu as créé une partie de ton site avec DW, si c'est chez lui que tu as créé ton "messtyles.css", je comprends ta question, entre DW et NVU, il y a 2 façons parfaitement différentes d'aborder la création/modification css.
Alors : tout en haut, Outils/Editeur css.

gigab · Message par **gigab** » 13 juil. 2006, 14:27

Non en fait, je voudrai créer le même menu que ce site làhttp://fabiwan.kenobi.free.fr/css/NestedLists.html# Menus horizontaux _>Garbiak
J'ai trouvé le style css et l'ai copié dans une page messtyles.css
Pareil pour le html, ce n'est pas moi qui ai créé le code

Enfin j'essaye de comprendre en même temps..

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

Geckozone

Menus dynamiques

Menus dynamiques

Qui est en ligne ?