z-index:10 et tableau

**voyageurdumonde** · 19/02/2012, 00h47

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#993366">&nbsp;</td>
  </tr>
 
</table>
</div>
</div>

**Rachel** · 20/02/2012, 00h05

bonsoir

pour que tes éléments utilisent z-index, ils doivent être positionnés.
par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**voyageurdumonde** · 20/02/2012, 03h54

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

Invité · 20/02/2012, 08h21

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 20/02/2012, 18h39

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

Invité · 20/02/2012, 20h42

J'approuve NoSmoking

qui a exprimé tout haut ce que j'avais pensé tout bas

**voyageurdumonde** · 21/02/2012, 04h23

Excellent, ca fonctionne a merveille. Merci

z-index:10 et tableau

Tableau en CSS

Discussions similaires

Partager

Partager