Une histoire de z-Index

Fermé
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 10 juin 2022 à 16:14
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 - 16 juin 2022 à 02:02
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
A voir également:

2 réponses

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)
1
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139
11 juin 2022 à 15:24
Tout d'abord merci pour ta réponse. Ensuite j'ai conscience que la question manque de précision, ce dont elle ne manquerait pas si je connaissais mieux le sujet mais qui m'éviterait par la même occasion de la poser, si c'était le cas.

J'avais déjà trouvé une feuille de style de base pour smartphone chez Alsacreation :(https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html)

Je sais que z-index est une propriété CSS et j'imaginais qu'il me servirait à identifier la couche à rendre visible ou invisible selon les besoins. Mais ma connaissance du HTML/CSS/Javascript se contentait jusqu'ici des DIV car n'étant pas développeur professionnel, je ne passe pas ma vie devant un PC à apprendre toutes les dernières techniques. Toutefois, je sais quand même ce qu'est le côté client et le côté serveur (donc, là où les choses se font) et puisque tu dis qu'il y a mieux que les DIV pour la gestion des contenus, plutôt que recevoir un code tout fait, je préfère apprendre par moi-même en fonction de mes besoins et ton lien me sera utile.

Tu m'informes (et t'en remercie) de web adaptive ou responsive, de menu rollover : je découvre. Mais puisque ta réponse est truffée de liens qui, je pense, illustrent ton propos, je vais aller les lire et je comprendrai mieux pour effectuer mes choix.

En tout cas, merci pour avoir pris la peine de faire cette longue réponse, qui plus est, contenant plein de liens.

Bon Week-end.

PS: Je m'efforce toujours de faire en sorte de parvenir à l'information recherchée en trois clics maxi.
1
patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9
15 juin 2022 à 15:59
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
1
heliconius Messages postés 539 Date d'inscription mardi 1 juillet 2008 Statut Membre Dernière intervention 23 juin 2023 139
16 juin 2022 à 02:02
Merci, je vais fouiner et y chiner des infos.

Alors pour tout dire, @DoctorHow m'a donné des liens pour les menus rollover. Je me suis rendu compte que j'étais comme M. Jourdain, je faisais déjà des menus rollover sans le savoir... :-) Le reste est néanmoins à étudier...

Pour ce qui concene mon menu, j'ai pris la base de CCS proposée par Alsacréation :
https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html
et que j'ai complétée pour mon menu (dans une DIV) et dont voici le complément CCS :
#menu {
	font-family:times;
	font-size:13pt;
	font-style:italic;
	width:200px;
	border:1px solid grey;
	border-radius:0% 10% 10% 0%;
	background-color:#EBEBC0;
	opacity:0.95;
	padding:10px;
	z-index:10;
	position:absolute;
	top:150px;
	left:-500px;
}
#menu a  { text-decoration:none; }
#menu ul { list-style-type:none; padding-left:0; }
#menu li { margin-bottom:10px; padding-left:0; }


et il me convient. Quant au javascript qui l'affiche ou le masque, c'est le suivant :
/* JS menu 14/06/2022 */

var status = 0;  // 0: caché ou 1: visible
var elem   = ''; // document.getElementById('menu')

function mshow(elem) {
	elem.style.position="absolute";
	elem.style.top="45px";
	elem.style.left="10px";
	status = 1;
}
function mhide(elem) {
	elem.style.position="absolute";
	elem.style.top="45px";
	elem.style.left="-500px";
	status = 0;
}
function showhide(){
	elem = document.getElementById('menu');
	if(status == 0) { mshow(elem); } else { mhide(elem); }
}

L'affichage ou le masquage se faisant sur l'icone menu par :
<a href="javascript:showhide()"><img src="./img/menu.jpg" border="0" alt="Menu" /></a>

Et il me convient aussi, mais il y a deux choses qui me chiffonnent.

1) le site original est conçu pour PC et celui-ci pour smartphone. Tel que ci-dessus, ça fonctionne sur le smartphone... en mode portrait mais plus en mode paysage. Pourquoi ?

2) C'était sympa de mettre
<body onclick="javascript:showhide()">
ça permettait d'afficher ou de masquer ce menu en tapant sur la page au lieu d'être obligé de viser la petite icône menu. Mais j'ai dû (sur certaines pages) enlever l'attribut onclick de la balise body. Les pages où il y a un formulaire à remplir : quand on pose le doigt dans le champ pour le saisir, ça affichait le menu. Donc certaines pages l'ont, d'autres non et je trouve que ça manque d'homogénéité. Mais c'est quand même moins grave que le non fonctionnement en paysage par rapport au portrait.

Si quelqu'un veut bien jeter un oeil sur le site et donner un avis du pourquoi, cet avis est le bienvenu. Mais il faut le voir à partir d'un smartphone, pas d'un PC où l'affichage est "brut de fonderie" car sans feuille de style PC. celle qui existe n'est que pour smartphone. l'URL : http://www.ptnn.fr

Ne pas tenir compte de la "pauvreté" du menu, il dépend du contexte. Quand on est connecté le menu offre de nouveaux choix ; là il n'offre que les choix "internautes de passage". En développement, l'incription n'est pas possible.

L'affichage qui change lors de l'orientation de téléphone me chicotte quelque peu. s'il y a des idées...

Merci à tous et toutes pour vos éventuelles réponses.
0