11540 sujets

JavaScript, DOM et API Web HTML5

Menu tronqué sur le reste de la page...

Bonjour,
J'ai regardé dans le forum, mais la réponse apportée par un internaute n'est pas applicable dans mon cas (je n'ai pas de z-index)...

Voici les deux morceaux de code :
Coté html :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>page de test</title>
<link href="css/style.css" tppabs="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="nav">
    <li class="current"><a href="javascript:if(confirm('#'" tppabs="#">Accueil</a></li>
    
    <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Menu 1</a>
        <ul>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 1"</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 2</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 3</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 4</a></li>
        </ul>
    </li>
    <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Menu 2</a>
        <ul>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 1"</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 2</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 3</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 4</a></li>
        </ul>
    </li>
        <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Menu 3</a>
        <ul>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 1"</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 2</a></li>
        </ul>
    </li>
    <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Menu 4</a>
        <ul>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 1"</a></li>
            <li><a href="javascript:if(confirm('#'))window.location='#'" tppabs="#">Sous-menu 2</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 5</a></li>
</ul>
<div id="cadre_page"></div>
</body>
</html>


et coté css :


body {
    font: normal .8em/1.5em Arial, Helvetica, sans-serif;
    background: #ebebeb;
    width: 1000px;
    margin: 150px auto;
    color: #666;
}

a {
    color: #333;
    outline: none;
}
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url("../img/gradient.png"/*tpa=http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png*/) repeat-x 0 -110px;
    line-height: 100%;

    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}


/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding:  8px 20px;
    margin: 0;

    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url("../img/gradient.png"/*tpa=http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png*/) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;

    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);

    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
#nav ul a:hover {
    background: #be0700 url("../img/gradient.png"/*tpa=http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png*/) repeat-x 0 -100px !important;
    color: #fff !important;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;

    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

/* level 2 list */
#nav ul {
    display: none;

    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url("../img/gradient.png"/*tpa=http://www.webdesignerwall.com/demo/css3-dropdown-menu/img/gradient.png*/) repeat-x 0 0;
    border: solid 1px #b4b4b4;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#nav {
    display: inline-block;
} 
html[xmlns] #nav {
    display: block;
}
 
* html #nav {
    height: 1%;
}
#cadre_page
{
position:relative;
margin-left:auto;
margin-right:auto;
top:0px;
background:url('../img/cadre.jpg');
width:800px;
height:400px;

}


Quand on passe sur le menu sans avoir mis l'image (le carré blanc doit me servir de fond de page), pas de soucis. Mais dès que j'insère ce..... de cadre, ça plante.

Une piste pour m'aiguiller ? Ca plante aussi en pur jquery. Pas moyen de passer par-dessus ce problème.

Merci pour votre aide.

Pour info, j'ai mis en ligne l'index : http://www.synopsis-prod.com/help/

Smiley eek
Bonjour,

C'est bien un problème de z-index.

Le menu (ul#nav) est en position:static (par défaut).
Le bloc #cadre_page est en position:relative.
Ces deux paramètres, même sans utiliser z-index, c'est tout ce qu'il faut pour que #cadre_page soit au dessus de #nav dans la pile. Donc les sous-menus qui appartiennent à #nav passent en dessous.

Solutions:
- Soit supprimer le position:relative de #cadre_page.
- Soit positionner #nav en relatif, et utiliser un z-index à la fois sur #nav et sur #cadre_page.

PS: je déplace dans le salon CSS, vu que le problème est sans rapport avec JavaScript.
Modifié par Florent V. (26 Oct 2010 - 18:23)
Effectivement, je viens de tester, et ca tourne. J'ai également mis le menu dans un div, egalement, et ca passe, forcément mieux ! Viré le Position, aussi.

Merci pour cet éclaircissement, et ce conseil, (je n'ai pas vraiment saisi a quoi sert le z-index). Mais ca, c'est parce que je ne suis pas très rapide en compéhension.

Merci en tout cas, ca m'a vraiment dépanné, je peux avancer a vitesse grand V maintenant !
Sujet clos
Aller à