Menu sur une image
Résolu/Fermé
Itsas50
Messages postés
10
Date d'inscription
mercredi 3 juillet 2019
Statut
Membre
Dernière intervention
2 avril 2022
-
4 déc. 2020 à 12:58
Artno - 6 déc. 2020 à 04:31
Artno - 6 déc. 2020 à 04:31
A voir également:
- Menu sur une image
- Menu déroulant excel - Guide
- Image iso - Guide
- Comment agrandir une image - Guide
- Menu démarrer windows 11 - Guide
- Acronis true image - Télécharger - Sauvegarde
1 réponse
Bonjour.
Tout d'abord vous avez plusieurs fautes dans les quelques lignes de code que vous montrez(vous pouvez intégrer celles ci via les balises faites pour cela sur le forum ce qui permet de voir mieux ce que vous présentez, voir menu code dans la fenêtre d'édition).
Ce sont des fautes assez importantes qui me font penser que vous n'avez pas les bases de l'outil que vous utilisez.
Mon conseil donc reprenez ces bases en refaisant les cours/méthode d’apprentissage que vous utilisez et/ou en variant celles ci.
Surtout que côté cours pour les débutants sur Internet vous avez plus que l'embarras du choix. tout ne se vaut pas, un tuto ou cours peut convenir mieux ou pas à certaines personnes etc...
L'important et la qualité de vos résultats dépends surtout d'une chose: votre travail.
Donc pratiquez avec l'objectif et l'humilité nécessaire pour apprendre(mettre à jour et acquérir au mieux les connaissances et pratiques).
Vos erreurs:
Avec une base faute sur quelques lignes(2 règles = 2 erreurs, nombre d'application de ces règles = 0) n'espérez pas avoir un quelconque résultat cohérent.
Le fait que vos présentiez un code lacunaire ne permet même pas de savoir si vous avez une faute dans l'ouverture et balises de vos éléments. En tout cas en utilisation l'indentation du HTML vous verrez en un coup d’œil les erreurs si vous en avez ainsi que la hiérarchie de chaque élément. e CSS étant assujettis à celle ci ne cherchez pas plus loin, si votre HTML sur quelques lignes n'est pas clair(ou comporte des erreurs de syntaxe ou ne correspond pas à la représentation voulue des éléments) inutile d'aller plus loin.
https://www.qwant.com/?q=indentation HTML&t=web
Vos Pratiques:
Vous nous présentez un code incomplet, il sera donc dur de pouvoir vous conseille ou ous corriger.
En effet votre code comporte une classe (attribut "class") CSS mais celui ci 'étant pas indiqué on peut pas savoir ce qui cloche si quelque chose cloche une fois que vous aurez corrigé les erreurs factuelles(mauvaise écriture de règles ce qui revient à aucune règle/paramètre de style dans votre page ou en tout cas pas celle que vous voulez).
Il nous faut donc le code complet , avec tout le CSS (toutes les règles CSS que vous définissez) afin que l'on puisse apporter une quelconque solution.
Je veut dire un problème ne peut avoir qu'une réponse si il y a tout les paramètres qui influe sur celui ci.
Il y a plusieurs façons d'inclure le CSS dans HTML. Ici vous utilisez 2 de ces possibilités.
Une possibilité(je parle de choses basiques que vous devez connaître avant toute écriture de CSS donc peut-être vus le savez déjà sinon voir conseils précédents sur l'apprentissage).
Vous l'utilisez 2 fois sur 3 et si elle est factuellement juste(pour peu que votre syntaxe le soit ce qui n'est pas le cas) c'est de loin la moins pratique et la plus déconseillée.
Votre document n'étant pas présent dans sa version complète on ne peut savoir si c'est la méthode que vous utilisez. C'est la seconde façon et beaucoup pratique que la précédente pour plusieurs raisons:
_elle permet d'utiliser les "class" et "id" CSS ainsi que d'autres sélecteurs afin affiner et multiplier les possibilités d'agir sur le document.
_elle sépare clairement le CSS de la partie HTML et rend donc plus facile à lire, comprendre, corriger et modifier le CSS comme le HTML.
Elle combine les avantages de la seconde méthode tout en séparant clairement le fond de la forme(le fond = le contenu HTML, la forme la présentation obtenue par CSS agissant sur le fond). Cette distinction effective permet de rendre HTML comme CSS non dépendant l'un de l'autre.
C'est à dire que vous pouvez avoir plusieurs présentations(les règles CSS) pour le même contenu(le fond HTML) ou inversement le même CSS pour plusieurs pages HTML(évidemment très pratique pour ne pas à avoir à écrire différentes présentations pour différentes pages et garder l'homogénéité de la présentation d'un site à travers ses pages sans avoir à écrire plusieurs fois les même règles).
Je vous recommande d'utiliser uniquement la dernière méthode dans l'écriture de vos pages. Réservez les 2 autres pour des tests rapides ou aperçu qui démarqueront bien l'aperçu de la version définitive ou ne nécessitent pas d'ouvrir différents fichiers. Autant avoir es bonnes habitudes et pratique directement sans passer par celle qui sont accessoires et limitatives. La logique des langages comme du web étant la permissivité, ne vous éloignez pas d'une démarche qualitative dans un contexte didactique. Qu'on puisse faire moins bien les choses ne doit pas vous éloigner de la bonne façon, c'est un plus du moment que vous avez en priorité les bonnes pratiques et toutes les connaissances requises.
Test et débogage: Pour voir vos erreurs il a un outil simple que vous devez utiliser fréquemment surtout si vous débutez:
Les outils du développement du navigateur vous permet d'accéder à plusieurs outils. Parmi ces outils la console va indiquer clairement vos erreurs avec la ligne et la nature de celle ci.
Vous avez donc rapidement l'indication de celle ci.
Plus vos scripts(le 'texte' de chaque langages employés) seront complexes, long et feront appel à différents langages combinés plus celle ci revêt de l'utilité. Ce n'est clairement pas un gadget mais une nécessité qu'un bon cours débutant sur la création de pages va présenter.
Par rapport aux règles CSS que vous utilisez:
Vous utilisez 2 règles qui permettent de sortir du flux normal du document. Ce sont des méthodes "d'exceptions donc à utiliser avec parcimonie et dans la mesure où vous êtes parfaitement à l'aise avec les standards du flux du document.
Si ces règles d'exception(positionnement relatif ou absolu) sont pratiques pour la mise en page dans certains cas il existe tout un tas de règles de positionnement qui ne nécessitent pas de sortir du flux. Comme par exemple les dimensions des marges(propriétés 'margin' ,'padding' ) ou le comportement de base d'un élément(balise) de la page par rapport aux autres :
la propriété display a des valeurs différentes "par défaut" suivant le type de balise utilisé, ainsi un élément de texte sera par défaut considéré comme "à la ligne" de son prédécesseur si celui ci à le même comportement ou de type dit "bloc" repartant sur une nouvelle ligne sauf indication du contraire.
On peut donc changer l'agencement/position que vont prendre les éléments en changeant ces valeurs.
De même et selon le type bloc ou en ligne attribuer des dimensions (en largeur ou hauteur) permet d'attribuer des dimensions des 'lignes' de chaque élément de la page et donc de changer leur position dans le flux sans "sortir" du flux.
Le positionnement en dehors du flux en modifiant la propriété 'position':
1)Hors du flux en indiquant "relative" ou "absolute" comme valeurs vous indiquez une position relative à l'élément prédécesseur(qui n'est pas indiqué mais utilisé-pour peu que vous corrigiez votre erreur de syntaxe- dans votre code incomplet donc difficile d'en dire quelque chose).
En positionnement absolue l'élément ne dépends d'aucun autre.
2)Indiquer un positionnement par rapport à autre chose que le flux:
De façon générale une position relative ou absolue est suivie par la ou les valeurs que l'on veut donner à un positionnement:
les dimensions de "l'écart" et le sens cardinal(par rapport au haut ou droite ou bas ou gauche de la page).
Sans dimension et indication du sens ces valeurs sont 0 horizontalement et 0 verticalement par rapport au coin haut gauche de la page.
Autre point(dernier mais non le moindre par rapport à votre question):
La troisième dimension d'un affichage en deux dimensions:
Si nos écrans courants n'affichent que largeur et hauteur(width et height) de la page et de chaque élément il existe toutefois une troisième dimension.
Comme on a pu le voir il existe plusieurs(les méthodes que je présente ne sont pas les seules) moyens de positionner des éléments dans la page.
Le flux (normal) des éléments de la page peut être modifié ou le positionnement en relatif ou absolu sortant du flux un ou plusieurs éléments peut mener à des superpositions de ces éléments.
Cette superposition permet de penser une troisième dimension en 2D dimension. Une profondeur ou ordre d’empilement.
Par défaut l'ordre de plusieurs éléments superposé(celui qui recouvre l'autre et celui qui est recouvert) es indiqué par l'ordre dans lesquels sont écrits les éléments HTML. Le premier écrit étant disposé 'sous' celui ou ceux qui sont écrits ensuite avec 2 exceptions ou plutôt précisions:
_dans le cas d'imbrication ou c'est l'élément container qui doit être considéré pour une superposition avec un autre élément hors du container.
_hors du flux(en changeant position en relatif ou absolu) les imbrications ne sont plus considérées.
Ceci peut être(quel élément recouvre ou est recouvert) changé par la propriétés z-index ou simplement en modifiant l'ordre d'écriture des éléments HTML.
La seconde solution étant parfois plus simple surtout dans le cas de plusieurs chevauchements donc plusieurs niveaux de "profondeurs"/superpositions dans la page.
C'est la propriétés z-index , ici le manuel et un exemple:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Le clic sur un élément est soumis à ces superpositions car associé à chaque élément dans sa proposition. Ainsi un élément qui n'a pas un clic actif par défaut(un div par exemple) recouvrant un autre(superposé 'au dessus') qui a un clic par défaut(un lien par exemple) rends le dernier inaccessible car celui ci n'est pas pointé par la souris mais l'élément avec la propriété Z supérieure.
S'il y a 10 superpositions/recouvrements de plusieurs éléments seul celui au niveau supérieur est donc accessible. Les 9 autres(dans un exemple ou il y 'aurait aucun débordement, des éléments de même taille et même positions cartésiennes X,Y ce qui est pratique est rarement le cas) qui sont recouverts peuvent très bien être visibles l'interaction ne sera prise en compte que pour l'élément et/ou les contenus de celui ayant la plus haute valeur "z-index". Sans modification de cette valeur , c'est l'élément qui est écrit en dernier.
Changer cette valeur permet donc de mettre "dessus" ou "dessous" en profondeur et changer cet ordre.
Comme cela complexifie facilement et souvent inutilement le développement(parce que si on change la valeur de l'un on doit s'assurer que c'est bien la superposition ou ordre d’empilement voulue pour les autres) en écriture, lecture et clarté et en cas de modifications c'est bien sûr à éviter dans la mesure du possible; en utilisant l'ordre "naturel" indiqué dans l'ordre d'écriture.
Surtout si vous n'êtes pas trop à l'aise avec les langages; conserver cet ordre rend nettement plus clair et abordable la lecture par un humain de la page et donc la correction d'erreurs potentielles ou une simple modification.
Voilà bon travail, vous trouverez plus complet et mieux expliqué avec une recherche "positionnement/mise en page CSS" pour peu que vous ayez les bases solides du langage et de son application(à commencer par la syntaxe et la façon d'employer celle ci qui est rédhibitoire si absents pour aller sur quelque chose de plus avancé).
Tout d'abord vous avez plusieurs fautes dans les quelques lignes de code que vous montrez(vous pouvez intégrer celles ci via les balises faites pour cela sur le forum ce qui permet de voir mieux ce que vous présentez, voir menu code dans la fenêtre d'édition).
Ce sont des fautes assez importantes qui me font penser que vous n'avez pas les bases de l'outil que vous utilisez.
Mon conseil donc reprenez ces bases en refaisant les cours/méthode d’apprentissage que vous utilisez et/ou en variant celles ci.
Surtout que côté cours pour les débutants sur Internet vous avez plus que l'embarras du choix. tout ne se vaut pas, un tuto ou cours peut convenir mieux ou pas à certaines personnes etc...
L'important et la qualité de vos résultats dépends surtout d'une chose: votre travail.
Donc pratiquez avec l'objectif et l'humilité nécessaire pour apprendre(mettre à jour et acquérir au mieux les connaissances et pratiques).
Vos erreurs:
- Vous indiquez dans votre code des propriétés de style (le CSS) dans la balise style du document HTML(ou page web). Ces propriétés de styles doivent OBLIGATOIREMENT se terminer par le signe ";"(point virgule).
Avec une base faute sur quelques lignes(2 règles = 2 erreurs, nombre d'application de ces règles = 0) n'espérez pas avoir un quelconque résultat cohérent.
- Imbrications: surtout pour un débutant ou devez être clair avec vos imbrications de balise. Une méthode simple est l'indentation(mettre à la ligne chaque élément en fonction de son container lors d'imbrications pour le HTML).
Le fait que vos présentiez un code lacunaire ne permet même pas de savoir si vous avez une faute dans l'ouverture et balises de vos éléments. En tout cas en utilisation l'indentation du HTML vous verrez en un coup d’œil les erreurs si vous en avez ainsi que la hiérarchie de chaque élément. e CSS étant assujettis à celle ci ne cherchez pas plus loin, si votre HTML sur quelques lignes n'est pas clair(ou comporte des erreurs de syntaxe ou ne correspond pas à la représentation voulue des éléments) inutile d'aller plus loin.
https://www.qwant.com/?q=indentation HTML&t=web
Vos Pratiques:
Vous nous présentez un code incomplet, il sera donc dur de pouvoir vous conseille ou ous corriger.
En effet votre code comporte une classe (attribut "class") CSS mais celui ci 'étant pas indiqué on peut pas savoir ce qui cloche si quelque chose cloche une fois que vous aurez corrigé les erreurs factuelles(mauvaise écriture de règles ce qui revient à aucune règle/paramètre de style dans votre page ou en tout cas pas celle que vous voulez).
Il nous faut donc le code complet , avec tout le CSS (toutes les règles CSS que vous définissez) afin que l'on puisse apporter une quelconque solution.
Je veut dire un problème ne peut avoir qu'une réponse si il y a tout les paramètres qui influe sur celui ci.
Il y a plusieurs façons d'inclure le CSS dans HTML. Ici vous utilisez 2 de ces possibilités.
Une possibilité(je parle de choses basiques que vous devez connaître avant toute écriture de CSS donc peut-être vus le savez déjà sinon voir conseils précédents sur l'apprentissage).
- Une de ces façons est d'inclure le CSS directement dans la balise via l'utilisation de l'attribut de balise HTML 'style'.
Vous l'utilisez 2 fois sur 3 et si elle est factuellement juste(pour peu que votre syntaxe le soit ce qui n'est pas le cas) c'est de loin la moins pratique et la plus déconseillée.
- inclure les règles CSS via la balise HTML "STYLE" de votre document.
Votre document n'étant pas présent dans sa version complète on ne peut savoir si c'est la méthode que vous utilisez. C'est la seconde façon et beaucoup pratique que la précédente pour plusieurs raisons:
_elle permet d'utiliser les "class" et "id" CSS ainsi que d'autres sélecteurs afin affiner et multiplier les possibilités d'agir sur le document.
_elle sépare clairement le CSS de la partie HTML et rend donc plus facile à lire, comprendre, corriger et modifier le CSS comme le HTML.
- La troisième façon de loin la meilleure, consiste à utiliser une page(ou fichier) CSS externe(nommée monstyle.css par exemple). Pour ce faire vous devez indiquer le lien des règles CSS à utiliser.(voir vos cours si vous ne savez pas la méthode pour ça).
Elle combine les avantages de la seconde méthode tout en séparant clairement le fond de la forme(le fond = le contenu HTML, la forme la présentation obtenue par CSS agissant sur le fond). Cette distinction effective permet de rendre HTML comme CSS non dépendant l'un de l'autre.
C'est à dire que vous pouvez avoir plusieurs présentations(les règles CSS) pour le même contenu(le fond HTML) ou inversement le même CSS pour plusieurs pages HTML(évidemment très pratique pour ne pas à avoir à écrire différentes présentations pour différentes pages et garder l'homogénéité de la présentation d'un site à travers ses pages sans avoir à écrire plusieurs fois les même règles).
Je vous recommande d'utiliser uniquement la dernière méthode dans l'écriture de vos pages. Réservez les 2 autres pour des tests rapides ou aperçu qui démarqueront bien l'aperçu de la version définitive ou ne nécessitent pas d'ouvrir différents fichiers. Autant avoir es bonnes habitudes et pratique directement sans passer par celle qui sont accessoires et limitatives. La logique des langages comme du web étant la permissivité, ne vous éloignez pas d'une démarche qualitative dans un contexte didactique. Qu'on puisse faire moins bien les choses ne doit pas vous éloigner de la bonne façon, c'est un plus du moment que vous avez en priorité les bonnes pratiques et toutes les connaissances requises.
Test et débogage: Pour voir vos erreurs il a un outil simple que vous devez utiliser fréquemment surtout si vous débutez:
Les outils du développement du navigateur vous permet d'accéder à plusieurs outils. Parmi ces outils la console va indiquer clairement vos erreurs avec la ligne et la nature de celle ci.
Vous avez donc rapidement l'indication de celle ci.
Plus vos scripts(le 'texte' de chaque langages employés) seront complexes, long et feront appel à différents langages combinés plus celle ci revêt de l'utilité. Ce n'est clairement pas un gadget mais une nécessité qu'un bon cours débutant sur la création de pages va présenter.
Par rapport aux règles CSS que vous utilisez:
Vous utilisez 2 règles qui permettent de sortir du flux normal du document. Ce sont des méthodes "d'exceptions donc à utiliser avec parcimonie et dans la mesure où vous êtes parfaitement à l'aise avec les standards du flux du document.
Si ces règles d'exception(positionnement relatif ou absolu) sont pratiques pour la mise en page dans certains cas il existe tout un tas de règles de positionnement qui ne nécessitent pas de sortir du flux. Comme par exemple les dimensions des marges(propriétés 'margin' ,'padding' ) ou le comportement de base d'un élément(balise) de la page par rapport aux autres :
la propriété display a des valeurs différentes "par défaut" suivant le type de balise utilisé, ainsi un élément de texte sera par défaut considéré comme "à la ligne" de son prédécesseur si celui ci à le même comportement ou de type dit "bloc" repartant sur une nouvelle ligne sauf indication du contraire.
On peut donc changer l'agencement/position que vont prendre les éléments en changeant ces valeurs.
De même et selon le type bloc ou en ligne attribuer des dimensions (en largeur ou hauteur) permet d'attribuer des dimensions des 'lignes' de chaque élément de la page et donc de changer leur position dans le flux sans "sortir" du flux.
Le positionnement en dehors du flux en modifiant la propriété 'position':
1)Hors du flux en indiquant "relative" ou "absolute" comme valeurs vous indiquez une position relative à l'élément prédécesseur(qui n'est pas indiqué mais utilisé-pour peu que vous corrigiez votre erreur de syntaxe- dans votre code incomplet donc difficile d'en dire quelque chose).
En positionnement absolue l'élément ne dépends d'aucun autre.
2)Indiquer un positionnement par rapport à autre chose que le flux:
De façon générale une position relative ou absolue est suivie par la ou les valeurs que l'on veut donner à un positionnement:
les dimensions de "l'écart" et le sens cardinal(par rapport au haut ou droite ou bas ou gauche de la page).
Sans dimension et indication du sens ces valeurs sont 0 horizontalement et 0 verticalement par rapport au coin haut gauche de la page.
Autre point(dernier mais non le moindre par rapport à votre question):
La troisième dimension d'un affichage en deux dimensions:
Si nos écrans courants n'affichent que largeur et hauteur(width et height) de la page et de chaque élément il existe toutefois une troisième dimension.
Comme on a pu le voir il existe plusieurs(les méthodes que je présente ne sont pas les seules) moyens de positionner des éléments dans la page.
Le flux (normal) des éléments de la page peut être modifié ou le positionnement en relatif ou absolu sortant du flux un ou plusieurs éléments peut mener à des superpositions de ces éléments.
Cette superposition permet de penser une troisième dimension en 2D dimension. Une profondeur ou ordre d’empilement.
Par défaut l'ordre de plusieurs éléments superposé(celui qui recouvre l'autre et celui qui est recouvert) es indiqué par l'ordre dans lesquels sont écrits les éléments HTML. Le premier écrit étant disposé 'sous' celui ou ceux qui sont écrits ensuite avec 2 exceptions ou plutôt précisions:
_dans le cas d'imbrication ou c'est l'élément container qui doit être considéré pour une superposition avec un autre élément hors du container.
_hors du flux(en changeant position en relatif ou absolu) les imbrications ne sont plus considérées.
Ceci peut être(quel élément recouvre ou est recouvert) changé par la propriétés z-index ou simplement en modifiant l'ordre d'écriture des éléments HTML.
La seconde solution étant parfois plus simple surtout dans le cas de plusieurs chevauchements donc plusieurs niveaux de "profondeurs"/superpositions dans la page.
C'est la propriétés z-index , ici le manuel et un exemple:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Le clic sur un élément est soumis à ces superpositions car associé à chaque élément dans sa proposition. Ainsi un élément qui n'a pas un clic actif par défaut(un div par exemple) recouvrant un autre(superposé 'au dessus') qui a un clic par défaut(un lien par exemple) rends le dernier inaccessible car celui ci n'est pas pointé par la souris mais l'élément avec la propriété Z supérieure.
S'il y a 10 superpositions/recouvrements de plusieurs éléments seul celui au niveau supérieur est donc accessible. Les 9 autres(dans un exemple ou il y 'aurait aucun débordement, des éléments de même taille et même positions cartésiennes X,Y ce qui est pratique est rarement le cas) qui sont recouverts peuvent très bien être visibles l'interaction ne sera prise en compte que pour l'élément et/ou les contenus de celui ayant la plus haute valeur "z-index". Sans modification de cette valeur , c'est l'élément qui est écrit en dernier.
Changer cette valeur permet donc de mettre "dessus" ou "dessous" en profondeur et changer cet ordre.
Comme cela complexifie facilement et souvent inutilement le développement(parce que si on change la valeur de l'un on doit s'assurer que c'est bien la superposition ou ordre d’empilement voulue pour les autres) en écriture, lecture et clarté et en cas de modifications c'est bien sûr à éviter dans la mesure du possible; en utilisant l'ordre "naturel" indiqué dans l'ordre d'écriture.
Surtout si vous n'êtes pas trop à l'aise avec les langages; conserver cet ordre rend nettement plus clair et abordable la lecture par un humain de la page et donc la correction d'erreurs potentielles ou une simple modification.
Voilà bon travail, vous trouverez plus complet et mieux expliqué avec une recherche "positionnement/mise en page CSS" pour peu que vous ayez les bases solides du langage et de son application(à commencer par la syntaxe et la façon d'employer celle ci qui est rédhibitoire si absents pour aller sur quelque chose de plus avancé).
