Souci Z-index!!!
sonatures
-
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Salut à tous,
Petit souci de z-index. Et oui, je n'arrive pas à afficher l'image (trame) qui apparait au survol du logo (david lista) devant l'image (photo). Sur Firefox cela se passe comme je le souhaite (est-ce dire devant) mais helas! Sur IE6 ou IE7 cette image trame s'affiche toujours derrière quoi que je fasse au niveau du z-index.
Voici la page en question www.davidlista.com
Un grand Merci pour votre aide...
Petit souci de z-index. Et oui, je n'arrive pas à afficher l'image (trame) qui apparait au survol du logo (david lista) devant l'image (photo). Sur Firefox cela se passe comme je le souhaite (est-ce dire devant) mais helas! Sur IE6 ou IE7 cette image trame s'affiche toujours derrière quoi que je fasse au niveau du z-index.
Voici la page en question www.davidlista.com
Un grand Merci pour votre aide...
A voir également:
- Souci Z-index!!!
- Code ascii de a à z - Guide
- Gpu z - Télécharger - Informations & Diagnostic
- Index téléphonique - Guide
- Cpu z - Télécharger - Informations & Diagnostic
- Telecharger index - Télécharger - Gestion de fichiers
3 réponses
salut,
ton style est mal codé.
la balise '<style>' doit être placée dans le '<head>' et la partie spécifique à IE doit être dans la balise '<style>'.
ton style est mal codé.
la balise '<style>' doit être placée dans le '<head>' et la partie spécifique à IE doit être dans la balise '<style>'.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>david lista</title>
<meta name="description" content="Welcome to www.davidlista.com, the official Web site of David Lista."/>
<link href="css/index000.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* common styling */
.menu { font-family: "Courier New", Courier, monospace; width:150px; height:188px; position:relative; margin:0; font-size:12px; margin:150px 0; z-index: 50;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:151px; height:20px; text-align:left; /*border:1px solid #fff; border-width:0px 0px 0 0;*/ line-height:19px; font-size:12px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#f00; background:#fff;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:151px; width:150px;}
.menu ul li:hover ul li a.hide {background:#f00; color:#000;}
.menu ul li:hover ul li:hover a.hide {color:#f00; width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#fff; color:#000; width:150px; text-align: right;}
.menu ul li:hover ul li a:hover {background:#fff; color:#f00;}
<!--[if lte IE 7]>
/* specific to IE browsers */
table {border-collapse:collapse; border:0; margin:0; padding:0;}
.menu {top:150px; z-index: 50;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover {color:#f00; background:#fff;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:151px; width:150px;}
.menu ul li a:hover ul li a {display:block; background:#fff; color:#000; width:150px;}
.menu ul li a:hover ul li a:hover {background:#fff; color:#f00;}
<![endif]-->
</style>
</head>
<body>
[...]
Salut Dalida,
Oui, c’est vrai ce que tu dis, mais, le style que tu vois dans le <body> est appelé grâce à du PHP (de cette façon je pense mieux entretenir l’évolution du menu), il se trouve donc dans un fichier a part. Et ce style ne gère que le menu commun à toutes les pages. Dans le <head> j’ai attaché une feuille de style qui gère le reste de la page. Tu penses que cela peut vraiment en être la cause ? Car si je reviens a une forme html traditionnel, avec une simple feuille css attachée dans le <head> le problème persiste.
http://www.davidlista.com/public/index.html
Merci pour ta réponse.
Oui, c’est vrai ce que tu dis, mais, le style que tu vois dans le <body> est appelé grâce à du PHP (de cette façon je pense mieux entretenir l’évolution du menu), il se trouve donc dans un fichier a part. Et ce style ne gère que le menu commun à toutes les pages. Dans le <head> j’ai attaché une feuille de style qui gère le reste de la page. Tu penses que cela peut vraiment en être la cause ? Car si je reviens a une forme html traditionnel, avec une simple feuille css attachée dans le <head> le problème persiste.
http://www.davidlista.com/public/index.html
Merci pour ta réponse.
salut,
regarde le code que je t'ai collé !
j'ai repris toutes tes lignes de code, css embarquée y compris !
je te donnais des conseils pour obtenir un code valide, c'est la première chose à faire avant de chercher des erreurs.
tu peux laisser des règles de style dans une balise '<script>' dans le '<head>', ce n'est pas ça le problème mais c'est qu'il vaut mieux vaut le faire proprement !
je vois que tu as refait toute la page, je t'en félicite !
cela n'a rien à voir avec mes conseils mais cela n'a pas été inutile, ta page est désormais valide !
un petit détail au passage, tu étais en XHTML 1.1 et es passé en XHTML 1.0 c'est beaucoup mieux.
mais je te conseillerai d'aller plus loin, en changeant le 'Transitionnal' en 'Strict' :
sur ton menu, il n'y a pas de sous-menu à chaque item, il vaudrait mieux pour l'utilisateur que la distinction puisse être faite visuellement car tu as un design très dépouillé et cela pourrait améliorer le repérage pour l'utilisateur.
bon, maintenant que j'ai pourri le thread avec mes préoccupations personnelles on va pouvoir passer à ton problème !
si c'est IE qui ne veut pas se mettre au pli et étant donné que le code à été pris ailleurs et qu'il semble avoir été conçu pour tourner partout le premier essai que je ferais c'est d'ajouter du poids à toutes les règles du menu.
pour cela il suffit de définir des sélecteurs beaucoup plus précis :
devient :
et il faut faire de même pour toutes les autres règles.
cela doit nous faire une priorité de 10 pour le premier et de 111 pour le deuxième, ça qui peut parfois largement suffire à remettre les plans dans l'ordre.
dis moi quand tu auras fais l'essai, si cela ne fonctionne pas je me ferai une version locale pour bidouiller.
bon courage !
regarde le code que je t'ai collé !
j'ai repris toutes tes lignes de code, css embarquée y compris !
je te donnais des conseils pour obtenir un code valide, c'est la première chose à faire avant de chercher des erreurs.
tu peux laisser des règles de style dans une balise '<script>' dans le '<head>', ce n'est pas ça le problème mais c'est qu'il vaut mieux vaut le faire proprement !
je vois que tu as refait toute la page, je t'en félicite !
cela n'a rien à voir avec mes conseils mais cela n'a pas été inutile, ta page est désormais valide !
un petit détail au passage, tu étais en XHTML 1.1 et es passé en XHTML 1.0 c'est beaucoup mieux.
mais je te conseillerai d'aller plus loin, en changeant le 'Transitionnal' en 'Strict' :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
sur ton menu, il n'y a pas de sous-menu à chaque item, il vaudrait mieux pour l'utilisateur que la distinction puisse être faite visuellement car tu as un design très dépouillé et cela pourrait améliorer le repérage pour l'utilisateur.
bon, maintenant que j'ai pourri le thread avec mes préoccupations personnelles on va pouvoir passer à ton problème !
si c'est IE qui ne veut pas se mettre au pli et étant donné que le code à été pris ailleurs et qu'il semble avoir été conçu pour tourner partout le premier essai que je ferais c'est d'ajouter du poids à toutes les règles du menu.
pour cela il suffit de définir des sélecteurs beaucoup plus précis :
.menu {
position:absolute;
top: 155px;
left: 0px;
height:510px;
width:370px;
font-size:80%;
/*border: solid 1px #666666;*/
}
devient :
div#conteneur div.menu {
position:absolute;
top: 155px;
left: 0px;
height:510px;
width:370px;
font-size:80%;
/*border: solid 1px #666666;*/
}
et il faut faire de même pour toutes les autres règles.
cela doit nous faire une priorité de 10 pour le premier et de 111 pour le deuxième, ça qui peut parfois largement suffire à remettre les plans dans l'ordre.
dis moi quand tu auras fais l'essai, si cela ne fonctionne pas je me ferai une version locale pour bidouiller.
bon courage !
