Re menu horizontal

mapaje · 27/10/2007 19:09:39

Bonsoir,

J'ai préféré relancer un nouveau sujet pour pas alourdir complètement. Bref je vous donne une nouvelle version d'un menu horizontal bien plus simple et sans grosse modif, juste en CSS:

CSS:
/* propriétés générales de la page */
body {
background: #d2ddec url(image/bleu1.jpg) no-repeat;
color : #ffffff;
font: 0.9em, Verdana, Arial, Times new roman;
voice-family: inherit;
}

h1{
text-align:center;
color:#000000;
font:1em, Arial black, Verdana, Times nex roman, Arial;
}
#top {
width: 900px;
height: 69px;
background: #FFF url(deco/topbg.png);
border-bottom: none;
margin:0;
padding: 10px 0 0 0;
}
/* propriétés du menu horizontal */

#menu_horizontal {
background-color:#F8F8FF;

float: left;
width: 100%;
font: 1em, Calligraph421 BT, Arial, Times New Roman ;
}

#menu_horizontal ul {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}

#menu_horizontal li {
margin: 0pt;
background: transparent url(image/onglet.jpg) ;
float: left;
}

#menu_horizontal a {
background: transparent url(image/onglet.jpg) no-repeat scroll right top;
padding: 5px 15px 4px 6px;
display: block;
text-decoration: none;
font-weight: bold;
color: #648040;
}

#menu_horizontal a {
float: none;
}

#menu_horizontal a:hover {
background: transparent url(image/vert1.png) no-repeat ;
color: #333333;
}

#menu_horizontal .zli2 {
display:none;

}

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

#page {
background-color:#FFF;
border: solid 1px #CCC;
border-top: none;
background-color: #FFF;
width: 900px;
margin: 0 auto 16px auto;
border-left: 1px solid #777;
border-right: 1px solid #777;
padding: 0;
text-align: left;
}

#mid {
width: 900px;
border-bottom: 1px solid #CCC;
background-image: url(deco/bg.png);
margin:0;
padding: 0;
}

#side {
width: 180px;
float: left;
margin:0;
padding: 5px 10px 5px 10px;
}

#main {
width: 676px;
float: left;
margin:0;
padding: 7px;
text-align: justify;
}

#break {
clear: both;
}

#bot {
width: 900px;
border-bottom: 1px solid #777;
background-image: url(deco/topbg.png);
font-size: 75%;
text-align: center;
margin:0;
mapping: 0;
color: #225;
}

#top h1 {
margin: 0;
padding: 0 0 0 10px;
color: #FFF;
font-size: 24px;
}
#top h2 {
margin: 0;
padding: 4px 0 5px 10px;
color: #EEF;
font-size: 90%;
}
div#contenu {
float:left;
width:780px;
height:520px;
background-color:#FFCC00;
}
div#contenu ul li {
margin-left:20px;
}

/* Menu */
.zul {
padding: 0;
margin: 1px 0 0 0;
list-style: none;
}
.zli1,.zli2,.zli3,.zli4 {
background: transparent url(deco/pge0.png) no-repeat;
padding-left: 14px; display:block;
}
.zon {
background-image: url(deco/pge1.png);
}
.zli1 {
margin-left: 0px;
}
.zli2 {
margin-left: 16px;
}
.zli3 {
margin-left: 32px;
}
.zli4 {
margin-left: 48px;
}

/* styles zite */
#zadmin {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 3px 0 0 0;
}
.ztable {
border: 1px solid #CCC;
background-color: #EEE;
padding: 0 2px;
margin: 5px 0;
width: 100%;
}
.zalert {
border: 1px solid #C00;
background-color: #FEA;
padding: 0 2px;
}

A vous de remplacer les images. Il fonctionne en local et surement en exploitation. N'oublier pas d'inclure le div dans le template ( <div id="menu_horizontal"><?php echo $zite->content['menu'] ?></div>)

