Re

Maintenant que grâce à Kustolovic je suis parvenu à centrer mon image, (voir http://www.alma-musica.net/tests/page1.html) qui se centre bien en tenant compte de la taille réelle de l'écran, l'étape suivante consiste à utiliser cette image centrée comme un arbre de Noël auquel accrocher des boules et des guirlandes, je veux dire les entrées de menu comme on le voit actuellement sur la page d'accueil du site http://www.alma-musica.net (ne me dites pas que c'est ringue, notre association a pu payer un designer une fois et très mal, on ne va pas changer le look!)

Pour cela, je vois mal comment le faire sans que ces fioritures soient des objets position:absolute, auquel cas il faut les mettre soit directement dans le body en "absolu de chez absolu", ou dans une div relative.

Comme la position des menus se fait par rapport au grand logo central, l'idéal serait d'avoir un conteneur "moulant", c'est à dire englobant exactement mon image, et de positionner les entrées de menu dans ce conteneur.
Si c'est faisable, c'est je jackpot car je n'aurais plus besoin du tout de les positionner en JS comme je le fais actuellement, tout serait fait par CSS, y compris l'apparition progressive des éléments grâce aux transitions CSS3.

Je me suis demandé si par hasard la balise <img> ne serait pas devenue englobante, un peu comme <input type="button"> a laissé la place à <button> qui, lui, peut contenir des éléments, mais ça n'a pas l'air d'être le cas.

Une idée avant que je me remette à coder en jQuery le calcul des positions par rapport aux bords de la page?
Modifié par PapyJP (05 Mar 2015 - 11:07)
gc-nomade a écrit :
Bonjour,
actuellement ce n'est pas possible, mais il y a une idée de ce genre dans les cartons du W3C
http://www.w3.org/TR/css-shapes/ (rechercher CSS Shapes pour plus de liens)

Merci de l'info, c'est bien ce que je craignais.

Compte tenu de mon âge et du temps qu'il faut au W3C pour finaliser un standard, plus le temps pour l'implémenter sous forme de webkit, plus le temps que Microsoft le mette dans IE et que les anciennes versions des navigateurs aient disparu, il est peu vraisemblable que ce soit utilisable de mon vivant.

Sauf astuce connue de l'un ou l'autre membre de cette docte communauté, je vais donc reprendre mes procédures de calcul Javascript et les adapter à jQuery pour faire plus moderne.
A noter que tout ce dont j'aurais besoin c'est de la possibilité de dire qu'une div est positionnée par rapport au point de départ d'une image à x% de sa hauteur et y% de sa largeur (c'est à dire le contraire de "background-image"), en d'autres termes une "map" REDIMENSSIONNABLE de l'image (c'est à dire en % et pas en pixels).

Peut être le mot "map" va-t-il déclencher une proposition?
Modifié par PapyJP (04 Mar 2015 - 19:27)
Modérateur
Re,

un contenu moulant autour de l'image? n'importe quel élément en display: inline-block fera l'affaire.
Ou une div dimensionnée à la taille de l'image tout simplement.

http://codepen.io/anon/pen/XJBYWR

p.s. :
PapyJP a écrit :
(ne me dites pas que c'est ringue, notre association a pu payer un designer une fois et très mal, on ne va pas changer le look!)

C'est ringue!
Modifié par kustolovic (04 Mar 2015 - 21:48)
kustolovic a écrit :
http://codepen.io/anon/pen/XJBYWR

Waouh!
Un peu tard pour que je puisse me plonger dans ton code, sauf si j'ai une insomnie, mais je vais retrouver ça demain comme un gosse qui trouve un cadeau dans ses souliers le matin de Noël!

a écrit :
C'est ringue!

Si tu savais à quoi j'ai échappé!...
Au moins le designer en question est jeune, c'est un copain d'enfance du chef de chœur, et par rapport aux standards du domaine c'est considéré comme plutôt pas mal. Sinon la norme c'est un truc qui annonce "notre prochain concert" pour juin 2013 et vante les mérites de celui de 2003 dans la gazette paroissiale de Trifouillis en Ardèche, le tout en gris clair sur gris foncé.

Si tu as du temps à perdre, jette un coup d'œil sur le site, tu verras qu'à part la page d'accueil et la biographie du chef, pages que personne ne lit plus d'une fois (à condition d'aller au bout!), il n'y a aucun doc de chez doc, tout simplement parce qu'on n'en a pas besoin, rien que des listes de répétions et de concerts, la liste des œuvres au programme, le trombinoscope, et des pointeurs vers des cartes, des fichiers de partitions, quelques enregistrements etc.

Mais j'arrête, je vais me faire virer du forum si je continue...
Modifié par PapyJP (04 Mar 2015 - 22:47)
Merci encore Kusto, tu mérites la médaille de l'aide aux personnes âgées!

Comme je l'ai dit hier soir, je me suis précipité ce matin pour ouvrir le paquet.
C'est â peu près (tout est dans "l'à peu près") ce que j'avais essayé de faire hier, mais mon conteneur ne collait pas à l'image, et en conséquence ça fichait le bazar, pour rester poli.
Je vais essayer de comprendre ce qui ne collait pas, c'est le mot!
Modérateur
Avec plaisir.

La div en inline-block prend la taille de son contenu.
Il faut qu'à l'intérieur il n'y ait que l'image (display block sur cette dernière évite une petite marge en bas due à la ligne de texte) qui soit dans le flux. Les autres éléments en position:absolute sortent du flux et ne participent pas au dimensionnement de la div.
kustolovic a écrit :
Avec plaisir.

La div en inline-block prend la taille de son contenu.
Il faut qu'à l'intérieur il n'y ait que l'image (display block sur cette dernière évite une petite marge en bas due à la ligne de texte) qui soit dans le flux. Les autres éléments en position:absolute sortent du flux et ne participent pas au dimensionnement de la div.


Euhhhh! Smiley confused encore un problème de resize !
C'était effectivement ce que j'avais essayé de faire ("l'a peu près" signalé hier soir était vraiment très peu)

Voilà où j'en suis:
Suite à l'opération "centrage vertical", j'avais l'image stylée comme suit:

          #logo{
                display:block;
                height:50%;
                max-height:350px;
                margin:auto;
            }


Pour obtenir l'effet recherché, j'ai remplacé par

        #img-container {
              display: inline-block;
              position: relative;
              height:50%;                /* <-- pour que ce soit la div qui change de taille  */
              max-height:350px;
              border:2px solid red;  /* <- pour matérialiser la div durant les tests */
            }
        #logo{
                display:block;
                height:100%;            /* <- pour que l'image prenne la taille de la div  */
                margin:auto;
            }

