rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Souci Z-index!!!

Posté par sonatures, le samedi 15 septembre 2007 à 17:33:36
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...
Configuration: Mac OS X
Firefox 2.0.0.6
Répondre à sonatures  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Dalida, le samedi 15 septembre 2007 à 22:39:31
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>'. 
<!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>
[...]

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
sonatures, le vendredi 21 septembre 2007 à 22:17:42
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.
   
Répondre à sonatures

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Dalida, le vendredi 21 septembre 2007 à 23:16:58
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' : 
<!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 !
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985
   
Répondre à Dalida
Posez votre question Répondre
Discussions pertinentes trouvées dans le forum
16/05 16h32Z-index gif4
08/09 16h31Probleme de z-index et margin sur firefox8
14/03 16h35Emule: 2500 Zips indésirables dans incoming2
10/03 13h48PDF z-index propriéter1
13/11 03h42Pb css : z-index et calques2
Plus de discussions sur « Z index »
Logiciels pertinents trouvés dans les téléchargements
Télécharger ZoneAlarm 7.0.483.000ZoneAlarm - ZoneAlarm est un pare-feu convivial bloquant les pirates et autres menaces inconnues. Par ailleurs, ZoneAlarm : ...Catégorie: Firewall
Licence: Freeware/gratuit
Télécharger CPU-z 1.46CPU-z - CPU-Z est un logiciel gratuit collectant des informations sur les principaux éléments de l' ordinateur : ...Catégorie: Diagnostic
Licence: Freeware/gratuit
Télécharger ZipRepar 1.25ZipRepar - Qui n'est jamais tombé sur une archive zip corrompue. ZipRepar permet de réparer la plupart des archives Zip corrompues ou...Catégorie: Compression/Décompression
Licence: Freeware/gratuit
Télécharger Zinf 2.2.1Zinf - Zinf est un lecteur audio libre supportant les formats Mp3 , Wav et Ogg Vorbis . De plus il est capable de lire les CD...Catégorie: Lecteurs audio
Licence: Open Source
Plus de logiciels gratuits sur « Z index »