Se connecter / S'enregistrer
Votre question

HTML, problème de liens.

Tags :
  • Png
  • Programmation
Dernière réponse : dans Programmation
20 Août 2009 20:56:26

Bonjour à tous. :) 

Voilà j'ai un problème de liens dans ma page internet.
C'est-à-dire que il est impossible de cliquer sur le bouton et de plus il n'y pas "la petite main" qui apparait.

Bref, je stop le blabla, je vous envoie ce que j'ai fait :

HTML :
  1. <html>
  2. <head><title>Security TEAM - Virus, Spyware : la solution</title>
  3. <link rel="stylesheet" href="style.css" type="text/css" />
  4. </head>
  5. <body>
  6.  
  7.  
  8.  
  9. <SPAN style="position: absolute; top: 10px; left: 130px;">
  10. <img src="header.png" class="" width=740 border=0 class="thumbnail">
  11.  
  12. <img src="accueil1.png" class="img2" alt="img2" onmouseover="this.src='accueil2.png';" onmouseout="this.src='accueil1.png';"/>
  13.  
  14. <img src="securite1.png" class="img3" alt="img3" onmouseover="this.src='';" onmouseout="this.src='';"/>
  15.  
  16. <img src="virus1.png" class="img4" alt="img4" onmouseover="this.src='';" onmouseout="this.src='';"/>
  17.  
  18. <img src="forum1.png" class="img5" alt="img5" onmouseover="this.src='';" onmouseout="this.src='';"/>
  19.  
  20.  
  21.  
  22. <p>
  23. <FONT COLOR="#FFFFFF" style="font-size:20px">
  24. Bienvenue sur Security TEAM
  25. </FONT>
  26.  
  27. <br/>
  28. <br/>
  29. Bonjour et bienvenue à tous sur Security TEAM, le site qui vous aidera à lutter contre les toutes sortes de virus
  30. qui ont décidés de prendre votre ordinateur comme résidence.
  31. </p>



CSS:
  1. body
  2. {
  3. background: url('fond-page.png');
  4. }
  5.  
  6.  
  7. .img2
  8. {
  9. Display: block;
  10. left: 20px;
  11. margin-left: 145px;
  12. margin-top: -33px;
  13. }
  14.  
  15. .img3
  16. {
  17. Display: block;
  18. left: 50px;
  19. margin-left: 255px;
  20. margin-top: -27px;
  21. }
  22.  
  23. .img4
  24. {
  25. Display: block;
  26. left: 50px;
  27. margin-left: 365px;
  28. margin-top: -27px;
  29. }
  30.  
  31. .img5
  32. {
  33. Display: block;
  34. left: 50px;
  35. margin-left: 475px;
  36. margin-top: -27px;
  37. }
  38.  
  39. .img6
  40. {
  41. Display: block;
  42. width: 181px;
  43. left: 50px;
  44. margin-left: 697px;
  45. margin-top: -46px;
  46. }
  47.  
  48. .img7
  49. {
  50. Display: block;
  51. width: 500px;
  52. left: 50px;
  53. margin-left: -230px;
  54. margin-top: 20px;
  55. }
  56.  
  57. .groove
  58. {
  59. border: 2px groove white
  60. padding-top: 10px;
  61. padding-bottom: 20px;
  62. margin: 100px;
  63. margin-top: 40px;
  64. background-color: white;
  65. }
  66.  
  67. .groove2
  68. {
  69. border: 2px groove white
  70. padding-top: 10px;
  71. padding-bottom: 0px;
  72. margin: 100px;
  73. margin-top: -90px;
  74. background-color: white;
  75. }
  76.  
  77.  
  78.  
  79. h4
  80. {
  81. text-align: right;
  82. font-family: arial;
  83. }
  84.  
  85.  
  86. p
  87. {
  88. width: 700px;
  89. text-align: justify;
  90. background: url('bg_debut_contenu5.png') ;
  91. padding-top : 20px;
  92. padding-left : 20px;
  93. padding-right : 20px;
  94. padding-bottom : 20px;
  95. border: 1px solid white;
  96.  
  97. }
  98.  
  99. h1
  100. {
  101. Color: white;
  102.  
  103. }


