(css/HtmI) bouton menu impossible à coder

Winners05 Messages postés 70 Statut Membre -  
Rodolphe_ Messages postés 1572 Statut Membre -
Bonjour les amis
J'ai un petit problème à-propos du codage des boutons de mon menu
mes bouton s'animent bien quand je passe avec le pointeur de ma sourie mais quand je clique rien ne se passe!

Exemple 1
Dans ce cas la le bouton change de forme mais quand je clique dessus il ne me dirige pas sur le site google
--------------------------------------------------------------------------------------------------------------------
le code html


<div id="bouton1"><a href="https://www.google.com/?gws_rd=ssl"></a></div>

le code CSS

#bouton1
{
background-image:url(../Arrier%20plan/under1.png);
width:97px;
height:75px;
}
#bouton1:hover
{
background-image:url(../Arrier%20plan/over1.png);
width:97px;
height:75px;
}

-------------------------------------------------------------------------------------------------------------
Exemple 2
Dans ce cas la le bouton change pas de forme(état hover) mais quand je clic dessus je me dirige vers google
--------------------------------------------------------------------------------------------------------------------
le code html


<div id="bouton1"><a href="https://www.google.com/?gws_rd=ssl"></div>

le code CSS

#bouton1
{
background-image:url(../Arrier%20plan/under1.png);
width:97px;
height:75px;
}
#bouton1:hover
{
background-image:url(../Arrier%20plan/over1.png);
width:97px;
height:75px;
}

-------------------------------------------------------------------------------------------------------------
Moi ce que je cherche, c'est quand je clique sur mon bouton de menu, il change d'état (hover) et me dirige vers un lien (exemple google) et aussi quand je passe le pointeur de la sourie il change d'état (hover)
enfin comme un menu normal


Merci d'avance pour vos réponses.
Amicalement un jeune étudiant
A voir également:

12 réponses

Réponse 1 / 12
ReDLoG
 
Ben faut mettre quelque chose dans ton lien sinon tu pourras tester tout le CSS du web, ton navigateur ne bougera pas d'un iota lol 
<div id="bouton1"><a href="http://www.google.com">Google</a></div>
0
Réponse 2 / 12
Rodolphe_ Messages postés 1572 Statut Membre 285
 
c'est surtout qu'il te manques la fermeture de la balise <a> à savoir: </a>
0
Réponse 3 / 12
Winners05 Messages postés 70 Statut Membre 4
 
ReDlog
merci ça marche, mais moi je ne veux pas avoir google sur mon bouton, j'ai mis www.google.com juste pour tester !

moi je veux que quand je clique sur mon bouton il change (hover) et me dirige vers le lien que je veux !

Mes boutons ont déjà leur texte avec photoshop cs5
0
Rostov
 
citation:Mes boutons ont déjà leur texte avec photoshop cs5

Faux avec Photoshop vous aurez une image. C'est donc cette image qu'il faut mettre dans le lien mais dans ce cas vous pouvez oublier la deuxième image au survol. Outre que ça pose des problémes lors des modifications et de la réutilsation des codes(il faudras une image par bouton alors si vous avez 30 boutons il vous faudra faire 30 images(60 si il y a un survol avec une autre images) et autant de fois écrire la même chose en changeant le nom de l'image, le texte des menus ne sera pas référencé alors que les titres des pages sont quelque chose d'essentiel à référencer).

Pour récapituler un lien:

<a href="ADRESSE DU LIEN">
TEXTE OU BOUTON DU LIEN
</a>

Sont écrit en majuscule ce que vous devez changer.
Le css pourra changer le fond(background-image) du moment que votre lien/balise a comporte quelque chose sinon vous n'aurez rien.

Avant de vous mettre au CSS vous ferez mieux d'être au top en HTML, la balise pour un hyperlien est une des choses les plus basiques et qu'il vous faudras tout le temps utiliser.
0
Réponse 4 / 12
AssassinTourist Messages postés 7838 Statut Contributeur 1 312
 
Bonjour,

Je ne suis pas sûr de comprendre. Vous voulez qu'avec un clic, le bouton change d'aspect, mais qu'il redirige en même temps ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
Winners05 Messages postés 70 Statut Membre 4
 
