Salut à tous !
J'ai un petit soucis avec les div et leur contenu (je me met au xhtml et css)
Donc je veux faire un calque a droite qui contient des menus séparé par des bordures avec un petit effet a:hover.
Cela fonctionne mais le soucis est que les menus ne sont pas collés aux bords du calques, ce qui n'est pas tres beau.
Voici le code dans le fichier html :
Code :
- <div class="navBar">
- <h3>Catégories</h3>
- <ul>
- <li><a href="#">menu 1</a></li>
- <li><a href="#">menu 2</a></li>
- <li><a href="#">menu 3</a></li>
- <li><a href="#">menu 4</a></li>
- <li><a href="#">menu 5</a></li>
- <li><a href="#">menu 6</a></li>
- </ul>
- </div>
|
Et voici le code dans le css :
Code :
- .navBar a:link{
- border-top: 1px solid #cccccc;
- }
- .navBar a:visited{
- border-top: 1px solid #cccccc;
- }
- .navBar a:hover{
- border-top: 1px solid #cccccc;
- background-color: #dddddd;
- }
- .navBar{
- margin-left: 75%;
- height: 200px;
- border: 1px solid black;
- padding: 1em;
- background-color: #eeeeee;
- font-size: 90%;
- }
- .navBar ul a:link {display: block;}
- .navBar ul {list-style: none; margin: 0; padding: 0;}
|
Merci de m'aider car la je ne vois pas... 
