28173 sujets

CSS et mise en forme, CSS3

Affichage de calque dans un autre en overflow

Bonjour tout le monde,

Je me permet de poster ici ma question après avoir écumé quelques forums sans réponse (mon problème doit soit laisser dubitatif, soit être inintéressant). Ce n'est pas la première fois que je passe par ce site très interessant pour trouver des solutions à mes soucis de développement.

En fait j'ai un calque "main" avec le style css overflow : auto.
Ce qui fait que comme, la theorie l'indique, j'ai des ascenseurs qui apparaissent lorsque le contenu de la balise dépasse sa taille. Ca c'est bon.

Ensuite j'ai utilisé le script css tooltip pour afficher des "popup" overscrollés (du genre des alt et title pour les balises a). Tres pratique quand on a des images à y mettre, en plus du texte. ça se présente sous cette forme :

<span class="tooltip">mon texte<span></span><div>mon commentaire avec image</div></span>


et le css (pour faire simple):

.tooltip div{ display :hidden;}
.tooltip:hover div { display:block; position:absolute; z-index:500; }


marche nickel aussi.

Mais qu'est ce qui ne marche pas allez vous me demander?
Et bien je me sert de la classe tooltip pour plusieurs partie de mon contenu. Souvent pour illustrer et expliquer (sans passer par des ouvertures de fenetres style popup). Et quand je suis un peu trop pres des bords de mon calque main... et bien le z-index se laisse bouffer par le overflow, qui devient prioritaire. Résultat le "popup" s'affiche mais apparaissent aussi des ascenseurs, qu'il faut scroller pour voir le contenu de la popup. Pas tres pratique quand c'est en bas à droite ou il faut alors scroller verticalement et horizontalement. l'horreur.

Je voudrais simplement (c'est peut etre vite dit là) que mes fenetres div tooltipées s'affichent par dessus le calque main, et donc "désactiver" temporairement le overflow, ou le rendre moins prioritaire que le z-index dans le cas ou il est indiqué.

Autre solution envisagée : sortir les div "popup" de la div main, mais je doit laisser tomber le script css et passer alors en js, provoquant les migraines que j'ai déja eu en essayant de placer la div sur mon écran quelque soit le navigateur, sous le texte survolé. Smiley bawling

merci beaucoup de votre compréhension.
Modifié par vovor (12 Nov 2007 - 17:15)
34 lectures et 0 réponses.
Je me permet de remonter quand meme le sujet, mais sans trop y croire. Je vais essayer de trouver une autre alternative.

Merci tout de meme d'avoir lu ma question.
en fait je me rend compte que dans le cas d'un calque contenu dans un autre, lui meme en overflow hidden, scroll, ou auto, le z-index ne sert à rien.

exemple : 

<head>
<style>
<!--
#Layer1 {
	position:absolute;
	z-index:1;
	overflow:hidden;
}

#Layer2 {
	position: absolute;
	z-index:2;
}
-->
</style>
</head>

<body>
<div id="main">
          <div id="contenu">mon calque qui doit dépasser</div>
</div>


il faudrait que dans le cas de z-index supérieur, le overflow ne s'applique pas. Y'a moyen de contacter W3C? Smiley lol Smiley langue
Salut à toi vovor,

j'ai lu avec attention ton problème, malheureusement je suis dans le même cas de figure que toi. J'ai également parcouru quelques forums sans réponses Smiley bawling .

Alors si toutefois tu as trouvé la solution, je serais ravi que tu la fasse partagée (idem pour ma part si je trouve bien sur)

Sinon on n'a qu'a monter une assoc' et on va revendiquer au W3C Smiley langue
J'ai quasiment le même problème :

http://img231.imageshack.us/img231/2803/problemeze9.png

On constate que :

- Internet Explorer 7 considère le absolute à l'origine et à l'interieur de l'overflow (c'est pas censé être le document html ?)
- Firefox 2.0.0.11 considère que le absolute passe au dessus d'un contenu Flash uniquement s'il est dans le même overflow

En gros je veux faire que le absolute en vert passe au dessus de tout, j'ai essayé le z-index mais il est inopérant à l'interieur d'un overflow comme montré sur ce topic.
Modifié par Robi (01 Jan 2008 - 18:43)
J'ai trouvé une solution mais j'ai du helas tricher. En l'occurence ma triche s'appelle javascript. J'ai du mettre ma balise <div> en dehors de celle qui contient le overflow:auto (ou hidden), et de la faire apparaitre en document.GetElementById('id_du_layer').visible = true.
Et dans mon cas il s'agissait de tooltip. J'avais besoin qu'il s'affiche à coté du texte survolé donc j'ai trouvé sur ce meme forum un script qui a parfaitement fonctionné (meme si j'ai du ruser pour que son emplacement soit a peu pres identique sur IE que sur FF).

Mais c'est un bug qu'il faudrait effectivement remonter au W3C (si ça n'a pas dejà été fait), car ce n'est pas normal que le style overflow prenne le pas sur le style z-index dans l'ordre des priorités.
Bonjour,

Cela n'a rien d'un bug : c'est le comportement normal d'un conteneur doté d'un overflow auto, scroll ou hidden. Il n'y a pas d'interaction en CSS entre l'empilement (z-index) et l'overflow.
tu sais j'avais dit qu'il y avait un réponse ici meme :
http://forum.alsacreations.com/topic-5-4154-1.html

le script de jmel est tres bon. Court, facile à comprendre et facile à adapter.

mais c'est du js, comme je disais.

Laurent, il y n'a peut etre pas d'interraction directe et voulue entre les deux style mais du fait qu'il s'agit de deux style d'affichage, il y a un. Ce serait plus normal que lorsque tu met un layer avec un z-index plus grand dans un autre, celui ci se mette en avant. Rien que pour tous les tooltip en css qu'il existe, et qu'on ne peut utiliser dans les layer à overflow hidden ou auto. C'est peut etre pas un bug, mais la norme devrait etre changée.
Sujet clos
Aller à