De façon fort intéressante, il se produit le phénomène suivant:
- Tant que la taille est bloquée par max-height 350px;, pas de problème
- Si la taille de la fenêtre diminue encore, la div et l'image se réduisent bien en hauteur, mais la div garde la largeur max (!!??? très bizarre n'est il pas? qu'est-ce qui lui dit de garder cette largeur?). C'est ce que j'avais appelé hier "Sait-on faire une div collante?".

Le résultat c'est que les sous-menus sont OK en Y mais pas en X.

Une idée ?

Ça me ferait mal de devoir abandonner près du but!
Modifié par PapyJP (05 Mar 2015 - 11:50)
Modérateur
mmmh, je n'avais pas compris qu'il soit nécessaire que l'image se redimensionne en hauteur si la place manque.

Le problème est que les tableaux s'adaptent à leurs contenus et ne permettent pas de redimensionner facilement l'image à l'intérieur.

En changeant les styles à une taille précise on arrive à quelque chose:

en bordure rouge, la div englobant l'image. ça pose des problèmes au redimensionnement dynamique, mais au chargement c'est toujours ok.
http://codepen.io/anon/pen/jEpJVY
kustolovic a écrit :
mmmh, je n'avais pas compris qu'il soit nécessaire que l'image se redimensionne en hauteur si la place manque.

C'est justement pour ça que j'ai fait tout ce machin: que ça s'adapte aux tailles d'écran et au redimensionnement des fenêtres pour tenir compte de mes utilisateurs: certains ont de très grands écrans, d'autre des petits. de plus ceux qui ont de très grands écrans y mettent plusieurs fenêtres de taille variable et les ajustent. C'était déjà le cas à l'époque, ça a empiré avec les tablettes.

kustolovic a écrit :
Le problème est que les tableaux s'adaptent à leurs contenus et ne permettent pas de redimensionner facilement l'image à l'intérieur.

Ça n'a pas trop l'air de poser de problème pour l'image.

kustolovic a écrit :
en bordure rouge, la div englobant l'image. ça pose des problèmes au redimensionnement dynamique, mais au chargement c'est toujours ok.

Oui, parce qu'en fait il prend tout en taille max.
Ce que je ne comprends pas c'est que la div enveloppante ne s'ajuste pas au contenu en largeur.
Je pourrais comprendre qu'elle prenne toute la largeur de l'écran, puisque je ne dis rien sur sa largeur, mais manifestement le navigateur fait
1) mettre ma div conteneur à 50% de la hauteur de la div enveloppante, qui fait 90% de la hauteur de la fenêtre
2) mettre l'image dedans à l'échelle pour qu'elle fasse 100% de la hauteur du conteneur
3) mettre la largeur du conteneur à celle de l'image
4) quand ça resize et qu'on est en dessous de max-height, on garde la largeur calculée en 3)

Bon, j'ai répet de musique cet après midi, je verrai ce soir...

Merci encore de ton aide!
Modifié par PapyJP (05 Mar 2015 - 14:14)