chevauchement des calques : z index?

[lapîn]

Bonjour ,

j'ai avancé dans la création de mon site "tout en css" (et je progresse ) mais j'ai un petit problème :

quand les sous menus de mes menus s'affichent au passage de la souris (merci au très bon turorial de alsacréations pour le menu), ceux-ci "rentrent" dans le bloc en dessous et le pousse VISIBLE ICI.

j'ai cherché à résoudre ce problème et je crois que je dois utiliser le "z-index" pour autoriser "l'empilement" des blocs. mais par contre je crois comprendre qu'il faut que mes blocs soient placés en absolute pour utiliser le z-index mais moi ils sont en flottant. comment faire?

merci pour vos réponses.

sinon : gros problème sur opera : ni mes sous menus, ni ma scollbar ne s'affichent..

merci pour votre aide,

bonne soirée, bonne année

a+

lapin

[Monique]

Bonjour lapin,

Avant d'envisager le problème de z-index, il faudrait corriger les erreurs dans ton code (notamment au niveau des balises li imbriquées) et voir si le problème persiste.

Je te conseille de bien indenter ton code, c'est beaucoup plus facile à relire par la suite.

Comme ceci par exemple (enfin presque... dur dur d'obtenir les tabulations comme je le voudrais )

<ul>

  <li>m1</li><!-- fin m1 -->

  <li>m2<ul>

  <li>sm2.1</li>

  <li>sm2.2</li>

  </ul></li><!-- fin m2 -->

  <li>m3<ul>

  <li>sm3.1</li>

  <li>sm3.2</li>

</ul></li><!-- fin m3 -->

</ul>

Pense aussi à passer ta feuille de style au validateur.

[lapîn]

Bonjour lapin,

Avant d'envisager le problème de z-index, il faudrait corriger les erreurs dans ton code (notamment au niveau des balises li imbriquées) et voir si le problème persiste.

Je te conseille de bien indenter ton code, c'est beaucoup plus facile à relire par la suite.

Comme ceci par exemple (enfin presque... dur dur d'obtenir les tabulations comme je le voudrais )

Pense aussi à passer ta feuille de style au validateur.

merci monique

j'ai un peu restructuré mon code mais il me reste plein d'erreurs ds mes listes et je comprends pas trop. je vais me replonger dedans après les fêtes et essayer de résoudre ce problème.

sinon, j'ai validé ma css qui est "bonne"

bonnes fêtes et merci.

a+

[lapîn]

bonjour

donc ça y est mon code est propre (sauf les scripts ajoutés par club-internet après la balise html pour les stats et ouvrir une popup mais de toute façon le site ne sera pas hébergé là donc on peut considérer que le code est propre) mais mon problème demeure : quand un calque de sous-menu apparait il pousse le calque en dessous au lieu de "passer par dessus". donc apparemment il faut que j'attribue des valeurs de z-index aux divs concernés mais comme mes dics ne sont pas en absolu, comment faire?

jvais continuer à chercher mais si qqn a une idée, merci de m'aider.

merci et a+

lapîn

[Beatnykk]

peu importe absolu ou relatif. le z-index ne sert juste à rien si les calques ne se chevauchent pas. par contre si deux calques se chevauchent (en mode relatif tout comme en absolu) le premier plan sera pour celui quia le z-index le plus elevé.

[lapîn]

peu importe absolu ou relatif. le z-index ne sert juste à rien si les calques ne se chevauchent pas. par contre si deux calques se chevauchent (en mode relatif tout comme en absolu) le premier plan sera pour celui quia le z-index le plus elevé.

oui mais mes divs sont en float, et z-index n'existe pas en float.

j'essaie donc de les "convertir" en "position:relative" mais c'est pas très glorieux

[Monique]

Bonjour lapin,

Tu peux très bien utiliser z-index pour des éléments en float.

Je le fais avec succès pour la maquette de la nouvelle version de mon site... et tout passe au validateur.

Le problème doit avoir une autre origine.

[Beatnykk]

l'origine du problème ??? heu... au hasard.. le css ??

"ceci était une blague à deux balles".

et je m'en excuse dailleurs...

[lapîn]

merci Monique et Beatnykk et bonjour

bon bah jvais chercher "l'erreur" mais je comprends vraiment pas trop : ça changer rien quand j'ajoute ds mes css des propriétés z-index...

mas css sans z-index (oui c'est un peu le bordel peut-être )

body {

margin: 0;

background-color: #fff;

text-align: center;

}

.conteneur {

width: 798px;

height: 589px;

margin-left: auto;

margin-right: auto;

text-align: left;

}

.haut {

float: left;

width: 798px;

height: 120px;

background-image: url('images/maquette_01.jpg');

}

.divcontenu {

float: left;

width: 798px;

height: 426px;

background-image: url('images/maquette_02.gif');

}

.titrecontenu {

float: left;

width: 798px;

height: 30px;

margin-top: 20px;

text-align: center;

}

.frame {

float: left;

height: 313px;

width: 520px;

margin-left: 20px;

margin-top: 10px;

overflow: auto;

}

.diaporama {

float: right;

height: 313px;

width: 180px;

margin-right: 8px;

margin-top: 0px;

}

.pied {

float: left;

width: 798px;

height: 43px;

background-image: url('images/maquette_03.gif');

}

ul, li {

margin: 0;

padding: 0;

list-style-type: none;

font-family: arial, helvetica, sans-serif;

font-size: 10px;

font-weight: normal;

}

.menu {

margin-top: 25px;

margin-left: 34px;

width: 764px;

height: 24px;

font-size: 14px;

font-family: arial, helvetica, sans-serif;

}

.menu a {

margin: 0 2px;

width: 100px;

height: 20px;

display: block;

text-align: center;

border: 1px solid gray;

text-decoration: none;

color: #fff;

background: #339933;

}

.menu a:hover {

background: #66cc66;

border: 1px solid #ccc;

color: #ff3300;

}

.menu a:active {

background: #66CC66;

border: 1px solid #ccc;

color: #fff;

}

.menu li {

float: left;

font-family: arial, helvetica, sans-serif;

font-size: 14px;

}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 {

float: left;

display: none; /* par défaut, les sous-menus ne seront pas affichés */

font-size: 8px;

padding: 5px 0 5px 0;

width: 100px;

}

.smenu a {

margin: 0 2px;

width: 100px;

height: 20px;

display: block;

text-align: center;

border: 1px solid #ccc;

text-decoration: none;

color: #000;

background: #fff;

}

.smenu a:hover {

background: #66CC66;

border: 1px solid #ccc;

}

.smenu a:active {

background: #66CC66;

border: 1px solid gray;

color: #fff;

}

.smenu li {

float: left;

font-size: 10px;

}

.smenu {

font-size: 10px;

z-index: 1;

}

.stylecontenu {

font-size: 12px;

font-family: arial, helvetica, sans-serif;

}

.stylemenu {

font-size: 12px;

font-family: arial, helvetica, sans-serif;

}

merci de votre aide en tout cas et a+

lapin

[Beatnykk]

bon et maintenant remets-nous les feuilles contenant des z-index uniquement (le reste, si ça marche on s'en fout tant que ça marche)

[lapîn]

Merci pour ton aide Beatnykk

alors ma page est en ligne ICI

après plein plein d'essai avec le z-index voici le dernier (qui marche tjs pas) :

(précision : ma page est composée d'un div "haut" - bandeau du haut -, puis d'un div "contenu", qui contient un div "menu", un div "titrecontenu", un div "frame" à côté d'un div "diaporama". Un div "pied" fini la page contenu ds un div conteneur. ça va toujours ? )

j'essaie déjà de faire passer mes sous-menus pardessus le titrecontenu mais j'arrive pas...

les css :

.titrecontenu {
float: left;
width: 798px;
height: 30px;
margin-top: 20px;
text-align: center;
z-index: 5;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 {
float: left;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
font-size: 8px;
padding: 5px 0 5px 0;
width: 100px;
z-index: 1;
}

.smenu a {
margin: 0 2px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px solid #ccc;
text-decoration: none;
color: #000;
background: #fff;
z-index: 1;
}
.smenu a:hover {
background: #66CC66;
border: 1px solid #ccc;
z-index: 1
}
.smenu a:active {
background: #66CC66;
border: 1px solid gray; 
color: #fff;
z-index: 1;
}
.smenu li {
float: left;
font-size: 10px;
z-index: 1;
}
.smenu {
font-size: 10px;
z-index: 1;
}

j'ai déjà fait plein d'essai en utilisant le z-index ds les divs menu notamment.

sinon un extrait de mon code html

<div class="divcontenu">
  <div class="menu">
 	 <ul>
    <li>
   	 <a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Présentation</a>
      <ul id="smenu1"  onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
     	 <li><span class="smenu"><a href="">en détails...</a></span></li>
     	 <li><span class="smenu"><a href="">situation</a></span></li>
     	 <li><span class="smenu"><a href="">aux alentours</a></span></li>
     	 <li><span class="smenu"><a href="">voie verte</a></span></li>
      </ul>
    </li>
    <li>
....
...
...
</div>
  <div class="titrecontenu">
  <img src="images/titre_05.gif" alt="situation" />
  </div>

voilà !

merci

a+

[lapîn]

sinon je me demande si ce serait pas lié au javascript qui est ds le head qui fait fonctionner le système de menu :

<script type="text/javascript">
<!--
  function montre(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="block";
  } else if (document.all) {
    document.all[id].style.display="block";
  } else if (document.layers) {
    document.layers[id].display="block";
  } } 

 function cache(id) {
   if (document.getElementById) {
    document.getElementById(id).style.display="none";
  } else if (document.all) {
    document.all[id].style.display="none";
  } else if (document.layers) {
    document.layers[id].display="none";
  } } 
//-->
</script>

mais je pense pas...

[Beatnykk]

bah oui il me semble

parce que tes propriétés css sont bien stipulées. normalement avec float et un z-index les élements se juxtaposent au fond. c'est bien ton jvs à mon avis.

à quoi se référe cet attribut "block" dans ton script ? faut pas mettre "float" ou un truc différent (ou un nom de feuille pour smenu) à la place.

c'est dans un bean ?

c'est un script externe ?

toute façon c'est sûr c'est de là que ça vient !!

[lapîn]

toute façon c'est sûr c'est de là que ça vient !!

bah c'est bien : y a du progrès déjà!

le "block" il est ds mes divs menu et smenu avec la fonction display : "display: block"

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7 {
float: left;
display: none; /* par défaut, les sous-menus ne seront pas affichés */
font-size: 8px;
padding: 5px 0 5px 0;
width: 100px;
z-index: 1;
}

.smenu a {
margin: 0 2px;
width: 100px;
height: 20px;
[B]display: block;[/B]
text-align: center;
border: 1px solid #ccc;
text-decoration: none;
color: #000;
background: #fff;
z-index: 1;

ds le body le javascript se retrouve pour les menus : <a onmouseover="montre('smenu1');" onmouseout="cache('smenu1');" href="">Présentation</a> par ex.

[Beatnykk]

je sais pas trop...

commence par essayer

style.display="inline";

ou

style.display="inherit";

dans ton fameux jvs uniquement (3 changements sous la function montre)

voir la différence. après on avisera...

[lapîn]

alors avec le style.display="inline", le problème reste le même.

avec le style.display="inherit", les sous menus ne s'affichent plus (remarque ça pourrait être la solution !)

[Beatnykk]

hé bah écoute là je vois pas 36 soluces :

1/ tu repense totalement ton site en travaillant en pourcentage et en calques uniquement en criant "ni dieu ni maître, à mort le css, salaud, on aura ta peau".

mais ce serait un peu extrême, voire radical c'est sûr.

2/ tu refait tes sous menus un peu plus court (en hauteur, moins de marge, moins d'interespace) et tu prévois entre le menu et le contenu un espace suffisant correspondant au maximum de sous menus à afficher (en l'occurence "hébergement", à raccourcir si possible sous moins de pages, en rassemblant au max).

un peu de redesign, que diable

3/ tu retournes dans ton terrier et tu abandonnes le webmastering avant de te flinguer sous l'emprise du valium qui te maintient psychologiquement à flot.

une seule de ces trois réponses est la bonne... cherchez bien... gare à la mixomatose...

Modifié 6 Janvier 2004 par beatnykk

[lapîn]

j'ai hurlé 109 fois "ni dieu ni maître, à mort le css, salaud, on aura ta peau" comme tu me l'as conseillé, puis j'ai hurlé 203 fois "javascript t'es encore pire fais gaffe à toi, ça se passera pas comme ça" en balançant en même temps mon écran par la fenêtre en espérant au moins écraser un caniche : aucun succès...

bah en fait jsuis plutôt resté comme un con devant mon écran et je viens de sortir une très belle conclusion à l'instant : "je crois qu'il faut que je revoie totalement l'organisation de mon site "

oui ça fait mal

mais bon... j'espère rebondir!

merci beaucoup pour ton aide en tout cas

lapin - lui reste encore ses yeux rouges pour pleurer

Modifié 6 Janvier 2004 par lapîn

[Beatnykk]

les tantras des fois ça marche (en auto-suggestion le plus souvent).

ceci dit avant de reformater (stop ! nooooooon lapin, pas ton ordino, non !!) ton site, essaie tout de même de minimiser le nombre de tes sous-menus dans les grands devellopements ("hébergement") et de laisser entre les menus et le contenu l'espace nécessaire à l'affichage de ceux-ci.

ainsi, normalement, le contenu ne se décalera plus.

et ça peut peut être suffire, qui sais ?

[lapîn]

et bah finalement j'ai revu ma page et déplacé le menu. le résultat est en ligne ICI (j'ai pas encore tout à fait corrigé mon code pour le validateur, jle ferai demain Monique ). Si ce type de menu peut intéresser qqn, je l'explique : il est basé sur l'exemple de alsacreations et j'ai remplacé les titres des rubriques par des images interactives en javascript . J'ai créé une nouvelle classe pour que le sous-menu de la rubrique dans laquelle on est soit tjs affiché. Bon maintenant j'arrête de faire mon intéressant surtout qu'il est pas scpécialement réussi.

seulement petits problèmes : mozilla affichent très mal les sousmenus, ils comprend mal la fonction javascript et opera ne les affiche pas du tout... (c'est pour ça que je peux dire qu'il est loin d'être réussi mon menu!). et aussi, apparemment opera ne gère pas la fonciton overflow (je n'ai pas de scrollbar sur opera).

et aussi j'ai mis des proprétés text-align: justify, ou right pour d'autres class, bah les navigateurs s'en foutent complètement et ferrent mon texte à gauche; ça vous ai déjà arrivé? (et ma feuille de style est valide).

par ex : j'ai ma classe de contenu standart qui est :

.stcontenu {

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

text-align: justify;

}

et bah le résultat est ferré à gauche!

merci si qqn peut m'expliquer.

bonne fin de weekend

a+

lapin

[Beatnykk]

le seul problème c'est que comme tu travailles en taille fixe (une fois de plus, tu n'es malheureusement pas le seul) lorsque l'on surligne "hotels restaurants" ou "chambres d'hotes" __de la fameuse rubrique dont je te prédisais plus haut qu'elle était trop longue__ le résultat est que le boutons "liens" dépasse de la zone menu.

voir à travailler (enfin ???) en pourcentage ou à ne pas auguementer la taille des caractéres de sous-menus entre les états rollover et rollout.

sinon sous iexplo ya un bout qui dépasse en bas en dessous du contenu (problème de taille fixe, surement).

enfin graphiquement je trouvais la page mieux en horizontal. mais bon...

[lapîn]

le seul problème c'est que comme tu travailles en taille fixe (une fois de plus, tu n'es malheureusement pas le seul) lorsque l'on surligne "hotels restaurants" ou "chambres d'hotes" __de la fameuse rubrique dont je te prédisais plus haut qu'elle était trop longue__ le résultat est que le boutons "liens" dépasse de la zone menu.

voir à travailler (enfin ???) en pourcentage ou à ne pas auguementer la taille des caractéres de sous-menus entre les états rollover et rollout.

sinon sous iexplo ya un bout qui dépasse en bas en dessous du contenu (problème de taille fixe, surement).

enfin graphiquement je trouvais la page mieux en horizontal. mais bon... 

je comprends pas j'ai pas tous ces défauts que tu dis sur ie : menu qui déborde et bout sous le contenu. t'es sur mac?

sinon, si je travaille en pourcentage, est-ce que je pourrai centrer mon site (oui je crois...) mais ne crois-tu pas que mes photos du côté droit pas ex seront pas belles (pixellisées un peu ptet) si une grande résolution (1280 par ex) si le site était en pourcentage?

je dis ça mais ça doit être une idée reçue, une connerie en fait!

et tu penses que normalement, en travaillant en pourcentage je n'aurai pas ces bugs cités plus hauts?

merci de ton aide en tout cas

a+

[Beatnykk]

en fait selon la célèbre formule "qui peut le plus peut le moins", sache qu'en "formatant" le site sur un 1600*1200 tes images (jpg) ne péseront que quelques ko de plus, et s'adapteront (si tu travailles bien en pourcentage) d'un 640*480 à 1600*1200 (et plus d'ici queleques temps ? qui sait...).

j'en parlais déjà ici :

http://www.webmaster-hub.com/index.php?sho...findpost&p=6693

voilà j'espère que ça t'aide.

[lapîn]

merci beaucoup, je vais réfléchir !

a+

[genmin]

pour ce qui est du fonctionnement du menu sous opéra c'est bizard car j'utilise le meme pour ma nouvelle page d'accueil de mon site et ca fonctionne très bien

tu pourra voir le résultat ici