Mettre un menu sur la Page d'Acueil

[Love2me]

Bonsoir,

Bonne année 2011 ^^ Ce soir, j'aurai besoin de votre aide. J'aimerais réussir à faire cela sur ma Page d'Accueil :

Spoiler:

Et lorsqu'on passe le curseur dessus, j'aimerais que la "bande cliquable" change de couleur...

C'est possible ? Merci d'avance ^^

Mon forum est sous Phpbb2 ^^

[Lixyr]

Oui c'est possible. Il suffit de mettre des cadres modifiables sous hover par css.
Ca donne un truc comme ça :


1) Dans le CSS :

Code:


.cadre {
border-left: 3px solid blue;
border-right: 3px solid blue;
background-color:black;
text-align:center;
color:green;
width: 250px;}

.cadre:hover {
border-left: 3px solid purple;
border-right: 3px solid purple;
background-color:red;
text-align:center;
color:orange;}

Vous enregistrez.



2) Puis ensuite, là où vous voulez l'effet, vous faites ainsi :

Code:

<div class="cadre">MOT 1</span>
<div class="cadre">MOT 2</span>
<div class="cadre">MOT 3</span>
<div class="cadre">MOT 4</span>

Vous changez "mot 1", "mot 2" etc par le mot que vous voulez, un lien etc etc.
J'ai mis des couleurs différentes pour que vous puissiez comprendre par vous même à quoi correspond quoi dans le code.
Si vous avez des question, n'hésitez pas. ^^

[Love2me]

Merci beaucoup ^^ Seulement, les cadres ne sont pas centrés l'un a l'autre, les bordures bleus ne sont pas de la même taille, ainsi que les cadres :/

Spoiler:

Mais le plus embêtant, c'est lorsque je clique, par exemple, le mot 3; les mots 1 & 2 s'illuminent aussi au lieu que du 3 tout seul !

Spoiler:

Comment arranger cela SVP ? ^^

[Lixyr]

Effectivement, à envoyer le code comme ça à l'arrache j'avais pensé à un span puis je me suis rabattue sur la div pour que le retour à la ligne soit automatique puis au final j'ai fusionné les deux.
Pardonnez mon erreur.

Alors je m'explique en couleur :


Le code plein de fautes :

<div class="cadre">MOT 1</span>

Le code corrigé :

<div class="cadre">MOT 1</div>

Donc en regardant, au départ j'avais une première balise d'ouverture : une div, mais en balise de fermeture j'ai mis une span.
Il faut mettre une div en fermeture si on a une div en ouverture. ^^


Donc au final le code donne ceci :

Code:


<div class="cadre">MOT 1</div>
<div class="cadre">MOT 2</div>
<div class="cadre">MOT 3</div>
<div class="cadre">MOT 4</div>

Désolée pour l'erreur inattention.

[Love2me]

Merci ! Tout marche maintenant Merci ! ^^

[Lixyr]

Je t'en prie. ^^