Sujet Précédent Sujet Suivant

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

Résolu/Fermé
synopsisconcept Messages postés 50 Date d'inscription jeudi 19 août 2010 Statut Membre Dernière intervention 26 octobre 2010 - 18 oct. 2010 à 21:07
synopsisconcept Messages postés 50 Date d'inscription jeudi 19 août 2010 Statut Membre Dernière intervention 26 octobre 2010 - 26 oct. 2010 à 14:42
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>


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=https://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=https://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=https://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=https://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   #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, toujours le souci avec les menus 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/

Merci par avance
A voir également:

5 réponses

Réponse 1 / 5
duweb Messages postés 353 Date d'inscription dimanche 30 mai 2010 Statut Membre Dernière intervention 6 mars 2014 72
26 oct. 2010 à 14:12
et pourquoi z-index ne serait pas applicable ? c'est du css.

d'ailleurs j'ai essayé et ca fonctionne : 

#nav li { 
    margin: 0 5px; 
    padding: 0 0 8px; 
    float: left; 
    position: relative; 
    list-style: none; 
    
    z-index:999;

}
1
Réponse 2 / 5
synopsisconcept Messages postés 50 Date d'inscription jeudi 19 août 2010 Statut Membre Dernière intervention 26 octobre 2010 3
20 oct. 2010 à 15:40
UP, personne pour me donner un coup de patte ? Je suis bloqué par ce truc... :)
Merci
0
Réponse 3 / 5
synopsisconcept Messages postés 50 Date d'inscription jeudi 19 août 2010 Statut Membre Dernière intervention 26 octobre 2010 3
26 oct. 2010 à 14:02
Je n'ai toujours pas trouvé de solution, une piste de quelqu'un peut-être ?
0
Réponse 4 / 5
jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
26 oct. 2010 à 14:13
Kikou..

met d abord ton <div id="cadre_page"></div> et ensuite ton menu car quand tu déroule le menu, il s affiche, mais derriere le cadre car dans le code (le pc est bete et méchant) tu affiche d abord le menu et apres le cadre.. donc par dessus ;)
0
jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
26 oct. 2010 à 14:18
et je mettrais ton menu dans un <div></div> ... et tout en position absolue !!

#divmenu{
position:absolue;
top:0px;
}

#cadre_page
{
position:absolue;
margin-left:auto;
margin-right:auto;
top:100px;
background:url('../img/cadre.jpg');
width:800px;
height:400px;
}

d ailleurs, ainsi tu peux vérifier mes dires de plus haut en laissant ton div cadre en bas et en mettant top: 200px; dans ton css ;)
0
jjsteing Messages postés 1670 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
Modifié par jjsteing le 26/10/2010 à 14:23
ce qui donnerais (avec le menu dessus le cadre) :

...
<body>
<div id="cadre_page"></div>

<div class="MonMenu">
<ul id="nav">
...
</ul>
</div>
</body>
</html>

et

.MonMenu{
position:absolue;
}

#cadre_page
{
position:absolue;
margin-left:auto;
margin-right:auto;
top:100px;
background:url('../img/cadre.jpg');
width:800px;
height:400px;
}

quelque chose comme ca ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
synopsisconcept Messages postés 50 Date d'inscription jeudi 19 août 2010 Statut Membre Dernière intervention 26 octobre 2010 3
26 oct. 2010 à 14:42
Bonjour, et avant tout, merci pour vos posts, cela m'a fait prendre conscience que je suis un peu (et c'est un euphémisme...) tête en l'air !
Pour le z-index, d'abord, euh, en fait, je ne vois pas vraiment le changement avec ou sans. Oups !

Pour ce qui est de mettre les div, effectivement, cela règle franchement les choses. Quand on a le nez dedans... on voit rien.

En tout cas, c'est réglé ! Et de la meilleure façon qu'il soit :)

Merci duweb et à toi, jjsteing.

Bonne journée !
0

Discussions similaires

Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Combien de temps dure le sablier Snapchat ?
Snapeeejdvjz -
shashanouu -

7 réponses
Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses