Problème de absolute/relative sur balise DIV

Le
Marc MENDEZ
Bonjour,

Voila un bout de code "édulcoré" pour illustrer mon problème. Dans son
contexte, le tableau est bien plus grand et nécessite des ascenseurs pour le
parcourir.

<table border='1'>
<tr>
<td align='left'>
<a href='#'
onclick="document.getElementById('histo_10').style.display=''">Detail</a>
<div id='histo_10'
style='overflow:auto;width:100;position:absolute;display:
none;z-index:200;background:#EAEAEA;border:2px solid black'>
Ceci est le detail
</div>
</td>
</tr>
<tr>
<td align='left'>
Ceci est une autre ligne
</td>
</tr>
</table>

En cliquant sur "Détail", la popup apparait, mais le tableau se "décale" (la
pop up ne passe pas par dessus le tableau et encore moins sur la ligne "Ceci
est une autre ligne")

Je souhaiterai que la popup (id histo_10) passe par dessus le dit tableau,
mais qu'elle reste "attachée" à la cellule dans laquelle elle est déclarée.
Ainsi, lorsqu'on se déplace avec les ascenseurs dans le tableau, la pop up
suit le tableau.

J'ai beau jouer avec les z-index et autres trucs du genre, rien je
sèche..

Merci de m'arroser de vos solutions ! ;) !
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #22083001
Le 01/02/2008 13:41, Marc MENDEZ a écrit :

[...]
<td align='left'>
[...]
<div id='histo_10'
style='overflow:auto;width:100;position:absolute;display:
none;z-index:200;background:#EAEAEA;border:2px solid black'>
Ceci est le detail
</div>
</td>
[...]

J'ai beau jouer avec les z-index et autres trucs du genre, rien... je
sèche.....



As-tu essayé ma proposition ?

Puisque tu mets les styles CSS directement dans le HTML, essaye ceci :
<td align='left' style='position:relative'>

Ou, pour être tout-à-fait complet :
<td align='left'
style='position:relative;top:0;bottom:0;left:0;right:0'>
SAM
Le #22082991
Marc MENDEZ a écrit :

J'ai beau jouer avec les z-index et autres trucs du genre, rien... je
sèche.....



sauf peut-être avec IE, on n'a que très peu (sinon jamais) besoin de
jouer avec les z-indexes


Merci de m'arroser de vos solutions ! ;) !



Démo ici :
<td>
<div style="position:relative">
<a href="#" onclick="return detail('histo_1')detail</a>
<span style="display:none;position:absolute;top:5px" id="histo_1">
balabla<br>
babla<br>
blabla ! ouf ! quand même !
</span>
</div>
</td>

Tu y étais presque ...

--
sm
SAM
Le #22082981
Olivier Miakinen a écrit :
Le 01/02/2008 13:41, Marc MENDEZ a écrit :
[...]
<td align='left'>
[...]
<div id='histo_10'
style='overflow:auto;width:100;position:absolute;display:
none;z-index:200;background:#EAEAEA;border:2px solid black'>
Ceci est le detail
</div>
</td>
[...]

J'ai beau jouer avec les z-index et autres trucs du genre, rien... je
sèche.....



As-tu essayé ma proposition ?

Puisque tu mets les styles CSS directement dans le HTML, essaye ceci :
<td align='left' style='position:relative'>

Ou, pour être tout-à-fait complet :
<td align='left'
style='position:relative;top:0;bottom:0;left:0;right:0'>




Le "truc" du relative sur le TD n'a pas fonctionné chez moi.

Je pense donc qu'il faut un conteneur relatif dans chaque td qui aura un
"détail" en absolute

--
sm
SAM
Le #22082971
SAM a écrit :

<td>
<div style="position:relative">



<a href="#" onclick="return detail('histo_1');">detail</a>

<span style="display:none;position:absolute;top:5px" id="histo_1">
balabla<br>
babla<br>
blabla ! ouf ! quand même !
</span>
</div>
</td>




--
sm
Marc MENDEZ
Le #22082961
Oui, j'ai essayé, et comme cela ne marchait pas et conformément à la
remarque qui avait été faite sur f.c.l.j si ça ne marchait pas, je suis
passé sur ce forum :)

"Olivier Miakinen"
Le 01/02/2008 13:41, Marc MENDEZ a écrit :

[...]
<td align='left'>
[...]
<div id='histo_10'
style='overflow:auto;width:100;position:absolute;display:
none;z-index:200;background:#EAEAEA;border:2px solid black'>
Ceci est le detail
</div>
</td>
[...]

J'ai beau jouer avec les z-index et autres trucs du genre, rien... je
sèche.....



As-tu essayé ma proposition ?

Puisque tu mets les styles CSS directement dans le HTML, essaye ceci :
<td align='left' style='position:relative'>

Ou, pour être tout-à-fait complet :
<td align='left'
style='position:relative;top:0;bottom:0;left:0;right:0'>
Olivier Miakinen
Le #22082951
Le 01/02/2008 16:07, Marc MENDEZ a écrit :
Oui, j'ai essayé, et comme cela ne marchait pas et conformément à la
remarque qui avait été faite sur f.c.l.j si ça ne marchait pas, je suis
passé sur ce forum :)



D'accord. Mais tu pouvais dire que tu avais essayé, auquel cas je
t'aurais proposé l'idée de SAM. Bon, il l'a fait, je n'ai donc pas
besoin d'en rajouter.

"Olivier Miakinen" [citation intégrale]



Marc MENDEZ
Le #22082941
"Olivier Miakinen"
Le 01/02/2008 16:07, Marc MENDEZ a écrit :
Oui, j'ai essayé, et comme cela ne marchait pas et conformément à la
remarque qui avait été faite sur f.c.l.j si ça ne marchait pas, je suis
passé sur ce forum :)



D'accord. Mais tu pouvais dire que tu avais essayé, auquel cas je
t'aurais proposé l'idée de SAM. Bon, il l'a fait, je n'ai donc pas
besoin d'en rajouter.



Je n'ai pas crossposté : j'ai commencé un nouveau fil sur ce groupe, donc,
je ne m'attendais pas à ce que tu participes à celui-ci. Je n'ai donc pas
non plus fait référence à ta solution postée dans l'autre groupe.
En même temps que j'ai posté sur ce f.c.i.w.a, j'ai creusé ta réponse (d'où
le fait de ne pas t'avoir répondu immédiatement que ça ne marchait pas).
Mais je me suis dis que si tu t'étais permis de répondre, c'est que tu
devais tout de même y connaitre qq chose. Cela méritait donc d'étudier un
peu plus ta réponse.


"Olivier Miakinen" news:
[citation intégrale]






Merci aussi, mais je connais ;) et je l'applique AUSSI :) J'espère que ma
réponse te fera comprendre pourquoi je n'ai pas répondu.

En attendant, merci de ta participation et de ton aide.
Marc MENDEZ
Le #22082931
Un seul mot : bravo !

Génial ! Je n'en demandais pas tant. Je m'attendais à devoir décortiquer la
réponse faite, à devoir la traduire, mais non : tout y est !

Un grand merci à vous 2 !
Olivier Miakinen
Le #22082921
Le 01/02/2008 16:39, Marc MENDEZ répondait à SAM :

Génial ! Je n'en demandais pas tant. Je m'attendais à devoir décortiquer la
réponse faite, à devoir la traduire, mais non : tout y est !



Ce qui est bien, quand c'est Stéphane qui répond, c'est que non
seulement il donne la solution, mais en plus il la teste et il
laisse un lien vers la page de tests. C'est un intervenant très
précieux.
Publicité
Poster une réponse
Anonyme