Améliorer mon menu [Résolu/Fermé]

Signaler
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
-
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
-
Bonjour,

J'ai crée en quelques heures un petit siteweb:

http://huissier-justice-paris.fr/index.html

Malheureusement, le menu laisse à désirer.
En effet, il faut cliquer pile sur le texte du menu alors que j'aimerais que ce soit la case.


Voici le code html et css:


<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="services.html">Nos services</a></li>
<li><a href="competences.html">Compétence territoriale</a></li>
<li><a href="contact.html">Nous contacter</a></li>
<li><a href="#">Liens utiles</a></li>
</ul>
</nav>

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;
padding: 29px 15px 35px 15px;
background-color: #5B6A7A;
}

nav a
{
color: white;
font-size: 1.3em;
margin: 0 35px;
text-decoration: none;
}

nav li:hover
{
background-color: orange;
}



Merci de votre aide.

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.
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
25
Merci beaucoup pour votre aide ainsi que pour vos conseils.
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
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
25
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 :/
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
25
Quelqu'un d'autre aurait une idée ? :x
Messages postés
3529
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
1 juillet 2020
748
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.
Messages postés
112
Date d'inscription
mardi 19 novembre 2013
Statut
Membre
Dernière intervention
29 mai 2020

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;
}
Messages postés
343
Date d'inscription
jeudi 29 octobre 2009
Statut
Membre
Dernière intervention
11 avril 2020
25
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