z-index:10 et tableau

Version imprimable

Bonjour,

Je voudrais que la DIV "divid" soit placee au dessus du tableau mais c'est toujours le tableau que se trouve sous la Div.

Existe-t-il une methode pour faire cela?

Merci de votre aide
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div id=divid style="z-index:10;background-color:#FFA500;" ><div id=divid1 style="z-index:1;" > <table width="1000" border="1" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#993366"> </td> </tr> <tr> <td bgcolor="#993366"> </td> </tr> </table> </div> </div>

20/02/2012, 00h05
Rachel
bonsoir :)
pour que tes éléments utilisent z-index, ils doivent être positionnés.
par exemple
Code:

1 2 #madiv{position:absolute;z-index:2;} #madiv1{position:absolute;z-index:1;}

Bonjour,

Merci rotrevrep pour ta reponse mais malheureusement cela ne fonctionne toujours pas. La couleur des td se trouve toujours sur le dessus.:(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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>Document sans nom</title>
</head>
 
<body>
<div id=divid style="position:absolute;background-color:#FFA500;z-index:100;left: 2px; top: 2px; width: 100px; height: 50px;" >
<div id=divid1 style="position:absolute; z-index:1; left: 2px; top: 2px; width: 100px; height: 50px;" >
<table width="1000" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td bgcolor="#993366">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#993366">&nbsp;</td>
  </tr>
 
</table>
</div>
</div>
</body>
</html>

Une idee du pourquoi ca ne fonctionne pas?

Bonjour,

Code:

1
2
3
4
5
6
<style type="text/css">
#divenglobant { position:relative; overflow;hidden; }
#divid { position:absolute; background-color:#FFA500; z-index:100; left:0; top:0; width:100px; height:50px; }
#divid1 { position:relative; border:0; padding:0; margin:0; width:100px; height:50px; }
#divid1 td { background-color:#993366; }
</style>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="divenglobant">
 
<div id="divid"></div>
 
<table id="divid1">
  <tr>
    <td>&nbsp;qsdf 1</td>
  </tr>
  <tr>
    <td>&nbsp;etyu 2</td>
  </tr>
</table>

20/02/2012, 18h39
NoSmoking

Bonjour,
tu as un problème de construction de ton document, la DIV id="divid1" est contenu dans la DIV id="divid".

Suis l'exemple que t'a mis jreaux62.

Conseils (si je peux me permettre) :
- vires le style inline(dans les balises)
- mets les valeurs des attributs entre guillemets
... cela ne sera que meilleur ;)
20/02/2012, 20h42
Invité

J'approuve NoSmoking :ccool:
qui a exprimé tout haut ce que j'avais pensé tout bas ;)
21/02/2012, 04h23
voyageurdumonde

Excellent, ca fonctionne a merveille. Merci