Améliorer mon menu
Résolu/Fermé
Maitre2B
Messages postés
341
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
-
16 mai 2014 à 00:23
Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 - 31 mai 2014 à 17:05
Maitre2B Messages postés 341 Date d'inscription jeudi 29 octobre 2009 Statut Membre Dernière intervention 11 avril 2020 - 31 mai 2014 à 17:05
A voir également:
- Améliorer mon menu
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Menu demarrer windows 10 - Guide
6 réponses
Salut,
Pourquoi utiliser uniquement l'héritage en CSS, ce serait plus simple avec des classes non?
Et puis c'est le lien qui permet la navigation donc si vous voulez que ce soit le lien qui réagisse(pour tout les comportements) c'est à lui u'il faut donner les propriétés que vous voulez:
nav li:hover
{
background-color: orange;
}
Voilà le problème vient de là, vous séparer le lien(balise a) de son interactivité.
Si vous voulez que le lien prenne toute la place il me semble qu'il faut simplement qu'il ait pour valeur 100% en longueur largeur ce qui correspondras à la taille du container et donc utilisez un type de container adapté pour lui.
Comme ceci je dirais:
a.menu
{
display:block; // ou inline-block car la balise a est par défaut inline est dapté aux textes plus qu'à une apparence de bouton
width:100%;
height:100%;
padding:0; // pour justement supprimer l'héritage
color: white;
font-size: 1.3em;
margin: 0 35px;
text-decoration: none;
//rajoutez la couluer du fond
}
et bien sûr
a.menu:hover{
// changer la couleur de fond
}
A tester, j'espère que ça vous aide.
A après pour quelque chose fait à la va vite je trouves cela réussit sauf que justement moi la taille de ces menus et la couleur qui passe d'une teinte sombre à un orange je trouve cela trop contrasté.
A moins de vouloir s'adresser à des gens qui ont pas une bonne vue réduisez de moitié la hauteur de vos menus et ne mettez pas une couleur trop contrastée cela fera moins 'enfantin' et 'vide' et 'flottant' en donnant un aspect plus 'pro' (et précis) qui sinon est réussit.
Bien sur les mots entre ' ' sont à prendre avec prudence car ils rendent compte de mon avis uniquement.
Pourquoi utiliser uniquement l'héritage en CSS, ce serait plus simple avec des classes non?
Et puis c'est le lien qui permet la navigation donc si vous voulez que ce soit le lien qui réagisse(pour tout les comportements) c'est à lui u'il faut donner les propriétés que vous voulez:
nav li:hover
{
background-color: orange;
}
Voilà le problème vient de là, vous séparer le lien(balise a) de son interactivité.
Si vous voulez que le lien prenne toute la place il me semble qu'il faut simplement qu'il ait pour valeur 100% en longueur largeur ce qui correspondras à la taille du container et donc utilisez un type de container adapté pour lui.
Comme ceci je dirais:
a.menu
{
display:block; // ou inline-block car la balise a est par défaut inline est dapté aux textes plus qu'à une apparence de bouton
width:100%;
height:100%;
padding:0; // pour justement supprimer l'héritage
color: white;
font-size: 1.3em;
margin: 0 35px;
text-decoration: none;
//rajoutez la couluer du fond
}
et bien sûr
a.menu:hover{
// changer la couleur de fond
}
A tester, j'espère que ça vous aide.
A après pour quelque chose fait à la va vite je trouves cela réussit sauf que justement moi la taille de ces menus et la couleur qui passe d'une teinte sombre à un orange je trouve cela trop contrasté.
A moins de vouloir s'adresser à des gens qui ont pas une bonne vue réduisez de moitié la hauteur de vos menus et ne mettez pas une couleur trop contrastée cela fera moins 'enfantin' et 'vide' et 'flottant' en donnant un aspect plus 'pro' (et précis) qui sinon est réussit.
Bien sur les mots entre ' ' sont à prendre avec prudence car ils rendent compte de mon avis uniquement.
Maitre2B
Messages postés
341
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
33
16 mai 2014 à 19:05
16 mai 2014 à 19:05
Augmenter la taille des liens ne fonctionne pas
nav a
{
width: 100%;
height: 100%;
color: white;
text-decoration: none;
}
Je ne vois pas trop quoi faire, surtout sachant que je n'ai jamais eu ce problème :/
nav a
{
width: 100%;
height: 100%;
color: white;
text-decoration: none;
}
Je ne vois pas trop quoi faire, surtout sachant que je n'ai jamais eu ce problème :/
Maitre2B
Messages postés
341
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
33
18 mai 2014 à 00:27
18 mai 2014 à 00:27
Quelqu'un d'autre aurait une idée ? :x
telliak
Messages postés
3663
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
25 juin 2024
876
18 mai 2014 à 04:12
18 mai 2014 à 04:12
Salut,
Désolé, je n'ai pas d'idée, la méthode que tu utilises nécessitera toujours de cliquer sur le texte dans la mesure où les liens sont définis sur des textes (li) et non sur des images.
C'est le cas pour bien des sites et cela ne choque en rien.
Désolé, je n'ai pas d'idée, la méthode que tu utilises nécessitera toujours de cliquer sur le texte dans la mesure où les liens sont définis sur des textes (li) et non sur des images.
C'est le cas pour bien des sites et cela ne choque en rien.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Marlocq
Messages postés
117
Date d'inscription
mardi 19 novembre 2013
Statut
Membre
Dernière intervention
10 septembre 2023
21 mai 2014 à 12:45
21 mai 2014 à 12:45
Le a href défini l'ancre donc le lien si tu préfère
Si tu modifie la taille du ul tu ne modifie pas la taille de ton bouton mais juste de l'ul
Si tu modifie la taille d'un li tu a le même cas de figure
Enfin un margin déplace un conteneur sur le coté mais n'agrandi pas la zone cliquable C'est un padding qui le modifie la taille de ta boite en mettant une zone tout autour de ton élément.
Tu dois donc modifier la taille de ton ancre par le padding
Je te met le code ici tu n'aura plus qu'a remettre les valeurs que tu veux pour que ça ressemble plus à ce que tu attends la mise en page...
nav
{
margin-top: -16px;
text-align: center;
height: 80px;
background-color: #3D4955;
}
nav ul
{
padding: 27px 0px 0px 0px;
}
nav li
{
display: inline;
float: left;
list-style: none;
border: 2px solid #3D4955;
margin-right: -4px;
}
nav a
{
color: white;
font-size: 1.3em;
text-decoration: none;
padding: 29px 15px 35px 15px;
background-color: #5B6A7A;
}
nav a:hover
{
background-color: orange;
}
Si tu modifie la taille du ul tu ne modifie pas la taille de ton bouton mais juste de l'ul
Si tu modifie la taille d'un li tu a le même cas de figure
Enfin un margin déplace un conteneur sur le coté mais n'agrandi pas la zone cliquable C'est un padding qui le modifie la taille de ta boite en mettant une zone tout autour de ton élément.
Tu dois donc modifier la taille de ton ancre par le padding
Je te met le code ici tu n'aura plus qu'a remettre les valeurs que tu veux pour que ça ressemble plus à ce que tu attends la mise en page...
nav
{
margin-top: -16px;
text-align: center;
height: 80px;
background-color: #3D4955;
}
nav ul
{
padding: 27px 0px 0px 0px;
}
nav li
{
display: inline;
float: left;
list-style: none;
border: 2px solid #3D4955;
margin-right: -4px;
}
nav a
{
color: white;
font-size: 1.3em;
text-decoration: none;
padding: 29px 15px 35px 15px;
background-color: #5B6A7A;
}
nav a:hover
{
background-color: orange;
}
Maitre2B
Messages postés
341
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
33
31 mai 2014 à 17:05
31 mai 2014 à 17:05
Problème résolu !
Pour ceux ayant un problème similaire, il suffit de modifier le code HTML de navigation pour que la balise de lien <a> englobe <li>
C'est à dire:
<nav>
<ul>
<a href="index.html"><li>Accueil</li></a>
</ul>
</nav>
De ce fait, cliquer sur le <li> utiliser le lien
Pour ceux ayant un problème similaire, il suffit de modifier le code HTML de navigation pour que la balise de lien <a> englobe <li>
C'est à dire:
<nav>
<ul>
<a href="index.html"><li>Accueil</li></a>
</ul>
</nav>
De ce fait, cliquer sur le <li> utiliser le lien
16 mai 2014 à 12:03
Je ne suis pas du tout fier de ce site car je le trouve laid et assez terne (pas assez de couleurs) mais je n'ai pas spécialement beaucoup de temps à m'y consacrer.
Dès que j'ai mon PC, je testerai ! :)
Merci