Menu inaccessible á cause de z-index

**jean christophe** · 27/11/2009, 08h30

Bonjour,

Afin de me faciliter la création de template sous Joomla, Je voudrais avoir une image de fond sur laquelle je superpose un logo. Le tout servant de support á un menu horizontal.
Pour rendre les éléments visibles, j'ai utilisé z-index, et ca fonctionne. Du moins les éléments sont visibles, mais je ne peux pas cliquer sur le menu!
J'ai donc éssayé d'enlever le z-index sur le top_menu, et d'en mettre un autre sur logo, mais ca ne m'aide pas!

Est ce que vous pouvez me dire ce que j'ai mal fait?
Que dois je faire pour résoudre mon probléme?

Je joins ci dessous la partie du code relevante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
#top_menu {
		background-image: url(../images/top_menu.png);
		width: 1000px;
		line-height:70px; /* help to place the texte in height */
		margin:0px;
		height:70px;	
		position: absolute;
		z-index: -1; 	}
 
	#top_menu li {
		display: inline;
		margin: 10px; 	}
 
	#logo img{
		float: right;
		/*z-index: 100;*/
		margin-right: 10px; 	}

Merci par avance pour regarder ce sujet!
Sincérement
Jean-Christophe

**Bisûnûrs** · 27/11/2009, 08h33

Un z-index n'est jamais négatif.
Sans le code HTML on ne peut pas t'aider.
Le mieux est de nous donner une URL à laquelle on peut constater le problème par nous-même.

**jean christophe** · 27/11/2009, 09h50

Merci pour ta réponse Bisûnûrs.
J'ai regardé de vieux sujets sur le forum, mais je n'ai pas trouvé ce que je recherchais.
Le code relevant html est ici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<body>
<div id="header">
   <div id="top_menu"> 			
   <ul>
   <li><a href="1.html">Landmåling</a></li>
   <li><a href="2.html">GIS</a></li>
   <li><a href="3.html">Landbrug</a></li>
   <li><a href="4.html">Geoteam</a></li>
   </ul>
   </div><!-- #top_menu -->	
 
   <div id="logo">
   <img alt="" src="./images/geoteam_logo_hvidt_3.PNG" alt="Geoteam logo" />
   </div><!-- #logo -->
</div><!-- #header -->

J'ai mis la page qui fonctionne comme je voudrais ici.
Remarque(z) que les menus ne sont pas utilisables!

Sincérement
Jean-Christophe

**Bisûnûrs** · 27/11/2009, 10h07

Y a pas mal de choses à revoir là ...

Quelques indications pour ton menu dans le header, je te laisserai regarder de la même manière pour ton menu à gauche :

- Dans #top_menu, supprime background-image, position:absolute, width:1000px et z-index:-1.
- Dans ton #top_menu, rajoute un float:left.
- Dans ton #header, rajoute un background-color:#7399C6 et un overflow:hidden.

**Macmillenium** · 27/11/2009, 11h15

Salut,

Envoyé par Bisûnûrs

Un z-index n'est jamais négatif.

Si ... c'est déjà une bonne solution pour passer les éléments en arrière plan.

**E.Bzz** · 27/11/2009, 11h20

Envoyé par Macmillenium

Si ...

Jamais vu nulle part !

On en apprend tous les jours ...

A+

**jean christophe** · 27/11/2009, 11h31

le z-index: -1;
Je l'ai trouvé sur un forum ou sur un tuto.

Le fait que j'ai 2 X banners, c'est juste pour remplir un peu. Comme je le disais au début, je m'en sers comme base pour faire une template sous Joomla!

J'ai réglé mes problémes!

Merci beaucoup E.Bzz & Bisûnûrs

J'ai remis ma page avec les derniéres modifications lá.

J'ai une derniére question subsidiaire:
Oú puis je trouver de la doc, ou plutôt des tutos/exemples sur le positionnement de 3 boites/éléments (que je voudrais placer en dessous des 2 autres)

Bon week end á vous tous et merci encore pour le coup de clavier!

Sincérement
Jean-Christophe

**Macmillenium** · 27/11/2009, 11h33