Merci à Renaud (j'ai enfin saisi ce que tu me suggérais ... lol)

Maintenant je m'attaque à une version en déroulant mais comme d'hab, faudra pas être presser.

A plus
Jean Pierre

midiweb · 18/02/2008 15:45:47

salut, je cherche un menu horizontal en haut de ma page tout en gardant le menu vertical à gauche et avec une fenêtre de news à droite.Les entrées du menu vertical et horizontal sont bien sûr différentes.
est-ce je peux intégrer votre code css ?

mapaje · 18/02/2008 16:32:14

Bonjour

Sans problème, il est pour tout le monde. Si tu as du mal à adapter, dis le moi. Et si tu veux exactement le même menu, il faudra jouer des display: none.
A plus
JP

midiweb · 20/02/2008 14:07:35

salut. merci de tes conseils. J'ai fait un copie-coller des la partie css qui concerne seulement les menus horizontaux puisque c'est cela qui m'intèresse. Tout marche bien MAIS comment faire apparaître un autre contenu que celui qui correspond aux menus verticaux. Comprends-tu ce que je veux?:
2 menus différents avec 2 contenus différents tandis que ton CSS m'affiche à l'identique le menu vertical.
À quoi bon?

Ex: supposons que j'ai un menu horizontal: HOME-PROFIL-CLIENTS-PRODUITS-CONTACT,....
et un menu vertical: FIRMES-PAYS-DÉPARTEMENT-COMPTABILITÉ,.....

Quand je clique sur CLIENT en backend (admin) j'ai mon texte à modifier, quand je clique sur FIRMES, j'ai le texte correspondant à changer,...etc....ainsi de suite pour les autres entrées des menus.

Faut-il changer le code php? mes connaissaances sont basiques.
Peux-tu m'aider stp.? merci

A+

mapaje · 20/02/2008 15:39:23

Salut,

Je ne suis pas sur d'avoir tout compris, mais je vais essayer:
Home, profils etc sont les pages principales et correspondent dans le CSS à ZLI1
Firme, pays etc sont les pages filles des pages principales et correspondent à ZLI2,3,4
Dans ton CSS , tu mets dans ta partie correspondante à ton menu horizontal:

#menuhorizontal .zli1 {
display:block;
}
Et tu recommences pour les autres zli en mettant:
display: none;

Dans le css d'origine des zli qu'il ne faut pas supprimer surtout, tu fais:
.zli1{
display: none;
Le reste tu n'y touches pas
A l'affichage tu auras en haut toutes tes pages principales et quand tu cliqueras, tu auras les pages filles qui s'afficheront sur le coté.
Ces menus ne marchent qu'avec le code d'origine. Sinon tu peux rajouter des rubriques en dur s'il y a un intérêt car ce sera pour appeler de l'externe.
J'espère avoir répondu un peu. Tiens nous au courant et si tu cales envoie ton template et ton CSS

JP

midiweb · 20/02/2008 22:51:40

je t'explique un peu mieux car je ne comprend pas tout ce que tu m'écris.
La question n'est pas des pages principales ou filles mais que le contenu appelé par les entrées du menu horizontal soit différent du contenu affiché par les entrées du menu vertical.

Au point de vue niveau, les deux menus ont la même importance.
1) Soit le menu horizontal: HOME-PROFIL-CLIENTS-PRODUITS-CONTACT,....
Quand je clique sur HOME ou PROFIL,etc... le contenu s'affiche au milieu avec la possiblité de changer ou de renommer par le panneau admin.

2) Soit le menu vertical: FIRMES-PAYS-DÉPARTEMENT-COMPTABILITÉ,.....
Quand je clique sur FIRMESou PAYS,etc... le contenu s'affiche au milieu avec la possiblité aussi de changer ou de renommer par le panneau admin.

Le menu HOME-PROFIL.etc... ne doit pas se retrouver dans le menu vertical

Docn je dois pouvoir rajouter dans le menu horizontal une nouvelle entrée comme on peut le faire par défaut dans le menu vertical.
Si par ex. j'ajoute FORUM dans le menu horizontal. Cette entrée reste dans le menu horizontal et n'apparait pas dans le menu vertical. Et ainsi de suite pour toutes les nouvelles entrées futures.

Bien sûr cela reste valable aussi pour le menu vertical dont les entrées n'apparaissent pas dans le menu horizontal.
Avec ton CSS, je retrouve les entrées du menu vertical dans mon menu horizontal. À quoi bon avoir deux fois le même menu, non?
C'est plus clair maintenant?

Ici ton css est juste mais pas le contenu qui s'affiche, Il faut soit changer le template soit le code de index.php ou zite.php. Que sais-je?

En bref, quand je clique sur le menu horizontal c'est son PROPRE contenu qui s'affiche et pas le même contenu que la même entrée correspondante dans le menu vertical.
C'est le principe même qu'il faut changer pas seulement le design.

Je cherche encore.

Merci de m'aider.

A+

mapaje · 21/02/2008 09:40:50