Voilà, je ne sais pas si vous comprenez vraiment ce que j'essaie de faire.
En faite j'ai placer les bouton ( image) sur une autre image le header.
Mais vous verrez peut-être mieux avec un screen :



Je vous remercie infiniment de votre aide.
Bonne soirée :hello: 

Autres pages sur : html probleme liens

20 Août 2009 21:27:23

Salut,
tu dis que tu as un problème de lien mais je ne vais aucune balise <a></a> dans
ton code HTML ...
20 Août 2009 21:48:12

Oops, oui excuse moi, je les avaient bien placées.
Je les ait retirés lorsque j'ai pris le code désolé.

Donc enfaite je les avaient placés comme sa :

  1. <html>
  2. <head><title>Security TEAM - Virus, Spyware : la solution</title>
  3. <link rel="stylesheet" href="style.css" type="text/css" />
  4. </head>
  5. <body>
  6.  
  7.  
  8.  
  9. <SPAN style="position: absolute; top: 10px; left: 130px;">
  10. <img src="header.png" class="" width=740 border=0 class="thumbnail">
  11.  
  12. <a href="index.html">
  13. <img src="accueil1.png" class="img2" alt="img2" onmouseover="this.src='accueil2.png';" onmouseout="this.src='accueil1.png';"/>
  14. </a>
  15.  
  16. <a href="index.html">
  17. <img src="securite1.png" class="img3" alt="img3" onmouseover="this.src='';" onmouseout="this.src='';"/>
  18. </a>
  19.  
  20. <a href="index.html">
  21. <img src="virus1.png" class="img4" alt="img4" onmouseover="this.src='';" onmouseout="this.src='';"/>
  22. </a>
  23.  
  24. <a href="index.html">
  25. <img src="forum1.png" class="img5" alt="img5" onmouseover="this.src='';" onmouseout="this.src='';"/>
  26. </a>
  27.  
  28.  
  29. <p>
  30. <FONT COLOR="#FFFFFF" style="font-size:20px">
  31. Bienvenue sur Security TEAM
  32. </FONT>
  33.  
  34. <br/>
  35. <br/>
  36. Bonjour et bienvenue à tous sur Security TEAM, le site qui vous aidera à lutter contre les toutes sortes de virus
  37. qui ont décidés de prendre votre ordinateur comme résidence.
  38. <br/><br/>


Encore désole,
Bonne soirée :hello: 
Contenus similaires
20 Août 2009 22:00:18

Pourquoi as-tu rajouté du JavaScript ?
A quoi sert les 'OnMouseOver' et 'OnMouseOut' ?
Je pense qu'il ne sont pas d'une grande utilité et que ce sont eux qui bloquent tes liens ...
Essaye en les enlevant ...
20 Août 2009 22:15:15

Ben j'aurais voulu qu'au passage de la souris le bouton change de couleur, c'est pour ça que je les ait mis !!

Je viens tout de même de tester mais en vain..

Merci de ton aide :) 
20 Août 2009 22:21:59

OK.
Tu peux également faire ça en CSS !
Est-ce que tu les as enlevé ?
Pour faire ça en CSS, t'as pleins de tutos partout,
mais je viens de trouver un truc :
<!-- Code HTML -->
<a href="tonlien.html" class="img1"><img src="tonimage.gif"/></a>
<!-- Fin -->

/* Code CSS */
.img1
{
img: tonimage.gif /* Lorsqu'elle n'est pas survolée */
}
.img1:hover
{
img: tonimageausurvol.gif /* Lorsqu'elle est survollée */
}
/* FIN */

J'ai pas encore testé ...
Mais il faut par contre que tes deux images aient la même taille ...
a+
20 Août 2009 22:28:24

Ah oui oui je connais cette méthode, je ne l'avais pas encore testée, désolé.
je vais tester sa de suite et je te dis quoi !
20 Août 2009 22:32:46

Super, apparemment le lien à l'air de fonctionner.
Seulement, problème, le bouton ne change pas lorsque je passe la souris dessus.

Et une deuxième chose, il y a un gros encadrer bleu autour du bouton qui fait pas très joli... Aurais-tu une solution ?

Une dernière chose, je ne comprend pas pourquoi :

<a href="tonlien.html" class="img1"><img src="tonimage.gif"/></a>

.img1
{
img: tonimage.gif /* Lorsqu'elle n'est pas survolée */
}

