Améliorer mon menu Résolu

Question

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.

Afficher la suite

Robotobor · Answer

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.

Maitre2B · Answer

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 :/

Maitre2B · Answer

Quelqu'un d'autre aurait une idée ? :x

telliak · Answer

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.

Marlocq · Answer

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;
}

Maitre2B · Answer

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 englobe

C'est à dire: De ce fait, cliquer sur le

utiliser le lien

Améliorer mon menu

6 réponses

Votre réponse

Discussions similaires