Problème CSS / z-index

[nicaud]

Bonsoir à toutes et tous !

Voilà mon problème, et j'espère que vous allez m'aider

J'ai un tableau principal qui englobe tout mon site :

.tabGeneral{
	position:absolute;
	width:956px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
	z-index:1;
}

et je souhaite superposer un petit tableau par dessus, qui se positionnerait par rapport au bord du tableau principal :

.tabRech{
	position:absolute;
	overflow: auto;
	z-index:2;
	background-color:#FF0000;
	width:300px;
	left: 350px;
	top: 0px;
}

mais cela ne marche pas, malgré plusieurs essais, les valeur left et top prennent en compte le bord du navigateur et non du tableau.

Comment faire ?

[ghost]

Bonjour,

Normal tu es en position absolute ...

essaye le premier et 2em en relative tout devrait aller mieux

[nicaud]

et non ... je vien d'essayer, et en mettant les dux tableau en position relative, c'est encore le bord du navigateur qui est pris en compte

[ghost]

Excuse, je comprends pas tableau, c'est tableau <table></table>

ou <div></div>?

[nicaud]

c'est bien un tableau <table>

[ghost]

Ah ok!

C'est plus le même sport !!

Je ne suis pas un grand adepte des tableaux mais, il faut que modifie tes <tr> <td> pour "inclure" ton table 2 dans le table 1 ou carrément inclure ton table 2 dans ton table 1 :

<table1">

<tr>

<td></td>

<td>

<table >

<tr>

<td></td>

</tr>

</table2>

</td>

<td></td>

</tr>

<tr>

<td>

</table>

Mais en css on fait ça beaucoup plus lisible et sans table

Modifié 4 Juillet 2006 par ghost

[Charlie]

J'ai un tableau principal qui englobe tout mon site :

CODE.tabGeneral{

position:absolute;

width:956px;

margin-left: auto;

margin-right: auto;

padding: 0 0 0 0;

z-index:1;

}

En disant ca j'ai plutot l'impression qu'il parlait de blocs et non de tableaux ...

[ghost]

_AT_La Gerance

Ben moi aussi !! ça ressemble plus à des blocs ...

[nicaud]

... heu ... mais peut être que mes tableaux sont à considérer comme des bloc alors

J'ai deux tableau (<table>) mais qui ne sont absolument pas l'un dans l'autre et je ne le souhaite pas. J'aimerais que le deuxième tableau se place suivant le premre... donc peut être qu'il faut parler de "bloc" donc ... ?!

[ghost]

Tu n'as pas un lien pour que l'on visualise mieux car là c'est plus trop évident à mon grand âge ...

[nicaud]

malheureusement je boss en local actuellement

mais est-ce qu'on peut prendre comme bord de référence celui d'un tableau (ou bloc) pour positionner un autre bloc ?

[ghost]

<table> est bien du type bloc

http://htmlhelp.com/reference/html40/block.html

mais je t'avourais que je n'ai jamais pratiqué de positionner directement un tableau en css ( Il faudra que j'essaye, je ne l'ai jamais vu je crois, si quelqu'un à une info !! )par contre en l'incluant dans un div du style :

<div id="...">

<table></table>

<div id='***'>

<table></table>

</div>

</div>

Ca fonctionne

Modifié 4 Juillet 2006 par ghost

[nicaud]

merci ghost pour ton aide

Mais ce que tu m'as indiqué juste au dessus ne marche pas non plus

voilà le code de mon tableau (c'est pas long )

<link href="../css/inandoutGeneral.css" rel="stylesheet" type="text/css" />
<div id="posGeneral">
<table border="0" cellpadding="0" cellspacing="0" class="tabGeneral">
  <tr>
	<td class="cellHeader"><table width="100%" border="0" cellpadding="0" cellspacing="0">
	  <tr>
		<td width="212"><a href="http://www.inandout.fr/"><img src="../images/titre.gif" width="212" height="71" border="0" /></a></td>
		<td> </td>
	  </tr>
	</table></td>
  </tr>
  <tr>
	<td class="cellInter"> </td>
  </tr>
  <tr>
	<td class="cellCorp"> </td>
  </tr>
</table>
<div id="posRech">
<table class="tabRech">
  <tr>
	<td> </td>
  </tr>
</table>
</div>
</div>

et voilà le code CSS :

.tabGeneral{
	width:956px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
}
.tabRech{
	background-color:#FF0000;
	width: 544px;
	height: 93px;
	background-image: url(../images/fond_rech.gif);
}

.posGeneral{
	position:relative;
	z-index:1;
}
.posRech{
	position:relative;
	z-index:2;
	left: 10px;
}

Le plus importantant c'est "posGeneral" et "posRech" je pense car les deux autre c'est pour donner la taille et le fond des tableaux.

pour expliquer vite fait, ce tableau tabRech est un formulaire de recherhe que je souhaite mettre en haut par dessus deux tableau avec deux fond différent pour donner un effet

[ghost]

Salut essaye un truc approchant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head> 

   <link rel="stylesheet" media="screen" type="text/css" title="" href="style.css" />
  </head>
<div id="posGeneral">
<table border="1" cellpadding="0" width ="100%" >
  <tr>
	<td> General</td>
	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>

	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>
	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>

	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>
	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>
	  <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>
	</table>

<div id="posRech">
<table>
  <tr>
	<td>Recherche </td>
  </tr>
	   <tr>
		<td>bla blabla bla</td>
		<td>bla blabla bla </td>
	  </tr>
</table>
</div>
</div>

et

#posGeneral{
	position: relative;
	width:auto;
	margin-left: auto;
	margin-right: auto;
	padding: 0 0 0 0;
   border: 3px solid #feff15;
	height: auto;
   background: #00b012;
}
#posRech{
	position: absolute;	
	top: 20px;
	left: 50px;
	border: 3px solid #000;
	width: 544px;
	height: auto;
   background: #fdff23;
}

Tu devrais y arriver ... en modifiant les paramètres du css mais le principe est bon

Ton code originel n'est pas bon, tu apelles des id depuis ton html et tu as des class dans ton css.

Bon courage

[nicaud]

Merci vraiment beaucoup ghost !!!

oui en effet ton code fonctionne, je vais donc pourvoir enfin avancer !!!

merci encore !!