Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Problème de absolute/relative sur balise DIV

Problème de absolute/relative sur balise DIV

9 réponses
Avatar
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 ! ;) !
Signaler un problème avec ce contenu

9 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
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'>
Avatar
SAM
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 : <http://cjoint.com/?cbpuuGXqAs>

<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
Avatar
SAM
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
Avatar
SAM
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
Avatar
Marc MENDEZ
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" <om+ a écrit dans le message de news:

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'>
Avatar
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.

"Olivier Miakinen" <om+ a écrit dans le message de news:
[citation intégrale]



<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>, merci.
Avatar
Marc MENDEZ
"Olivier Miakinen" <om+ a écrit dans le message de news:

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" <om+ a écrit dans le message de
news:
[citation intégrale]



<http://www.usenet-fr.net/fur/usenet/repondre-sur-usenet.html>, merci.



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.
Avatar
Marc MENDEZ
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 !
Avatar
Olivier Miakinen
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.