[css] Problème de positionning et d'overflow

Dev
1

Je sens qu’avec cette question je vais recevoir plus de réponse me disant pourquoi je n’ai pas besoin de faire ce que je veux plutot que comment le faire, mais je la pose quand même.

j’ai une dans laquelle je veux positionner du contenu avec précision. d’ou l’utilisation de position:absolute.
le contenu, c’est une

contenant des données, des infos et un tas de trucs qui ne nous intéressent pas pour ce probleme précis, dont la taille des cellules est fixe (ou le sera dès que j’aurai réussi à faire comprendre à un navigateur que si je mets un min-width:#px; c’est pas pour faire joli. enfin si, c’est pour faire joli mais sur la page, pas juste dans le code) et par dessus laquelle je veux placer des infos.
par exemple, imaginez que j’ai une image à fonds transparent, représentant un cercle (mal) tracé au feutre rouge, censé symboliser le fait que quelqu’un ait entouré une case importante du tableau, en dépassant allègrement sur les cases adjacentes. comme sur un calendrier, par exemple, ou sur des petites annonces.
bref, je ne peux pas mettre l’image dans la case vu qu’elle est censée dépasser, donc je la place grace à mon positionnement en absolu. la conteneur étant également placée en absolu, le placement se fait bien par rapport à son bord et non pas au bord de la page, tout ça est très bien.

sauf que, si je mets ma div conteneur en overflow:auto parce que je veux des barres de scrolling dès que le contenu dépasse, rien ne va plus: tout le contenu positionné en absolu dépasse du conteneur, empechant d’utiliser les scrollbar pour peu qu’il soit placé juste au dessus, bref c’est pas la joie du tout.

en résumé, ce que je veux, c’est positionner du contenu dans une div avec la précision et le confort d’un positionnement absolu, tout en cachant ce qui dépasse. comme ça le ferait avec une iframe. sauf que je veux pas d’iframe.

sinon tant pis, je vais faire la brute et coder mon propre système de scroll en javascript.

2

Le nom de ce navigateur, ça commencerai par par internet pour se finir par explorer ? B)
Ca me semble extremement ambitieux comme truc, j’ai jamais vu quelque chose dans le genre… il est fort possible que le javascript avec un systeme de pseudo scrollbar via boutton soit le truc le plus susceptible de marcher, surtout sur plusieurs navigateurs. Bon courage!

3

Hmmmm. Embryon de solution:
z-index.
Tu fais tout comme t’as fait jusqu’à présent.
Soit en js, soit en taille fixe (je suppose que c’est un calendrier ou un truc comme ça) tu as les dimensions de ton tableau.
Tu positionnes en absolu un div dont la couleur de fond vaut celle de ta page avec un z-index supérieur à tes cercles rouges. C’est comme si tu mettais une bande de tipex autour de ton tableau pour cacher ce qui en déborde.
Ça, ça va cacher une partie de ton cercle (celle qui déborde). Si tu veux qu’il soit affiché quand même sans déborder lors d’un overflow tu dois jouer avec les marges intérieurs et extérieures de ton div et laisser suffisamment d’espace pour la partie de ton cercle qui déborde (et qui est toujours la même puisque c’est une image et des cellules à dimensions fixes) ; faut voir comment ça se passe au niveau du positionnement de tes scrollbars alors…oOoOoOOOOoooH mais suis-je con… il a été établi que les marges intérieurs et extérieures c’était trop caca et pas logique et que les bordures c’étaient des marges pareilles… dommage ça aurait pu servir ici… ah! mais oui ça peut, parce que le box-model a été implémenté quand même comme ça! (c’est un message subliminal qui ne concerne personne dans ce thread)

Sinon tu le fais en flash.

4

ça pourrait être un début de solution, mais mon tableau peut déborder beaucoup. genre faire 3 ou 4 fois la taille de l’ecran.

5

Une idée qui me passe par la tête.
J’ai pas l’occasion de tester mais peut être que ça te donne une piste.

L’idée est de “poser” tes cercles de feutre sur le tableau une fois que celui-ci est affiché. Le tout en javascript.

Une fois que ton tableau est crée, avec javascript tu peux calculer la position exacte de chaque cellules. Tu peux aussi récuperer de combien de pixel le div est “scrollé” ( piste : http://www.codeproject.com/useritems/smartnavwebctrls.asp ) ça te permet donc d’avoir la position exacte de ta cellule par rapport au container.

ensuite grâce à ces coordonnées, tu peux “poser” tes cercles au bon endroit sur le tableau en les créant à la volée.

Il faut répéter le même calcul à chaque fois qu’on scrolle dans la div (il y a un évènement qui se déclence il me semble)

Ensuite, tu peux couper, redimensionner, afficher / masquer, les cercles assez facilement.

Mmmh… J’espère avoir été clair, tiens nous au courant B)

6

Quel pessimisme! T’es déjà allé voir les applis google (maps, mail, reader, calendar) ??? On peut faire énormément de chose en javascript, ils en sont le meilleur exemple.

7

[quote=“the_webrunner, post:5, topic: 34666”]Une idée qui me passe par la tête.
J’ai pas l’occasion de tester mais peut être que ça te donne une piste.

L’idée est de “poser” tes cercles de feutre sur le tableau une fois que celui-ci est affiché. Le tout en javascript.

Une fois que ton tableau est crée, avec javascript tu peux calculer la position exacte de chaque cellules. Tu peux aussi récuperer de combien de pixel le div est “scrollé” ( piste : http://www.codeproject.com/useritems/smartnavwebctrls.asp ) ça te permet donc d’avoir la position exacte de ta cellule par rapport au container.

ensuite grâce à ces coordonnées, tu peux “poser” tes cercles au bon endroit sur le tableau en les créant à la volée.

Il faut répéter le même calcul à chaque fois qu’on scrolle dans la div (il y a un évènement qui se déclence il me semble)

Ensuite, tu peux couper, redimensionner, afficher / masquer, les cercles assez facilement.
Mmmh… J’espère avoir été clair, tiens nous au courant B)[/quote]

effectivement, je pense partir sur quelque chose comme ça, sans toutefois utiliser la détection de la scrollbar.

étant donné que tout ou presque est déjà généré en javascript au chargement de la page, je vais certainement opter pour la génération des éléments masqués au fur et a mesure du scroll, en gérant le scroll artifiellement en javascript en faisant du case par case (avec des pas de plusieurs cases). en utilisant de manière astucieuse la propriété css clip (à laquelle j’aurais du penser plus tot), je devrais pouvoir arriver à quelque chose de franchement pas dégueulasse.

8

Nous allons repousser les limites de les limites, nous ne laisserons pas faire par les frontières de la connaissance qui nous empêchent de passer les douanes! On va tellement rendre google jaloux qu’ils seront verts de jalousie!

Moins sérieusement: le problème en js et avec le positioning (c’est comme le brainmapping mais ça n’a rien à voir) c’est que tes élements sont très petits et donc ça va ‘sauter’ tout le temps.

A mort le pessimisme (et les jeudis après-midi de veille de rendez-vous angoissant).

Sinon tu peux p’tet filer un exemple qu’on puisse jouer @home avec?