Oui assassintouriste
Je veux que quand je passe le curseur de ma sourie sur les bouton qu'ils changent mais aussi quand je clic le bouton change et me dirige vers le lien que je veux !
0
Réponse 6 / 12
Rodolphe_ Messages postés 1572 Statut Membre 285
 
#bouton1 a{
display: block ;
width:....
height: ...



sans ça, ton <a> est un élément en ligne et sans texte, il n'a pas de taille.
Donc en fait tu cliques sur une image vide.
0
Réponse 7 / 12
Winners05 Messages postés 70 Statut Membre 4
 
Merci je vais suivre vos consigne,je vous remercie une deuxième fois du fond du coeur Mr. Rodolphe
0
Réponse 8 / 12
Winners05 Messages postés 70 Statut Membre 4
 
ça marche mais j'ai un petit soucie quand je clique ou je passe le curseur ça change pas en mode hover pouvez-vous me corriger mon codage
---------------------------------------------------------------------------------------------------------------------------------------------
Html

<div id="bouton1"><a href="https://www.google.com/?gws_rd=ssl"><img src="../Arrier plan/under1.png" width="97" height="75"></a></div>

-----------------------------------------------------------------------------------------------------------------------------------------------
Css
#bouton1
{
background-image:url(../Arrier%20plan/under1.png);
width:97px;
height:75px;

display:block;
}
#bouton1:hover
{
background-image:url(../Arrier%20plan/over1.png);
width:97px;
height:75px;
display:block;

}
#bouton1 a:hover
{
background-image:url(../Arrier%20plan/over1.png);
display:block;
width:97;
height:75px;
}
------------------------------------------------------------------------------------------------------------------------------------------------
Merci d'avance
0
Réponse 9 / 12
Rodolphe_ Messages postés 1572 Statut Membre 285
 
Normal, ton image en hover est la même qu'en normal!
Selon son format (2 images en une en vertical ou horizontal), tu fais un décalage avec background-position (left, right, top ou bottom) , cela s'appelle le roll-over; ou alors tu en définit une autre.
0
Réponse 10 / 12
Winners05 Messages postés 70 Statut Membre 4
 
ça marche pas !
S'il vous plait aider moi !
0
Réponse 11 / 12
Winners05 Messages postés 70 Statut Membre 4
 
j'ai trouvé la solution moi même voila l'astuce mais quand même merci au gens du forum
voilà la solution

<a id="bouton1" href="https://www.google.fr/?gws_rd=ssl"></a> au lieu de <div id="bouton1"><a href="https://www.google.com/?gws_rd=ssl"></a></div>
le code css reste le même
#bouton1
{
background-image:url(../Arrier%20plan/under1.png);
width:97px;
height:75px;
}
#bouton1:hover
{
background-image:url(../Arrier%20plan/over1.png);
width:97px;
height:75px;
}
0
AssassinTourist Messages postés 7838 Statut Contributeur 1 312
 
Cool =)
Sujet résolu alors ?
0
Rodolphe_ Messages postés 1572 Statut Membre 285
 
c'est pas ce que je t'avais dis peut-être?
ton <a> n'avait pas de taille définie parce que pas de texte, voila pourquoi je t'ai dis de modifier le sélecteur en #bouton a pour lui affecter un display: block et un width.
Ça plus l'image en hover qui doit être différente.
0
Réponse 12 / 12
Winners05 Messages postés 70 Statut Membre 4
 
Problème résolu
j'ai trouvé la solution moi même voila l'astuce mais quand même merci au gens du forum
voilà la solution

<a id="bouton1" href="https://www.google.fr/?gws_rd=ssl"></a> au lieu de <div id="bouton1"><a href="https://www.google.com/?gws_rd=ssl"></a></div>
le code css reste le même
#bouton1
{
background-image:url(../Arrier%20plan/under1.png);
width:97px;
height:75px;
display:block;
}
#bouton1:hover
{
background-image:url(../Arrier%20plan/over1.png);
width:97px;
height:75px;
display:block;
}
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
menu caché
laurent -
ChariduP -

7 réponses
ou est la touche shift sur un clavier
Mathis -
Maelstrom -

4 réponses