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 :





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

Oulala, beaucoup d'informations ! Je vais essayer...Je te remercie.

J'ai mis des images graphiques car je ne savais pas comment faire avec du texte normal :s

Y'a pas de soucis ^^
Hésite pas si quelque chose t'échappe

On pourrait continuer avec tes images. Mais pour avoir un changement de couleur il faudrait que tu crées une seconde image avec les couleurs que tu souhaites et la faire apparaître à la place de la première quand on passe la souris.

Alors, ça ne me donne ceci :

Code:

<a href="http://pegase-annonces.forumactif.com/les-elevages-f3/"><div class="banane">.Elevages.</div></a>

Si je veut réduire la largeur, je réduis le nombre de pourcentage dans le CSS ou je l'augmente ?

Ah, l'histoire avec les images, ça m'intéresse également !

PS : Evite les doubles posts à l'avenir. C'est sanctionné

Si tu veux réduire la largeur il faut baisser le pourcentage

Pour les images :

Code:

<a href="TON LIEN" target="_blank"><img src="LIEN DE LA PREMIERE IMAGE" onMouseOver="this.src='LIEN DE LA SECONDE IMAGE'" onMouseOut="this.src='LIEN DE LA PREMIERE IMAGE'" /></a>

Exemple :

Double post = poser une questre autre que le sujet d'origine ?

Merci pour ta réponse tout de même.

C'est parfait en ce qui concerne la navigation, ça me donne ce résultat :

Spoiler:

Cependant, j'aimerais savoir comment supprimer les soulignements noirs en dessous des liens ?

Le double post c'est quand tu mets deux messages d'affilés.
Au lieu de poster :
"Ah, l'histoire avec les images, ça m'intéresse également !"
à la suite, il faut que tu édites (bouton en haut à droite de ton message) ton message d'au-dessus et que tu l'ajoutes à la suite de :
"Si je veut réduire la largeur, je réduis le nombre de pourcentage dans le CSS ou je l'augmente ?"

Je ne vois pas de soulignements noirs sur ton forum °°

Ok ! Désolée !


Alors, j'ai mis tous les liens en transparence et pourtant... moi je voie ceci quand je ne pose pas ma souris dessus...

Ah oui c'est parce que tu es sous Internet Explorer x)
Pour les retirer j'ai réussi qu'avec un seul code

Code:

a {
text-decoration: none !important;
}

Seulement ce code t'enlève le soulignement d'absolument tout les liens

Oui, c'est le code que j'ai déjà mis mais qui ne foncitonne pas avec IE apparement...mais si ça concerne seulement IE ça me va :p

Je peux poser d'autres questions sur un autre sujet mais toujours sur le thème de la page d'accueil ?

Ah ? Ça avait fonctionné chez moi °° Oui c'est IE qui est méchant Faut le mettre à la poubelle x)

Mm le mieux c'est que j'archive ce sujet, et tu en ouvres un autre avec un bon titre. C'est mieux pour l'archivation