Bonjour,

Je ne comprends pas car avec ce que je t'ai donné, tu peux avoir une ligne horizontale avec les principales entrées et une ligne verticale avec les autres rubriques. La seule restriction est qu'en horizontal, tu ne peux pas avoir de sous-menu, du fait de la structure de Zite et aussi que je n'ai pas essayé de le faire.
Sinon normalement, tu ne devrais pas avoir les mêmes entrées en horizontal qu'en vertical. Chez moi, c'est le cas. L'horizontal commande le vertical.
Essaye de mettre un exemple concret, le site s'il est ligne par exemple.

A+
JP

midiweb · 21/02/2008 12:31:23

salut, bon soit! j'ai copié tout ton code ci-dessus dans la version par défaut de Zite mais j'ai deux fois le même menu qui s'affiche, un fois à gauche, une fois à droite.

Tu me demandes mon site, eh bien le voilà....mais c'est en allemand. je suis bilingue et j'ai fait ce petit site pour une avocate. A cet effet, j'ai traduit Zite dans la langue de Goethe
Le CMS est provisoirement sur mon serveur à l'adresse:

www.michelmorodi.com

Comme tu vois, le menu est à gauche mais je veux un menu supplémentaire en haut en dessous de la bannière avec d'autres entrées différentes et dont on peut changer le contenu comme dans le menu vertical. Là est la question, rien d'autre.
N'essaie pas de te loguer, le pass par défaut a été changé.

Salutations

mapaje · 21/02/2008 16:12:41

Re,

D'abord beau site.

Bon je crois que je vois où est le "problème" .
Je vais te redonner un template différent avec un css adapatable. Ce qu'il faut que tu fasses c'est choisir tes rubriques pour en haut, celles pour le coté. Une fois fait ce choix, dans admin, tu décales avec le petit plus celle que tu veux sur le coté d'un cran. Plus tard, tu pourras également faire d'autres décalages pour avoir des sous-rubriques. Attention, le code que je donne ne marche pas pour faire du déroulant en horizontal.

TEMPLATE:
<!DOCT YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Impressum, </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
<div id="top">
<h1></h1>
<h2></h2>
</div>
<div id="menu-horizontal">
<?php echo $zite->content['menu']?>
</div>
<div id="mid">
<div id="side">
<?php echo $zite->content['menu']?>

<div id="main">
ETC...
CSS: à inclure dans ton principal en ajoutant cette ligne:@import url(nomdufichier.css);
#menu_horizontal {
float:left;
width:100%;
background:transparent url(deco/nomdufichier.png) repeat-x bottom;
font: 0.9em, Staccato222 BT, Calligraph421 BT, Arial, Times New Roman ;
line-height:normal;
}

#menu_horizontal ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#menu_horizontal li {
float:right;
background: url(deco/nomdufichier.png) no-repeat;
margin:0;
padding:0 0 0 9px;
}
#menu_horizontal a {
display:block;
background:url(deco/nomdufichier.png) no-repeat ;
padding:5px 15px 4px 6px;
}
#menu_horizontal li:hover, #menu_horizontal li:hover a {
background-position:0% -150px;
color:#333;
}
#menu_horizontal li:hover a {
background-position:100% -150px;
}
#menu_horizontal .zli1 {
display:block;
}
#menu_horizontal .zli2 {
display:none;
}
#menu_horizontal .zli3 {
display:none;
}
#menu_horizontal .zli4 {
display:none;
}
#menu_horizontal .zli5 {
display:none;
}
#menu_horizontal .zli6 {
display:none;
}

Enfin dans le code CSS d'origine tu rajoutes:
.zli1 {

display:none;
}

Voilà en espérant que ça t'ira. Si tu n'y arrives pas, envoie, comme moi, ton template et ton css.

A +
JP

Forum ZitePLUS

#1 27/10/2007 19:09:39

Re menu horizontal

#2 18/02/2008 15:45:47

Re : Re menu horizontal

#3 18/02/2008 16:32:14

Re : Re menu horizontal

#4 20/02/2008 14:07:35

Re : Re menu horizontal

#5 20/02/2008 15:39:23

Re : Re menu horizontal

#6 20/02/2008 22:51:40

Re : Re menu horizontal

#7 21/02/2008 09:40:50

Re : Re menu horizontal

#8 21/02/2008 12:31:23

Re : Re menu horizontal

#9 21/02/2008 16:12:41

Re : Re menu horizontal

Pied de page des forums