Date de publication : Jul 25, 2012 10:2:10 AM
Le but est de rendre un ul / li, horzontal, avec des cases sur les éléments du menu, et que la case entière soit cliquable.
Pour cela, il faut mettre float: left sur le li, et rendre le a en display: block. Ensuite, on gère tout le padding et le border sur le a.
Ex :
HTML :
<ul class="directions">
<li class="texte">Filtrer par directions :</li>
<li class="case "><a href="/listeRapprochees">Toutes</a></li>
<li class="case selected"><a href="/listeRapprochees/B31">B31</a></li>
<li class="case "><a href="/listeRapprochees/410">410</a></li>
<li class="case "><a href="/listeRapprochees/0010">0010</a></li>
</ul>
CSS :
ul.directions {
list-style-type: none;
margin-bottom: 15px;
overflow: auto;
}
ul.directions li {
float: left;
}
ul.directions li.texte {
padding: 5px;
}
ul.directions li.case a {
padding: 5px;
border: 1px solid gray;
display: block;
text-decoration: none;
}
ul.directions li.selected a {
background-color: #003D4C;
color: white;
}