Sujet Précédent Sujet Suivant

(css/HtmI) bouton menu impossible à coder

Fermé
Winners05 Messages postés 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 - 15 avril 2012 à 21:12
Rodolphe_ Messages postés 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 - 17 avril 2012 à 17:47
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
15 avril 2012 à 21:44
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 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
15 avril 2012 à 22:05
c'est surtout qu'il te manques la fermeture de la balise <a> à savoir: </a>
0
Réponse 3 / 12
Winners05 Messages postés 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
16 avril 2012 à 00:31
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
Modifié par Rostov le 16/04/2012 à 09:09
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 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
16 avril 2012 à 09:12
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 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
16 avril 2012 à 20:13
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 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
Modifié par Rodolphe_ le 16/04/2012 à 20:28
#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 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
16 avril 2012 à 20:41
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 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
16 avril 2012 à 21:07
ç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 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
16 avril 2012 à 21:19
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 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
17 avril 2012 à 04:27
ça marche pas !
S'il vous plait aider moi !
0
Réponse 11 / 12
Winners05 Messages postés 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
17 avril 2012 à 07:01
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 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 311
17 avril 2012 à 09:57
Cool =)
Sujet résolu alors ?
0
Rodolphe_ Messages postés 1498 Date d'inscription samedi 7 mai 2005 Statut Membre Dernière intervention 20 décembre 2014 285
17 avril 2012 à 17:47
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 62 Date d'inscription dimanche 4 mars 2012 Statut Membre Dernière intervention 8 mars 2013 4
Modifié par Winners05 le 17/04/2012 à 07:18
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

Quel est la touche shift sur le clavier
paoade -
PRIPRI -

8 réponses
les entrées et les sortées
oussman -
MarsuGL -

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

4 réponses