Tu mets deux fois la même images non ?
Ne pourrais-je pas tout simplement enlever le "img: tonimage.gif /* Lorsqu'elle n'est pas survolée */" ?
20 Août 2009 22:56:37

Super j'ai trouver le soucis de la bordure qui entoure le bouton, il suffisait de rajouter cette commande dans le css :

a img {border: none;}
20 Août 2009 22:57:10

  1. img a {
  2. border: none; /*ou 0 */
  3. }


  1. img a:hover {
  2. background: url(images/autreimages.jpg);
  3. }
20 Août 2009 23:02:08

Salut, allstar.

Voilà cette commande:

1. img a:hover {
2. background: url(images/autreimages.jpg);
3. }

Elle porte pour toute les images non ?
Or moi je faisais les images à partir du logiciel les boutons ( C'est-à-dire, le bouton d'accueil il y avait déjà accueil écrit dessus, ect... )

Me comprends-tu ?

En tous cas merci beaucoup à tous les deux :) 
20 Août 2009 23:15:12

Oui c'est pour tout les img qui ont un lien.
Si veux le faire que pour une seul image à la fois, tu donne un id a ton image:

  1. <img id="image1" src... />


  1. #image1 a {
  2. ...
20 Août 2009 23:19:23

Quelle est la différence entre un id et un class et je ne comprend pas très bien pourquoi tu rajoute un a dans le css.
20 Août 2009 23:26:33

ID sert à distingué UN seul élément et class plusieurs ils ont la même fonction si ce n'est que id ne sert qu'a être utilisé une fois sur la page.

Parce que ton #image1 est un lien essaye sans ca passera peut être!
20 Août 2009 23:30:33

Bizarre, ça n'a pas l'air de fonctionner.
Même avec le "a".
est-ce que le # est indispensable ?
Mais je pense que même avec sa ne fonctionne pas.

Ne faut-il pas rajouter

#image1:hover ??
20 Août 2009 23:37:12

Je vais te montré ce que moi j'utilise pour ce genre de chose:

  1. <div id="menu">
  2. <ul>
  3. <li><a href="#">Lien</a></li>
  4. <li><a href="#">Lien</a></li>
  5. <li><a href="#">Lien</a></li>
  6. </ul>
  7. </div>


  1. #menu ul {
  2. margin-left: 10px;
  3. }
  4.  
  5. #menu li {
  6. line-height: 30px;
  7. list-style-type: none;
  8. float: left;
  9. margin-right: 5px;
  10. }
  11.  
  12. #menu li a {
  13. display: block;
  14. background: url(images/bg_menu_top.png);
  15. width: 100px;
  16. height: 30px;
  17. text-align: center;
  18. color: #666666;
  19. text-decoration: none;
  20. font-weight: bold;
  21. font-size: 10px;
  22. }
  23.  
  24. #menu li a:hover {
  25. display: block;
  26. background: url(images/bg_menu_top_active.png);
  27. width: 100px;
  28. height: 30px;
  29. text-align: center;
  30. color: #ffffff;
  31. text-decoration: none;
  32. font-weight: bold;
  33. font-size: 10px;
  34. }
20 Août 2009 23:39:07

Ah ouki, et le "li" il sert à quoi ?
20 Août 2009 23:43:16

li défini un élément dans une liste (ul)
20 Août 2009 23:52:17

Je teste sa de suite !!
20 Août 2009 23:56:34

Ben apparemment, ça n'a pas l'air de fonctionner.
Je fais sans doute une mauvaise manipulation.
20 Août 2009 23:58:18

Vu que tu as du mal, pourquoi ne pas installé un kit graphique?
21 Août 2009 00:06:25

L'utilisation d'un kit graphique ne me permettrais pas d'apprendre, ou en tous cas, beaucoup moins vite.
Mais bon, de toute façon ce n'est qu'un plus dans l'esthétique, ma question première était de pouvoir mettre les liens ce que j'ai pu réussi à faire grâce à votre aide.

Suis-je si nul que ça ? :) 

Pour tout te dire, je n'avais pas vraiment envie de recommencer tout mon menu, donc j'ai remplacé simplement sans faire trop attention, je réessayerais demain, si j'ai le courage, sinon c'est pas trop grave.

Merci de votre aide à tous les deux.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS