Affichage du menu
Fermé
philip51
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
-
25 févr. 2020 à 10:57
Bill-Billion Messages postés 41 Date d'inscription lundi 23 décembre 2019 Statut Membre Dernière intervention 2 septembre 2020 - 11 mars 2020 à 19:44
Bill-Billion Messages postés 41 Date d'inscription lundi 23 décembre 2019 Statut Membre Dernière intervention 2 septembre 2020 - 11 mars 2020 à 19:44
A voir également:
- Affichage du menu
- Menu déroulant excel - Guide
- Menu contextuel windows 11 retrouver l'affichage classique - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
3 réponses
Salut essayez avec ceci:
https://www.google.fr/search?q=positionnement+css
Sinon qu'vaez vos essayé précisément, C'est un peu limité de se limiter à un seul tuto, par contre vous avez des sites qui listent toutes les propriétés CSS et leur fonctionnement et rôle(voir par ex. W3schools.org qui est édité par le consortium web ou les sites de la fondation Mozilla qui est un acteur important du web).
- Entre la bannière et le menu il y a du blanc et pareil entre le menu et le conteneur.
dans ce cas redescendez la bannière ou remontez le menu ou remplissez le fond en noir pour que ça ne se voie pas; Bien entendu il y a beaucoup plus de solutions à vous de voir laquelle correspond.
Je ne sais pas en quoi vous vous êtes 'inspiré' d'un tuto pour faire ça mais forcément si vous ne faites pas les choses identiques vous n'aurez pas le même résultat. Un tuto c'est pour apprendre, une fois que vous maîtrisez vous devriez avoir compris et pouvoir faire par vous même. Donc refaites le tuto, variez les cours pour voir une autre façon d'apprendre . La réponse à vos questions est dans le lien que j'ai indiqué au début, chercher par vous même fait beaucoup apprendre et savoir chercher c'est la seule chose qui vous sera toujours indispensable pour progresser dans la création web... nul n'est besoin de tout savoir et encore moins par cœur du moment que vous comprenez le fonctionnement à la base et savez ce que vous devez chercher.
- les sous menus sont plus larges que leur menu
Réduisez la taille si ce n'est que cela... quel est le problème ou la difficulté je ne comprends pas vraiment... La largeur est exprimée avec la propriété width qui pet prendre plusieurs unités, relatives (proportionnelles) ou absolues(à éviter en général).
https://www.w3schools.com/CSSref/pr_dim_width.asp
- il y a une marge à gauche dans les sous menus
Si vous n'en voulez pas virez la marge. Il y a principalement deux types de marges pour chaque élément, une interne et une interne. Voir margin et padding.
Bien sûr aucune de ces régles n'est absolu(d'où mon lien sur le positionnement) et tout doit être dans la même cohérence. Par exemple si on veut positionner uniquement avec les marges on n'utilise que les marges, si on veut positionner en utilisant la propriété CSS "position" on va jouer sur ces paramètres et d'autres choses(en sortant du flux/positionnement normal des éléments).
On peut aussi très bien modifier les propriétés de comment se suivent les éléments et de l'espace qu'ils doivent prendre dans la page (voir display, float et autres propriétés semblables comme les flex box);
Tout cela ce n'est pas de la complexité car quand on a compris comment marche une régle CSS on les a toutes comprises, c'est de la permissité pour pouvoir faire différentes choses ou les mêmes choses de différentes manières; la façon de faire dépendra du contexte (le HTML que vous avez écrit mais bien sûr la mise en page voulue) et éventuellement des habitudes et préférences de la personne qui fait la mise en page CSS.
Comme on peut le voir dans ce que vous avez écrit vous utilisez le ciblage d'élément enfant en passant par les parents:
Les propriétés parentes vont parfois s'appliquer c'est pour ça que vous ne pouvez pas modifier une petite partie si vous ne pensez pas à l'héritage des propriétés des containers au dessus, donc le contexte.
Travaillez donc votre compréhension du contexte et du positionnement qui peut souvent changer toutes les régles(et l'ordre normal) des éléments de la page en cascade comme le laisse entendre l'acronyme CSS : (cascading style sheet ou feuille de style en cascade).
Ne vous limitez pas à un tuto si vous voulez apprendre il faut voir les choses dans sa globalité et aucun ne peut(ou n'a vocation) à être exhaustif. Un tuto ça (doit) donner les bonnes façons(ce qui n'est as toujours le cas) et répondre à un point particulier ce qui aide à la compréhension du fonctionnement. Mais ça ne dira jamais tout , à chaque cas sa méthode , voire plusieurs pour des résultats identiques. Une fois que vous serez à l'aise avec votre compréhension du CSS et des propriétés vous devez pouvoir tout faire tout seul(même moyennant quelques reccherches et en suivant le manuel comme ceux que j'ai indiqués en liens).
https://www.google.fr/search?q=positionnement+css
Sinon qu'vaez vos essayé précisément, C'est un peu limité de se limiter à un seul tuto, par contre vous avez des sites qui listent toutes les propriétés CSS et leur fonctionnement et rôle(voir par ex. W3schools.org qui est édité par le consortium web ou les sites de la fondation Mozilla qui est un acteur important du web).
- Entre la bannière et le menu il y a du blanc et pareil entre le menu et le conteneur.
dans ce cas redescendez la bannière ou remontez le menu ou remplissez le fond en noir pour que ça ne se voie pas; Bien entendu il y a beaucoup plus de solutions à vous de voir laquelle correspond.
Je ne sais pas en quoi vous vous êtes 'inspiré' d'un tuto pour faire ça mais forcément si vous ne faites pas les choses identiques vous n'aurez pas le même résultat. Un tuto c'est pour apprendre, une fois que vous maîtrisez vous devriez avoir compris et pouvoir faire par vous même. Donc refaites le tuto, variez les cours pour voir une autre façon d'apprendre . La réponse à vos questions est dans le lien que j'ai indiqué au début, chercher par vous même fait beaucoup apprendre et savoir chercher c'est la seule chose qui vous sera toujours indispensable pour progresser dans la création web... nul n'est besoin de tout savoir et encore moins par cœur du moment que vous comprenez le fonctionnement à la base et savez ce que vous devez chercher.
- les sous menus sont plus larges que leur menu
Réduisez la taille si ce n'est que cela... quel est le problème ou la difficulté je ne comprends pas vraiment... La largeur est exprimée avec la propriété width qui pet prendre plusieurs unités, relatives (proportionnelles) ou absolues(à éviter en général).
https://www.w3schools.com/CSSref/pr_dim_width.asp
- il y a une marge à gauche dans les sous menus
Si vous n'en voulez pas virez la marge. Il y a principalement deux types de marges pour chaque élément, une interne et une interne. Voir margin et padding.
Bien sûr aucune de ces régles n'est absolu(d'où mon lien sur le positionnement) et tout doit être dans la même cohérence. Par exemple si on veut positionner uniquement avec les marges on n'utilise que les marges, si on veut positionner en utilisant la propriété CSS "position" on va jouer sur ces paramètres et d'autres choses(en sortant du flux/positionnement normal des éléments).
On peut aussi très bien modifier les propriétés de comment se suivent les éléments et de l'espace qu'ils doivent prendre dans la page (voir display, float et autres propriétés semblables comme les flex box);
Tout cela ce n'est pas de la complexité car quand on a compris comment marche une régle CSS on les a toutes comprises, c'est de la permissité pour pouvoir faire différentes choses ou les mêmes choses de différentes manières; la façon de faire dépendra du contexte (le HTML que vous avez écrit mais bien sûr la mise en page voulue) et éventuellement des habitudes et préférences de la personne qui fait la mise en page CSS.
Comme on peut le voir dans ce que vous avez écrit vous utilisez le ciblage d'élément enfant en passant par les parents:
.sous li{ flex: 1 1 auto; text-align: left; }/* tout les éléments a qui sont compris dans les éléments de classe "sous" */
.sous a{ padding: 5px; border-bottom: none; }/* tout les éléments li qui sont compris dans les éléments de classe "sous" */
.sous a:hover{ border-bottom: none; background-color:#3C3C3C ; }/* tout les éléments a lors du survol qui sont compris dans les éléments de classe "sous" */
.deroulant > a::after{ content:" ▼"; font-size: 12px; }
Les propriétés parentes vont parfois s'appliquer c'est pour ça que vous ne pouvez pas modifier une petite partie si vous ne pensez pas à l'héritage des propriétés des containers au dessus, donc le contexte.
Travaillez donc votre compréhension du contexte et du positionnement qui peut souvent changer toutes les régles(et l'ordre normal) des éléments de la page en cascade comme le laisse entendre l'acronyme CSS : (cascading style sheet ou feuille de style en cascade).
Ne vous limitez pas à un tuto si vous voulez apprendre il faut voir les choses dans sa globalité et aucun ne peut(ou n'a vocation) à être exhaustif. Un tuto ça (doit) donner les bonnes façons(ce qui n'est as toujours le cas) et répondre à un point particulier ce qui aide à la compréhension du fonctionnement. Mais ça ne dira jamais tout , à chaque cas sa méthode , voire plusieurs pour des résultats identiques. Une fois que vous serez à l'aise avec votre compréhension du CSS et des propriétés vous devez pouvoir tout faire tout seul(même moyennant quelques reccherches et en suivant le manuel comme ceux que j'ai indiqués en liens).
Salut,
Le blanc au dessus et en dessous du menu vient des marges externes appliquées par défaut sur la première balise ul de ton menu. Ajoute un margin: 0; pour le sélecteur nav ul afin de supprimer ce blanc.
L'espace à gauche dans les sous menus vient du padding appliqué par défaut sur la balise ul des sous menus, ajoute un padding: 0; sur ton sélecteur .sous.
En résumé :
Ceci devrait également régler le problème de largeur différente entre les menus et les sous menus.
Bonne journée,
Le blanc au dessus et en dessous du menu vient des marges externes appliquées par défaut sur la première balise ul de ton menu. Ajoute un margin: 0; pour le sélecteur nav ul afin de supprimer ce blanc.
L'espace à gauche dans les sous menus vient du padding appliqué par défaut sur la balise ul des sous menus, ajoute un padding: 0; sur ton sélecteur .sous.
En résumé :
nav ul { list-style-type: none; display: flex; margin: 0; }
.sous { padding: 0; }
Ceci devrait également régler le problème de largeur différente entre les menus et les sous menus.
Bonne journée,
Bill-Billion
Messages postés
41
Date d'inscription
lundi 23 décembre 2019
Statut
Membre
Dernière intervention
2 septembre 2020
11 mars 2020 à 19:44
11 mars 2020 à 19:44
À preciser:Je n'arrive pas vraiment à comprendre ton code
Essaie de simplifier ton code
Autre conseil:si tu travail avwc flexblox travail flexblox ton travail sera mieux structuré
/*pourquoi mettre*/
margin:0 auto;
flex:1 1 auto;
nav a
{
display:block;
border-bottom: 0px solid transparent;
}
Essaie de simplifier ton code
margin:auto; /*seul affiche directement au centre*/
nav ul{
display:flex;
justify-content:flex-start;
align-items:center /*affiche directement les elements li au centre*/
/*on utilise flex sur des blocs,ça permet d'aggrandir un bloc par rapport à un autre-mieux vaut utilisé un margin:left sur les elements li*/
/*dans ce cas çi tu n'aura pas à utiliser un display:block sur les element nav a*/
}
Autre conseil:si tu travail avwc flexblox travail flexblox ton travail sera mieux structuré
