28172 sujets

CSS et mise en forme, CSS3

Problème de z-index avec Opera.

Bonjour,

Opera semble ne pas tenir compte du z-index:2 en position:relative que j'ai donné à ma série de boutons horizontals. Tout fonctionne sur IE et Firefox, les codes sont valides et j'ai le dernier update D'Opera...

Maintenant, si j'enlève l'image des 2 lignes blanche situé en z-index:1, les boutons deviennent accessibles avec Opera. L'ennui c'est que cette image doit rester sur la page.

J'ai tenté de donner d'autres valeurs aux z-index mais rien à faire, si l'image en z-index:1 est présente à ma page, Opera ne rendra pas les boutons accessibles.

Je ne sais pas trop comment rendre ces boutons accessibles tout en utilisant Opera.

voici la page en question: http://www.socam.net/rollover/

Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<link href="site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
  <div id="wrapper">
     <div id="lines"><img src="lines.png" width="589" height="600" border="0" alt=""/></div>
	<ul id="nav">
  	<li id="navbutton1"><a href="index.html" ><span>1</span></a></li>
 	<li id="navbutton2"><a href="index.html" ><span>2</span></a></li>
 	<li id="navbutton3"><a href="index.html" ><span>3</span></a></li>
  	<li id="navbutton4"><a href="index.html" ><span>4</span></a></li>
	<li id="navbutton5"><a href="index.html" ><span>5</span></a></li>
 	<li id="navbutton6"><a href="index.html" ><span>6</span></a></li>
  	<li id="navbutton7"><a href="index.html" ><span>7</span></a></li>
	</ul>				  
  </div>
</div>
</body>
</html>


CSS:
body , html {
overflow:hidden;
margin: 0;
height:100%;
background-color: #000000;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; }

#page {
height: 100%;
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
}

#lines{
height: 550px;
margin-top: 10px;
text-align:right;
position:relative; 
z-index: 1;
}

#nav { background:url("thumbs.gif") no-repeat; width:360px; height:47px; margin-top:-414px ; margin-right:-16px ; float: right; position:relative; z-index: 2; }
#nav li, #nav a { height:47px; display:block; }
#nav li { float:left; list-style:none; display:inline; }
#nav span { display: none; }

#navbutton1 { width: 47px; }
#navbutton2 { width: 47px; }
#navbutton3 { width: 47px; }
#navbutton4 { width: 47px; }
#navbutton5 { width: 47px; }
#navbutton6 { width: 46px; }
#navbutton7 { width: 47px; }

#navbutton1 a:hover { background:url("thumbs.gif") 0px -47px no-repeat; }
#navbutton2 a:hover { background:url("thumbs.gif") -47px -47px no-repeat; }
#navbutton3 a:hover { background:url("thumbs.gif") -94px -47px no-repeat; }
#navbutton4 a:hover { background:url("thumbs.gif") -141px -47px no-repeat; }
#navbutton5 a:hover { background:url("thumbs.gif") -188px -47px no-repeat; }
#navbutton6 a:hover { background:url("thumbs.gif") -235px -47px no-repeat; }
#navbutton7 a:hover { background:url("thumbs.gif") -281px -47px no-repeat; }


Des idées? Des explications de sages? Smiley lol
Modifié par Alec Effeil (18 May 2009 - 04:32)
Salut,

au-delà de la question du z-index l'image n'étant que décorative n'a rien à faire dans le code html et devrait être placée dans le code css. Smiley cligne
Salut et merci Heyoan,

En ajoutant l'image en background à la div par le css, je rencontrais un autre problème qui était celui des boutons qui disparaissaient lorsque la fenêtre browser était en plein écran sur une résolution plus haute que 800 x 600. En fouillant un peu j'ai vu qu'il fallait simplement ajouter une div zombie entre l'image et le menu du genre #clear {clear: both; margin: 0px}. En fesant ça, tout fonctionne comme ça devrait...

Cependant, ce que je n'avais pas mentionné c'est qu'au lieu d'une image j'avais l'intention de placer un swf en z-index:1 sous le menu, qui lui est en z-index:2. L'ennui c'est que swf ou image, le problème reste le même sous Opera contrairement à IE et Firefox qui donne accès aux boutons. Mais bon, je vais peut-être devoir trouver une toute autre façon de monter tout ça... Smiley confus
Sujet clos
Aller à