menu : pages mères et filles séparées

berticoyote · 26/08/2011 11:51:43

Bonjour à tous,

Désolé, Je suis sur que la question à dû déja être abordée dans des threads précédents mais je n'arrive pas à mettre la main dessus.

Comment fait-on pour afficher les pages mères d'un menu à un endroit (en horizontal par exemple mais peu importe) et les pages filles afférentes à un autre ?

D'avance merci

Stefpei · 26/08/2011 14:51:10

tu parles des "pages" ou des "menus" ?
si c'est les "menus" tu affiche ton menu dans 2 endroits, et mets un css de style :

menu parent :
zli2, zli3, zli4 {display:none}

menu enfants :
zli1{display:none}

Dernière modification par Stefpei (26/08/2011 14:55:31)

berticoyote · 26/08/2011 15:49:47

oui, oui, oui désolé, c'est bien de menu que je parle !...
c'est bien ça !...
OK merci c'est nickel !

berticoyote · 31/08/2011 16:36:35

Bon tout d'abord merci à toi Stefpei ça marche parfaitement.

Par contre du coup je me retrouve face à un autre probleme. Pour mieux comprendre voici le lien du site (en construction ) que je réalise en ce moment: www.dixit-rc.com/newsite

Dans mon menu horizontal j'ai donc toutes mes pages mère et dans mon menu vertical les pages filles afférentes.

J'ai créé un menu horizontal à onglets avec changement graphique pour le survol et lorsque le menu est actuf. ça c'est bon. Malheureusement. Je perd l'onglet mère actif lorsque je sélectionne une page de mon menu vertical (voir menu webdesign)...

Je pense que c'est dû justement à ma construction "double menu".
J'imagine que ça doit pouvoir se résoudre en css mais je n'arrive pas à trouver comment.
Si vous pouvez m'éclairer de vos lumières je serai preneur.

Par ailleurs j'ai remarqué que mon interface d'administration de zite passait "sous" certains de mes blocs, et avec le z-index je n'arrive pas la replacer au premier plan. Là aussi un petit conseil serait le bienvenu même si ce n'est la priorité

Ci dessous mon fichier css

D'avance merci

body {
margin: 0;
padding: 0;
background-color:#333;
background-image:url(deco/fond.gif);
background-repeat:no-repeat;
}

body, td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10pt;
}

img {border: none;}
h1 {font-size: 150%;}
h2 {font-size: 130%;
color:#06C;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
h3 {font-size: 120%;}
h4 {font-size: 110%;}
h5 {font-size: 100%;}

a {
text-decoration: none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:13px;
color:#2A759C;
}

a:hover {
text-decoration: none;
}

#global {
margin-top:100px;
margin-left:auto;
margin-right:auto;
}

#bandeauhaut {
height: 30px;
border-top: 5px solid #fec04b;
background-color:#FFF;
}

#centre {
width :100%;
height: 500px;
margin: 0px auto 0px auto;
background-color:white;
}

#vertical {
float:left;
width : 210px;
margin: 0px 0px 0px 100px;
}

#principal {
margin: 0px 0px 0px 340px;
height: 500px;
width: 900px;
}

#texte_principal {padding: 15px 35px 50px 35px;}

#texte_principal a{
color:#a46c1f;}

#texte_principal a:hover{
color:#fcba5f;}

#bot {
height:35px;
background-image:url(deco/degradebandeauhaut.gif);
background-repeat:repeat-x;
text-align:center;
font-size:10px;
color: white;
border: 1px solid #514d4e;
}

#bot a {
color:#F90;

}

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

/* Menu vertical*/

#menu_vertical a{
font-size:10px;
text-decoration: none;
text-align:right;
color:#999;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px auto 10px auto;
}

#menu_vertical a:hover {
color:#48423b
}

.zul {list-style: none;}

.zli1,
.zli1 a {display: none;}

.zli2,.zli3, .zli4 {
display: block;
color:#C60;
padding : 5px 0px 0px 0px;}

.zli2:hover,.zli3:hover ,.zli4:hover {
background-color: none !important;
background-image: url(none)!important;
background-repeat: no-repeat;
}

/** page selectionnée dans le menu vertical**/
#menu_vertical .zon {
display: block ;
color:#48423b;}

#menu_vertical .zon a {
text-decoration: none;
color:#48423b;
}

.zli2 { text-align:right;}

.zli3 {display:none;
font-size: 11px;
}
.zli4 {
font-size: 11px;
margin-left : -40px;
display:none;

}

/* Menu horizontal*/

#menu_horizontal {
height:auto;
width: 100%;
font-size:10px;
text-decoration: none;
margin: 0 0 0 340px;}

#menu_horizontal ul {
margin:0 0 0 0px;
padding:0;
}

#menu_horizontal ul li {
display:inline;
margin:0;}

#menu_horizontal a {
display:block;
float:left;
text-decoration:none;
color: #FFF;
font-size:10pt;
font-weight:bold;
width: 130px;
height: 30px;
text-align:center;
padding:5px 0 0 0;
background-image: url(deco/onglet-menu-horizontal-envers-off.gif);
background-repeat:no-repeat;
}
#menu_horizontal a:hover {
background-image: url(deco/onglet-menu-horizontal-envers.gif);
background-repeat:no-repeat;
color:#a46c1f;
}

#menu_horizontal .zli2, #menu_horizontal .zli3, #menu_horizontal .zli4 {display:none;}

/** page selectionnée dans le menu horizontal**/
#menu_horizontal zon {
border : 1px solid black;
}

#menu_horizontal .zon a {
background-image: url(deco/onglet-menu-horizontal-envers.gif);
color:#a46c1f;
}

/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
#zadmin a {
margin-right: 0px;
}

.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 25px 0 0;
width: 100%;
}

.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}
.zerr {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 1px;
}

.headcolor{background-color:#cccccc;}
.oddcolor{background-color:#dddddd;}
.evencolor{background-color:#eeeeee;}

Stefpei · 31/08/2011 17:28:42

tu remarquera dans la source de ta page WEBDESIGN (et de ses sous-pages) qu'il y-a la class ZONP (<li class="zli1 zonp">) ajoutée à la rubrique, signalant qu'elle est "Parente"...
Tu donne un style Css à .zonp et c'est tout !

tu peux voir la même logique sur le site que je fini en ce moment : http://www.c-too.com/ventilairsec
Les pages "Parentes" sont mises en évidence

berticoyote · 01/09/2011 16:15:06

OK !.... nickel .. .bon sang l'est bien foutu ce p'tit zite

En fait au départ je n'avais vu que la class zon.... mais en fait la class zonp apparait une fois qu'on est dans une page fille !...
c'est bien ça ?...

Merci encore pour tes précieuses infos ....
et pas mal pour ton site ! Bravo - J'apprécie

Forum ZitePLUS

#1 26/08/2011 11:51:43

menu : pages mères et filles séparées

#2 26/08/2011 14:51:10

Re : menu : pages mères et filles séparées

#3 26/08/2011 15:49:47

Re : menu : pages mères et filles séparées

#4 31/08/2011 16:36:35

Re : menu : pages mères et filles séparées

#5 31/08/2011 17:28:42

Re : menu : pages mères et filles séparées

#6 01/09/2011 16:15:06

Re : menu : pages mères et filles séparées

Pied de page des forums