Envoyé par E.Bzz

On en apprend tous les jours ...

C'est définit dans la sepc CSS2.1

**E.Bzz** · 27/11/2009, 11h36

Envoyé par Macmillenium

C'est définit dans la sepc CSS2.1

Merci pour la source

A+

**Bisûnûrs** · 27/11/2009, 11h37

Envoyé par Macmillenium

Si ... c'est déjà une bonne solution pour passer les éléments en arrière plan.

Envoyé par E.Bzz

On en apprend tous les jours ...

Effectivement ...

**E.Bzz** · 27/11/2009, 10h03

Bonjour,

Envoyé par jean christophe

un menu horizontal.

je ne suis pas sûr que tu ais cerné correctement le problème : sous IE8, tes 2 menus sont accessibles normalement.
Sous Firefox, aucun des 2 menus n'est accessible ...

A+

**jean christophe** · 27/11/2009, 10h26

Merci pour ta réponse rapide E.Bzz.

Et moi qui était si content hier .....

Sous chrome, ca ne marche pas non plus!
Par contre je n'avais pas éssayé sous IE! mea culpa.

Je viens de tout controler (html/css) et ne trouve rien d'étrange.
Par contre si j'enléve le z-index:-1, le top menu fonctionne (sous chrome & firefox), même si le menu gauche ne fonctionne toujours.

Je pense que c'est du á 2 erreurs, et c'est surtout celui du top menu qui m'embête le plus!

Sincérement
Jean-Christophe

**E.Bzz** · 27/11/2009, 10h32

Envoyé par jean christophe

Par contre si j'enléve le z-index:-1,

Que les choses soient claires : il n'y a pas de "si" !
Il faut enlever ce "-1" qui n'est pas une valeur autorisée pour un z-index et perturbe le fonctionnement de la page : cf. remarque de Bisûnûrs (Salut Bisûnûrs

)

Ensuite, il sera possible de voir le reste

A+

**jean christophe** · 27/11/2009, 10h52

Merci pour vos réponses!

Bisûnûrs:
Pour le top menu, je pense que je vais faire ce que j'avais prévu au départ, c'est á dire que je vais faire mes templates dans Gimp, et y inclure le logo quand j'ai fini. De cette facon, ca marchera comme il faut.

Pour le menu de gauche, je regarde et cherche, mais je ne vois pas ce qui ne va pas!

Je ne vois pas ce qui peut être la cause du malfonctionnement. J'ai aussi regardé avec firebug, qui ne m'a rien dévoilé.

E.Bzz:
J'ai fait les modifications que Bisûnûrs m'a suggéré.

J'ai remis la page modifiée ici.

Sincérement
Jean-Christophe

**Bisûnûrs** · 27/11/2009, 11h03

Pour le menu de gauche, tu as juste à enlever le position:relative sur le footer.

Mieux, tu englobes #left_column et #container d'un troisième div sur lequel tu mets un overflow:hidden.

**E.Bzz** · 27/11/2009, 11h07

Envoyé par jean christophe

J'ai remis la page modifiée ici.

Même si ça n'intervient peut être pas dans ce problème-ci, tu as quand même une grosse erreur : 2 X id="banners" (un id doit être unique dans la page)

Sinon, pour ton menu de gauche, j'ai l'impression que sous FF (sous IE toujours pas de problème), il est recouvert par un autre objet ...
Non seulement il n'est pas cliquable mais ne réagit pas au mouseover. Le problème se pose aussi pour le texte du centre (container) : il n'est pas sélectionnable, sauf si on démarre la sélection avant, au niveau du fil d'ariane, par exemple. L'objet qui les recouvre commence donc juste après le fil d'ariane, mais je n'arrive pas à l'identifier à partir du code : ça demande des tests de ton côté

A+

**jean christophe** · 27/11/2009, 11h07

J'ai trouvé!

C'était la ligne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#footer {
position: relative; ...

J'ai remis me page á jour lá.

Menu inaccessible á cause de z-index

Positionnement en CSS avec z-index

Vue hybride

Discussions similaires

Partager

Partager