CSS pour lien

**lilie** Lun 13 Avr - 21:49

Pour les liens

Code à mettre dans ta feuille de css :

Code:: a.main:link, a.main:active, a.main:visited /*menu à block*/ { font-family: Verdana; font-size: 9px; text-transform: normal; background-color: #E6E9EC; text-align: center; text-decoration: none; font-weight: none; color: #272525; display: block; cursor: default; line-height : 10pt; border-left:3px solid #D6CCDB; } a.main:hover /*menu à block*/ { font-family: Verdana; font-size: 9px; text-transform: uppercase; background-color: #2F0655; text-align: center; text-decoration: none; font-weight: bold; color: #FFFFFF; display: block; cursor: default; line-height : 10pt; border-left:3px solid #FF0000; }

Explications
La première partie (a.main: link, active et visited), c'est la façon dont va s'afficher ton lien lorsque tu ne le survole pas, mais aussi quand il est actif (une fois que tu viens juste de cliquer dessus) et une fois qu'il a été visité. La deuxième parte (a.main: hover) c'est l'affichage de ton lien quand tu le survole.

Dans chacune des parties, tu peux modifier :

font-family : remplace Verdana par la police de ton choix xD
font-size : taille du texte
text-transform : uppercase pour que le texte soit en majuscules, lowercase pour des minuscule et normal pour qu'il soit comme tu l'a tapé
background-color: couleur du fond du lien, tu peux choisir la même que ton arrière plan ou une autre
text-align: left, center, right pour l'alignement de ton texte dans la "case du lien"
color: couleur du texte
line-height : hauteur de la "case" où va être ton lien
border-left:
ça c'est pour mettre une bordure à gauche, tu peux aussi en mettre une
à droite (border-right), modifier l'épaisseur, la couleur...

Voilà pour le CSS, maintenant dans le code html de ta page d'acceuil, tu rajoute simplement dans tes balises de code des liens : class="main"

Ce qui devrait te donner quelque chose comme :

Code:: [url=http://dream-crea.forumactif.com/welcome.html]Home[/url]

Pour avoir la largeur de case des liens que vous souhaitez, mettez votre menu dans un tableau :

Code:: [table cellspasing="0" width="" border="0" cellpadding="0"][tr][td width="LARGEUR"] [url=http://dream-crea.forumactif.com/welcome.html]Home[/url] [url=http://dream-crea.forumactif.com/welcome.html]Home[/url] [/td][/tr][/table]

Remplace "LARGEUR" par la largeur que doit faire ton menu =)

Voilà, s'il y a des questions, hésitez pas =)