La puissance des feuilles de style nous permet de faire des choses pour embellir nos pages. On peut ainsi créer divers effets par du simple code CSS.
C’est le cas pour le code qui suit. Il permet de créer un cadre avec une bordure sur un lien texte quand la souris survole celui-ci. Cet effet peut être utilisé ici pour créer un menu simple en lui donnant une petite touche qtylisée quand la souris vient le titiller.
Voyez donc plutôt au lieu de parler.
Le code CSS, à mettre dans le HEAD avec les balises style ou (encore mieux) dans une feuille de style externe :
#borderlinks a{
padding-left: 4px;
display: block;
width: 150px;
color: black;
text-decoration: none;
border: 1px solid white;
}
#borderlinks a:hover{
border: 1px solid black;
background-color: lightyellow;
}Le code HTML, à mettre là où vous souhaiter mettre vos liens :
<div id="borderlinks">
<a href="URL du lien1">Team-Masters 1</a>
<a href="URL du lien2">Team-Guyane 2</a>
<a href="URL du lien3">Team-Team 3</a>
<a href="URL du lien4">Team-Source 4</a>
</div>Il sufit de copier-coller, de modifier les couleurs, la police et de renseigner les liens dans le code HTML. Il n’y a pas plus simple. C’est sur Team-Masters bien sûr.
23 mai 2005
22 menus verticaux en CSS prêts à l’emploi
Un menu horizontal bien souligné
Un menu vertical avec un effet bouton en CSS
Un menu horizontal souligné au passage de la souris en CSS
Une barre de pagination tout en CSS
Un menu horizontal en CSS avec une barre de séparation
Un menu vertical hiérarchisé en CSS
Un menu vertical aux effets agréables en CSS
CSS : Un menu vertical en 3D
Créez un menu vertical avec effet de rollover en CSS