Bonjour,
Par rapport à ta navigation, tu l'as construite différemment que celle d'Elegance Design. Tu as utilisé des images faites graphiquement que tu as rendu cliquable en rajoutant des liens derrière. Or généralement les navigations comme celles de ED se font avec du texte et du CSS seulement.
Je te montre un exemple :
TEXTE
TEXTE2
CODE HTML à mettre sur ta page d'accueil ou dans un message
- Code:
-
<div class="banane">TEXTE</div><div class="banane">TEXTE2</div>
CODE CSS à mettre dans la feuille de CSS
- Code:
-
.banane {
background-color: #000000;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
text-align: center;
color: #FFFFFF;
width: 30%;
}
Tu peux remplacer le mot "banane" par celui que tu veux mais il faut que les deux mots coïncident sinon ça ne marchera pas. Il ne faut surtout pas oublier non plus de mettre le petit "." devant banane dans la feuille de CSS
background-color correspond à la couleur de fond, ici noire.
border-left correpond à la bordure blanche à gauche, 5px est sa taille (tu peux mettre la valeur que tu souhaites bien entendu), solid signifie qu'elle est en trait plein, mais tu peux aussi avoir dotted, dashed etc...
border-right c'est la bordure à droite.
text-align : center, centre ton texte
color correspond à la couleur du texte.
width correspond à la largeur du tout
Après il faut que tu rajoutes les liens derrière en entourant chaque "div" par le même code que tu as utilisé c'est à dire :
- Code:
-
<a href="TON LIEN" target="_blank"></a>
A noter que l'ajout de
- Citation :
- target="_blank"
ouvrira ton lien dans une autre page que celle où tu te trouves. Si tu veux rester sur la même page il faut le retirer.
Nous aurons donc ceci :
- Code:
-
<a href="TON LIEN" target="_blank"><div class="banane">TEXTE</div></a><a href="TON LIEN" target="_blank"><div class="banane">TEXTE</div></a>
TEXTE
TEXTE2
Pour le changement de couleur quand tu passes la souris sur ton lien tout se passe dans le CSS. Reprenons notre code du début :
- Code:
-
.banane {
background-color: #000000;
border-left: 5px solid #FFFFFF;
border-right: 5px solid #FFFFFF;
text-align: center;
color: #FFFFFF;
width: 30%;
}
Ceci est le lien présenté normalement, sans aucun effet quand on passe la souris dessus. Si tu veux un quelconque effet sur le texte, la couleur de fond, des bordures etc... quand tu passes ta souris dessus, il faut rajouter devant banane : ":hover"
Par exemple :
- Code:
-
.banane:hover {
background-color: #FFFFFF;
border-left: 5px solid #000000;
border-right: 5px solid #000000;
text-align: center;
color: #000000;
width: 30%;
}
Voilà je crois que j'ai fais le tour, si tu as un soucis n'hésite pas