Une histoire de z-Index Fermé

Question

Bonjour,

j'avais fait un site web (PHP/MySQL) mais je compte le réécrire complètement. Les scripts qui constituent le "moteur" d'interraction avec la base MySQL ne changeront pas. Mais j'en suis à déterminer quelles seront les différentes DIV et leur contenu (ainsi que leurs styles) pour faire une version adaptée au PC et une autre au smartphone.

Mon souci du moment tourne autour du z-index. J'imagine (mais ai-je raison ?) que le menu est écrit dans une couche (invisible) mais rendue visible par dessus la page courante en cliquant sur l'icône "menu" (trois traits horizontaux en haut à gauche -- position absolue --. L'icône est déjà faite en SVG) et re-rendue invisible (soit en re-cliquant sur l'icône soit en cliquant à côté du menu.

Mes questions :
1) est-ce la bonne technique ?
2) comment gérer les z-index pour parvenir à ce but ?

Je ne demande pas de solution toute faite, tant qu'à faire j'aimerais apprendre moi-même mais aussi partir sur une bonne piste, une bonne façon de procéder. De toute façon, si je m'engage dans cette voie, à coup sûr, j'aurai d'autres questions...

Merci pour vos réponses.

Configuration: Windows / Firefox 101.0

DoctorHow · Answer

Salut,
un peu imprécis comme question.
 z-index est une propriété CSS qui permet de gérer la superposition de plusieurs éléments. Par défaut le z-index s'effectue dans l'ordre indiqué des balises: 0 pour la première écrite, 1 pour la seconde si superposition, etc...
https://www.w3schools.com/cssref/pr_pos_z-index.asp

"quelles seront les différentes DIV et leur contenu (ainsi que leurs styles) pour faire une version adaptée au PC et une autre au smartphone. "
Beurk des "div"...il y a tellement mieux pour les contenus(section, article et pour un menu nav)
https://fr.w3docs.com/apprendre-html/les-elements-semantiques-html5.html

Quant au web adaptative ou responsive design il y a plusieurs(qui ne s'excluent pas) possibilités dont les medias queries de CSS.

"J'imagine (mais ai-je raison ?) que le menu est écrit dans une couche (invisible) mais rendue visible par dessus la page"
C'est une possibilité. Mais pas la seule et elle est à éviter car les contenus invisibles ne seront pas référencés et difficilement possible de les faire convenir aux exigences d'accessibilité. Une autre solution est de mettre les contenus hors de la page(avec absolute par exemple en lui donnant une position en -9999px en haut, droite, bas ou gauche) et de la remettre dans la page lors du survol.
Le menu est il écrit? Dans ce cas il suffit de regarder le HTML avec le CSS dans la page générée pour savoir.

"1) est-ce la bonne technique ?
2) comment gérer les z-index pour parvenir à ce but ?"

Pourquoi exactement? Un menu rollover en CSS?
Il existe de nombreuses techniques pour ça donc pas de bonne technique(si je comprends l'idée un élément qui se trouve en dessous passe au dessus? pas pratique , facilement des bugs si c'est un survol de la souris qui déclenche ça, et compliqué par rapport à d'autres méthodes).
 Ce que vous décrivez en est une parmi d'autres. Si 2 éléments seulement sont superposés pas besoin de changer la propriétés, il suffit de les écrire dans l'ordre de superposition voulue(le premier est celui en dessous z-index:0; le second celui en dessus z-index:1; ) Voire aussi du côté de(CSS) display:none; avec la remarque sur l'accessibilité et le référencement qui reste vrai pour les contenus invisible ou non affichés. Pour un menu c'est dommage.

Jetez un œil du côté des tutos pour faire un menu rollover CSS, certains pourront intégrer du JavaScript pour plus d'adaptabilité/dynamisme/interactivité.

https://duckduckgo.com/?q=menu+rollover+CSS


A noter que côté adaptation(tailles d'écrans/résolution) cela ne peut pas se faire côté serveur(PHP) puisque la page n'existe pas encore (le PHP est généré avant l'envoi) et que ça se passe donc côté CSS et JavaScript éventuellement(pour obtenir par exemple la taille de l'écran et écrire une classe CSS par exemple)

let largeurEcran=window.innerWidth, // -- largeur écran en pixels
     hauteurEcran=window.innerHeight;//-- idem pour la hauteur

let largeur10PourCent=Math.round(largeurEcran*0.1) //-- 10% de la largeur

let selfStyle = document.getElementsByTagName('style')[0] /**obtient la balise style de la page ça ne fonctionnera ps s'il n'y en a pas dans la page, le "0" entre crochet car prends la première qui existe(getElmentsByTagName renvoie un tableau Array), s'il y en a plusieurs-ce qui est rare- ça ne pose pas de problèmes*/

selfStyle.innerHTML=selfStyle.innerHTML+' .large-10-pour-cent{width:'+largeur10PourCent+'px;}'/** ajoute au contenu de la balise style la classe "large-10-pour-cent" avec la valeur calculée de 10% de la largeur totale 
* le symbole "+" sur une chaîne de caractères est l'opérateur de concaténation équivalent à "." en PHP: 
<?php
 $maChaine="Hello";
 $maChaine=$maChaine." world!";
 echo($maChaine);//-- "Hello world!"
?>
*/

Ce n'est qu'un exemple pas du tout optimisé et il y a d'autres manières comme toujours(comme écrire le CSS dans l'attribut style de l'élément HTML).

ps: à noter qu'une règle d'ergonomie est de limiter le nombre de clics nécessaire pour accéder à un lien/élément de menu. Là vous forcez l'utilisateur à cliquer pour voir les choix qu'il a, ce n'est pas toujours l'idéal et proposer les listes de choix directement est nettement plus clair, plus facile et rapide. Ensuite si vous avez de nombreux menus qui affichent des listes de sou-menus il faut peut-être revoir ça pour faire le plus simple possible(ne proposer qu'une liste de sous-menus dans une seule page pour bien la séparer du reste ou n'importe quel moyen pour faire plus simple & plus clair)

patricia@84 · Answer

Bonjour,

Pour mes premiers sites responsives sans utilisation de CMS, j'ai utilisé Boostrap (gratuit). Voyez ici : https://getbootstrap.com/
C'est une vraie mine si l'on se donne la peine d'explorer le site...

Cordialement,


Patricia

Une histoire de z-Index

2 réponses

Discussions similaires