[Résolu] Etendre la couverture d'un lien

Bonjour,

Je tente d'étendre la couverture d'un lien, mais je n'y arrive pas...

J'ai des éléments border-radius autour des liens de mon menu, qui font 200px à la base...
Mais mes liens sont nettement plus courts et ne couvrent pas la moitié de mes encadrements.

Ex :[nav1             ]

J'ai tenté de mettre un "display: inline-block" sur mes liens et je leur ai imposé la longueur de leur conteneur mais la main permettant de cliquer sur le lien n'apparait toujours que quand je me positionne sur le lien en tant que tel et non simplement sur toute la longueur du li...

Voici ma CSS :

nav ul {
    display: inline-block;
}

nav > ul > li {
    font-size: 22pt;
    font-weight:300;
    width: 200px;
    height: 40px;
    background-color: #ff6767;
    border: 4px solid white;
    border-bottom-right-radius :  50px;
    border-top-right-radius: 50px;
    margin-bottom: 10px;
}


nav > ul > li:hover {
    width: 250px;
    background-color: #ff2626;
    margin-bottom: 10px;
}

nav > ul > li a:hover {
    display:inline-block;
    width:250px;
    color:#000;
    padding-left: 0;
}

Et mon fichier HTML :

    <nav>
        <ul>
            <li><a href="index.php?p=accueil">Accueil</a></li>
            <li><a href="index.php?p=apropos">&Agrave; propos</a></li>
            <li><a href="index.php?p=actions">Nos actions</a>
            <li><a href="index.php?p=presse">Presse</a></li>
            <li><a href="index.php?p=contact">Contact</a></li>
        </ul>
    </nav>

Vous auriez une idée pour m'aider?

D'avance merci !
Modifié par Reka (24 Nov 2013 - 17:31)

Alors en fait tu ne peux pas redimensionner une balise <a> en largeur du coup il faut ruser et une solution un peu barbare mais efficace serait d'entourer tes <li> par les balises <a>

<nav>
        <ul>
           <a href="index.php?p=accueil"><li>Accueil</li></a>
           <a href="index.php?p=apropos"><li>&Agrave; propos</li></a>
        etc...
        </ul>
    </nav>

et tu arranges ton css pour cibler les bons attributs

nav ul {
    display: block;
}
nav > ul > a {
    font-size: 22pt;
    font-weight:300;   
    margin-bottom: 10px; 
}

nav > ul > a > li{
    width: 200px;
    height: 40px;
    background-color: #ff6767;
    border: 4px solid white;
    border-bottom-right-radius :  50px;
    border-top-right-radius: 50px;
    margin-bottom: 10px;

}

nav > ul > a > li:hover{
    width: 250px;
    background-color: #ff2626;
    margin-bottom: 10px;
}

voilà bon c'est une solution

Merci, Peter

J'ai trouvé une autre solution qui consiste à donner une largeur à "a" et non seulement à "a:hover"

C'était là qu'était mon oubli pour que ça fonctionne !

Bonne soirée.

Pourquoi ne pas simplement appliquer un "display:block" sur tes liens et mettre un "line-height" équivalent à la hauteur de tes <li> ?
Au passage on peu parfaitement donner des dimensions aux liens, il suffit juste de changer leur "display" par défaut qui est "inline" et le passer à autre chose (et pour être tout à fait complet, les positions absolutes et les flottants permettent aussi la même chose).