|
|
hello à tous,
cool le tuto est merci.
cependant j'ai un ptit souci.
j'ai mon index.php au meme niveau que menu.php
ce menu je l'appel ds d'autre page qui sont ds des sous dossiers
Sur ma page index on voit bien que l'onglet est actif mais quand je clique sur "environnement", on arrive bien sur la page (c'est le meme contenu ne vous etonné pas)mais çà pose problème dés que les pages ne sont pas ds le m^me dossier.
pour voir aller ici:
le site en question
puis sur environnement.
là çà va bien parce que la page index.php et environnement.php sont ds le meme dossier.
si on choisi ds environnement le lien "tous les articles" vous constaterez que l'onglet n'est pas actif et que le menu ne fonctionne pas ainsi que pour l'article agent orange qui se trouve ds "tous les articles" de l'onglet "environnement.
comment optimiser ?
merci de m'aider
code du menu
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.php", "articles/alternaltives/.php", "environnement.php", "contact.php");
$tab_menu_texte = array( "Accueil", "Alternaltives", "Environnement", "Sciences et technologies", "Media", "Vie politique", "Contact" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"onglets\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"active\"";
$menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
?>
|
de plus ne peut t on pas insérer l'include ds le le HEAD plutot qu'avant la balise html ?
|
|
|
en fait il faut obligatoirement que tous les fichiers soient au m^me niveau ??
|
|
|
bonjour,
merci xavinou pour ce tuto !
J'ai essayé d'utiliser ce tuto pour mon futur site.
J'ai réussi à faire fonctionner le menu : je l'ai mis aligné à gauche car je voudrais mettre sur la même ligne mais tout à droite l'icone RSS et l'icone favoris.
Le problème est que je n'arrive pas à faire cela.
J'utilise l'onglet actif pour le menu.
J'ai essayé de faire sans l'onglet actif, mais je n'arrive déjà pas à aligner à droite les icones (le menu étant toujours à gauche).
Ensuite, j'ai essayé d'utiliser le code pour l'onglet actif, et là cela ne marche pas du tout...
Comment faire pour afficher sur la même ligne, un menu horizontal à droite et des icones à gauche ?
Comment faire pour intégrer ce code dans la fonction affiche_menu ?
Pour la fonction affiche_menu, j'avais fait cela :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.php", "forum.php", "livre_or.php", "equipe.php", "inscription.php", "connexion.php" );
$tab_menu_texte = array( "Accueil", "Forums", "Livre d'or", "L'équipe", "Inscription", "Connexion" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"onglets\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"active\"";
$menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "<a href=\"javascript:void(favoris());\"><img src=\"images/favoris.png\" border=\"0\"></a></li>\n";
$menu .= "<a href=\"rss.php\"><img src=\"images/rss.png\" border=\"0\"></a></li>\n";
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
?>
|
merci pour votre aide !
|
Bellum reget totus
Études : Paris Est Marne la Vallée
|
Ne serait-il pas plus simple pour la partie en php de mettre là où le menu est
Code : PHP | <?php include("includes/menu.php"); ?>
|
Et dans le fichier menu.php de mettre :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.php", "forum.php", "livre_or.php", "equipe.php", "inscription.php", "connexion.php" );
$tab_menu_texte = array( "Accueil", "Forums", "Livre d'or", "L'équipe", "Inscription", "Connexion" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"onglets\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"active\"";
$menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
echo $menu;
?>
|
Enfin je pense que c'est plus simple à comprendre.
|
|
|
Salut,
alors tout d'abord bravo pour ton tuto, ca m'a beaucoup aidé. sauf que je bloque à un endroit. Peut-être que tu l'as expliqué (dans ce cas je m'en excuse, mais je n'ai pas du le comprendre .. ouioui je débute ^^)
J'ai fait comme tu as dit mais lorsque j'ai voulu augmenter la police (de 11px je suis passée à 13px) et j'ai un onglet qui descend sous les autres et un autre où le texte dépasse de l'onglet.
Que dois-je faire ??
Merci !
|
Ville : Ferney-voltaire
Pays : France métropolitaine
|
A Anemia:
Pour l'onglet qui passe en dessous, c'est car la largeur du menu n'est pas assez élevée: il faut donc augmenter le nombre de px dans la propriété width.
Pour le texte qui dépasse, je suis pas trop sur.
Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
|
|
|
J'avais ceci, dans menu.php :
Code : PHP1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="menu">
<h3><a href="voyage_en_inde_free.php">Home :</a> </h3>
<ul id="pages">
<li><a href="inde.php">Carte de l'Inde</a></li>
<li><a href="depart.php"> 1<sup>er</sup> jour - C'est le départ...</a></li>
<li><a href="mumbai1.php">Du 2<sup>e</sup> au 4<sup>e</sup> jour : Mumbai</a></li>
<li><a href="delhi1.php">5<sup>e</sup> jour : Delhi</a></li>
<li><a href="kashmir.php">Du 6<sup>e</sup> au 8<sup>e</sup> jour : le Kashmir</a></li>
<li><a href="delhi2.php">9<sup>e</sup> et 10<sup>e</sup> jour : retour à Delhi</a></li>
<li><a href="agra.php">11<sup>e</sup> et 12<sup>e</sup> jour : Agra</a></li>
<li><a href="jaipur.php">Suite du 12<sup>e</sup> jour, et 13<sup>e</sup> jour : Jaipur</a></li>
<li><a href="pushkar.php">14<sup>e</sup> jour : Pushkar</a></li>
<li><a href="udaipur.php">15<sup>e</sup> et 16<sup>e</sup> jour : Udaipur</a></li>
<li><a href="mumbai2.php">17<sup>e</sup> au 19<sup>e</sup> jour : retour à Mumbai, puis on rentre... </a></li>
</ul>
</div> |
Ça fonctionnait bien, mais je cherchais comment différencier l'entrée du menu dans la page active. C'est comme cela que je suis tombé sur ce tuto, dont seule la dernière partie m'intéresse.
J'ai donc supprimé le contenu de menu.php pour le remplacer par ceci :
Code : PHP1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "voyage_en_inde_free.php", "inde.php", "depart.php", "mumbai1.php", "delhi1.php", "kashmir.php", "delhi2.php","agra.php","jaipur.php","pushkar.php","udaipur.php", "mumbai2.php" );
$tab_menu_texte = array( "Accueil", "Carte de l'Inde", "1er jour - C'est le départ", "Du 2° au 4° jour : Mumbai", "5° jour : Delhi", "Du 6° au 8° jour : le Kashmir", "9° et 10° jour : retour à Delhi", "11° et 12° jour : Agra", "Suite du 12° jour, et 13° jour : Jaipur", "14° jour : Pushkar", "15° et 16° jour : Udaipur", "17° au 19° jour : retour à Mumbai, puis on rentre..." );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"pages\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"active\"";
$menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
?> |
Et j'ai rajouté ces lignes dans les pages de mon site :
Code : PHP1
2
3
4
5
6
7
8
9
| <?php
require_once("./menu.php");
$menu = affiche_menu();
?>
<?php
echo $menu;
?> |
Mais le menu ne s'affiche plus. Et je ne trouve pas pourquoi. Pouvez-vous m'éclairer ?
|
|
|
message en double, supprimé
|
Ville : Ferney-voltaire
Pays : France métropolitaine
|
Bonjour a tous =)
Alors voila : j'ai essayé de faire que ce menu soit 2fois plus grand, car pour mon site je trouvais qu'il était trop petit. Mais je n'y arrive pas! J'ai essayé beaucoup de choses, mais a chaque fois il y a soit quelque chose qui dépasse soit quelque chose de trop petit. Est-ce que quelqu'un pourrait m'aider a faire qu'il soit 2fois plus grand?
Merci d'avance,
iLoveprogramming
Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
|
A force, on y arrive!
Études : ISIG
|
merci pour ce tuto mais j'ai un souci avec #onglets li.active il ne fonctionne pas chez moi c'est dire que quand un lien est active la couleur de fond indique dans le css ne prend pas. ai-je manqué quelque chose
Patheo's 
|
|
|
Bonjour! 
J4ai utilisé votre tuto... Ca marche super!
Le problème, c'est que quand je clique sur une catégorie, la page se refresh, et j'avoue que c'est chiant de descendre la scroolbarre.
Donc, j'aimerai te demander comment tu ferai pour remedier à ca.
Et aussi ce que je peux supprimer comme code de catégorie en surplus?
Merci pour la reponse!
|
|
|
Bonjours a tous,
j'ai suivi le tuto et j'ai un souci au niveau des onglets je n'arrive pas a enlever les puces de la liste...
voici mon code:
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43 | #onglets
{
position : absolute;
border : 1px solid transparent;
padding : 0;
font : bold 11px Batang, arial, serif;
list-style-type : none;
left : 50%;
margin-top : 0;
margin-left : -350px; /* la moitié de width */
text-decoration : none;
}
#onglets li
{
float : left;
height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
background-color: #F4F9FD;
margin : 2px 2px 0 2px; /* !important Pour les navigateurs autre que IE */
margin : 1px 2px 0 2px; /* Pour IE */
border : 1px solid #9EA0A1;
}
#onglets li.active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
#onglets a
{
display : block;
color : #666;
text-decoration : none;
padding : 4px;
}
#onglets a:hover
{
background : #fff;
}
#tab
{
border-bottom : 1px solid #9EA0A1;
padding-bottom : 25px;
}
|
Code : HTML | <div id="tab">
<ul id="onglets">
<li class="active"> INTEGRATION DES SYSTEMES DE GESTION </li>
<li> INFRASTRUCTURES ET PRODUCTION </li>
<li> CONSEIL EN ORGANISATION </li>
</ul>
</div>
|
je ne vois pas où je me suis trompé...
merci d'avance!
Edit: problème résolu!
|
Ville : Paris
Pays : France métropolitaine
|
Merci
voila ce que j'ai fait mais le class active ne marche pas
si quelqu'un a une idee ou je me suis trompés
merci d'avance pour votre aide
cdlt
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 | #menu{
clear:both;
float:left;
}
#corps {
clear:both;
}
#menu ul
{
list-style-type: none;
color: #FFF;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
}
li { display: inline; }
li a
{
text-decoration: none;
background-color: #00469b;
color: #FFF;
padding: .2em 1em;
border-right: 1px solid #fff;
}
li a:hover
{
background-color: #e60003;
color: #fff;
border:1px solid black;
}
#onglets li.active
{
border-bottom: 1px solid #fff;
background-color: #e60003;
}
|
|
|
|
salut
très bon travail.
Mais mon menu se remplit avec une base de données mysql.
Comment insérer mon select dans ton tableau?
je ne vois pas.
merci du coup de main
stephi
|
|
|
pour stephi (désolé pour le retard, mais je viens d'arriver et de commencer à coder des sites!)
Et pour tous les autres...
La méthode des tableaux est sympathique, mais je la trouve un peu excessive (stephi tu dois pouvoir rentrer tes infos dedans j'y ai pas réfléchi spécifiquement). Le menu horizontal ne devrait "généralement pas avoir beaucoup d'éléments
Je présente donc mes modifications (y a sûrement encore mieux, n'essiter pas à réfléchir ni à me mailé un meilleur code!
Je place du php directement dans les li (j ai pas mis partout mais sur les 2 premiers).
Sa devrai pouvoir permetre de rendre "actif" un menu si s'est un sous-menu qui est afficher par le navigateur web...(avec des if plus compliqué)
Sa donne ca:
index.php
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 | <!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>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- iso-8859-1" /> -->
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="menu.css" />
<!-- <link rel="alternate stylesheet" media="screen" type="text/css" title="Mecha" href="theme/redgirl.css" /> -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<?php include("menu.php"); ?>
<div id="corps">
<p> index </p>
</div>
<div> helo </br>
</div>
<!-- <?php
echo $menu;
?> -->
</body>
</html>
|
menu.php:
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 | <div id= "menu">
<ul id="onglets">
<?php
$info = pathinfo($_SERVER['PHP_SELF']);
?>
<li
<?php if($info['basename'] == "index.php") {echo 'class=active';
;} ?> >
<a href="index.php">accueil</a>
</li>
<li <?php if($info['basename'] == "forum.php") {echo 'class=active';
;} ?> >
<a href="forum.php">forum</a>
<ul>
<li><a href="index.php">connexion</a></li>
<li><a href="index.php">inscription</a></li>
</ul>
</li>
<li>
<a href="index.php">images</a>
<ul>
<li><a href="index.php">photos</a>
<ul>
<li><a href="index.php">catégorie 1</a></li>
<li><a href="index.php">catégorie 2</a></li>
</ul>
</li>
<li>
<a href="index.php">vidéos</a>
</li>
</ul>
</li>
<li>
<a href="index.php">téléchargements</a>
<ul>
<li><a href="index.php">vidéos</a></li>
<li><a href="index.php">musiques</a></li>
</ul>
</li>
<li>
<a href="index.php">plus</a>
<ul>
<li><a href="index.php">forum</a></li>
<li><a href="index.php">liens</a></li>
<li><a href="index.php">nous contacter</a></li>
<li><a href="index.php">team</a></li>
<li><a href="index.php">recherche</a></li>
</ul>
</li>
</ul>
</div>
|
le css:
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183 | body{
background-color: black;
color:silver;
}
#menu{
/*dev info: */
border-color: yellow;
border-style: solid ;
/*normal config*/
border-width: 3px;
border-bottom : 1px solid white;
padding-bottom : 25px; /*nivaeau de la barre qui traverse l ecrant*/
height:auto;
}
#onglets {
position : absolute;
border : 1px solid transparent; /* bords transparent:sert à pouvoire placer les onglets facilement */
padding : 0; /*colle le cadre aux onglets */
font : bold 11px Batang, arial, serif;
list-style-type : none;
left : 15%;
margin-top : 0;/*place les onglets sur la barre horizontale*/
width : auto;
}
#onglets li
{
float : left;
height : 21px; /* à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
background-color: black;
margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que IE */
margin : 1px 2px 0 2px; /* Pour IE */
border : 1px solid purple;
}
/* onglet actif : pour modifier les couleur et le border-bottom
de l onglet de la page actuelle */
#onglets li.active
{
border-bottom: 1px solid white;
background-color: white;
color:black;
}
#onglets a
{
display : block;
color : #666;
text-decoration : none;
padding : 4px;
}
#onglets a:hover
{
background : yellow;
}
#onglets li ul{
list-style-type : none;
}
/*#onglets li ul li ul{*/
/*list-style-type : none;*/
/*}*/
#onglets li li {
clear:both;
}
/*#onglets, #onglets ul /* Liste */ */
/*{*/
/* padding : 0; /* pas de marge intérieure */*/
/* margin : 0; /* ni extérieure */*/
/* list-style : none; /* on supprime le style par défaut de la liste */*/
/* line-height : 21px; /* on définit une hauteur pour chaque élément */*/
/* text-align : center; /* on centre le texte qui se trouve dans la liste */*/
/*}*/
/*#onglets /* Ensemble du onglets */*/
/*{*/
/* 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 */*/
/* /*dev info: */*/
/* border-width: 3px;*/
/* border-color: green;*/
/* border-style: solid ;*/
/* height:150px;*/
/*}*/
/*#onglets 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 : #000; /* couleur de fond */ */
/* color : #fff; /* couleur du texte */*/
/* text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */*/
/* width : 144px; /* largeur */*/
/*}*/
/*#onglets li /* Elements des listes */ */
/*{ */
/* float : left; */
/* /* pour IE qui ne reconnaît 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 #onglets li*/
/*{*/
/* border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */*/
/*}*/
/*#onglets li ul /* Sous-listes */*/
/*{ */
/* position: absolute; /* Position absolue */*/
/* width: 144px; /* Largeur des sous-listes */*/
/* left: -999em; /* Hop, on envoie loin du champ de vision */*/
/*}*/
/*#onglets li ul li /* Éléments de sous-listes */*/
/*{*/
/* /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */*/
/* 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 #onglets li ul li */
/*{*/
/* border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */*/
/*}*/
/*#onglets li ul ul */
/*{*/
/* margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ */
/* /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */*/
/* 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 #onglets li ul ul */
/*{*/
/* border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */*/
/*}*/
/*#onglets li:hover ul ul, #onglets 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 */*/
/*}*/
/*#onglets li:hover ul, #onglets li li:hover ul, #onglets li.sfhover ul, #onglets 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 sous IE */*/
/*}*/
|
|
|
|
Bonjour,
je me suis servi de ce tuto pour faire le menu de mon site.
Mon problème c'est que je ne vois rien là où devrais s'afficher mon menu.
voici mon code :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?php
require_once("./menu/menu.php");
$menu = affiche_menu();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Phil Émile Art</title><!-- FAVICON (icone à coté de la barre URL) -->
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Phil Émile Art</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
|
Et
Code : HTML | <!-- Début du menu -->
<?php
echo $menu;
?>
<!-- Fin du menu -->
|
Puis dans menu.php
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.html", "apropos.htm", "projets.htm", "portfolio.htm", "procedure.htm", "mailto:admin@philemileart.x10hosting.com" );
$tab_menu_texte = array( "Accueil", "À propos", "Projets", "Portfolio", "Procédure", "Contact" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu_container\">\n <ul id=\"menu green\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"current\"";
$menu .= "><a target="_top" href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
?>
|
Où est mon problème ?
Merci d'avance.
Philippe St-Pierre
Chevreuil Observateur
|
Avis : Très bon
Ville : Crisenoy
Pays : France métropolitaine
|
Merci !
20/20
|
‘Errare humanum est’
Ville : Roeux
Pays : France métropolitaine
|
Super tutoriel !
Ma note : 19/20
|
|
|
Merci pour ce bon tuto!
|
Because you're mine...
Avis : Très bon
|
bonjour,
excellent tuto pour la base des menus en onglets.
afin d'avoir des onglets aux bords arrondis, je préconise le border-radius.
Code : CSS 1
2
3
4
5
6
7
8
9
10
11
12
13 | #onglets{
position : absolute;
border : 1px solid transparent;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding : 0;
font : bold 11px Batang, arial, serif;
list-style-type : none;
left : 50%;
margin-top : 0;
width : 430px;
}
|
Avant de poster, regardez les tutos  ... Les réponses à nos questions y sont souvent. 
Sinon, pensez à marquer vos sujets en résolu dès que c'est le cas.
|
|
|
Le menu s'affiche nickel mais lorsque un onglet est actif la couleur ne change pas ... =(
http://univerdexter.free.fr
|
|
le tuto est cool jai tous fai je le essay partout ca va ya une chose ke jai pa pui faire kan je redui le navigateur mon menu onglets c superpose et reste pa fixe
si kelkun peu aider jai besoin de votre aide
|
Avis : Très bon
|
Encore un tutoriel facile d’accès et efficace sur le sdz. Merci!
une réponse? du pain béni pour les zéro!
une solution? the cherry on the cake! (Gotlib)
|
|
|
salut
exellent tuto
est ce que quelqu'un peut m'expliquer seulement cette petite ligne.
padding-bottom : 25px;
c'est entre quoi et quoi 25px moi j'ai compris que c'est entre le bas de onglets et menu mais je ne vois pas ça.
s'il vous plait aidez moi.
|
|
|
Bonjour,
j'ai bien suivit le tuto mais le menu s'affiche 2 fois.
une solution?
|
mouhg-lee
Trouvez une formation
Suggestions
Flux RSS News
Facebook
Google+