Se connecter avec
S'enregistrer | Connectez-vous

You are not allowed to do this.

HTML, problème de liens.

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte

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: 

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 ...

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+

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 */" ?

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 :) 
Expert Programmation

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!
Expert Programmation

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. }

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.
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde