Tom's Guide > Forum > Programmation > HTML, problème de liens.

HTML, problème de liens.

Forum Programmation : HTML, problème de liens.

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

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 :

Code :

<html>
<head><title>Security TEAM - Virus, Spyware : la solution</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<img src="header.png" class="" width=740 border=0 class="thumbnail">
<img src="accueil1.png" class="img2" alt="img2" onmouseover="this.src='accueil2.png';" onmouseout="this.src='accueil1.png';"/>
<img src="securite1.png" class="img3" alt="img3" onmouseover="this.src='';" onmouseout="this.src='';"/>
<img src="virus1.png" class="img4" alt="img4" onmouseover="this.src='';" onmouseout="this.src='';"/>
<img src="forum1.png" class="img5" alt="img5" onmouseover="this.src='';" onmouseout="this.src='';"/>
Bienvenue sur Security TEAM
Bonjour et bienvenue à tous sur Security TEAM, le site qui vous aidera à lutter contre les toutes sortes de virus
qui ont décidés de prendre votre ordinateur comme résidence.

CSS:

Code :

body
{
background: url('fond-page.png');
}
.img2
{
Display: block;
left: 20px;
margin-left: 145px;
margin-top: -33px;
}
.img3
{
Display: block;
left: 50px;
margin-left: 255px;
margin-top: -27px;
}
.img4
{
Display: block;
left: 50px;
margin-left: 365px;
margin-top: -27px;
}
.img5
{
Display: block;
left: 50px;
margin-left: 475px;
margin-top: -27px;
}
.img6
{
Display: block;
width: 181px;
left: 50px;
margin-left: 697px;
margin-top: -46px;
}
.img7
{
Display: block;
width: 500px;
left: 50px;
margin-left: -230px;
margin-top: 20px;
}
.groove
{
border: 2px groove white
padding-top: 10px;
padding-bottom: 20px;
margin: 100px;
margin-top: 40px;
background-color: white;
}
.groove2
{
border: 2px groove white
padding-top: 10px;
padding-bottom: 0px;
margin: 100px;
margin-top: -90px;
background-color: white;
}
h4
{
text-align: right;
font-family: arial;
}
p
{
width: 700px;
text-align: justify;
background: url('bg_debut_contenu5.png') ;
padding-top : 20px;
padding-left : 20px;
padding-right : 20px;
padding-bottom : 20px;
border: 1px solid white;
}
h1
{
Color: white;
}

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:

Message édité par omaplie le 20-08-2009 à 20:59:03

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Salut,
tu dis que tu as un problème de lien mais je ne vais aucune balise <a></a> dans
ton code HTML ...

------------------------------ www.globject.org
Répondre à wibix

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 :

Code :

<html>
<head><title>Security TEAM - Virus, Spyware : la solution</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<img src="header.png" class="" width=740 border=0 class="thumbnail">
<a href="index.html">
<img src="accueil1.png" class="img2" alt="img2" onmouseover="this.src='accueil2.png';" onmouseout="this.src='accueil1.png';"/>
</a>
<a href="index.html">
<img src="securite1.png" class="img3" alt="img3" onmouseover="this.src='';" onmouseout="this.src='';"/>
</a>
<a href="index.html">
<img src="virus1.png" class="img4" alt="img4" onmouseover="this.src='';" onmouseout="this.src='';"/>
</a>
<a href="index.html">
<img src="forum1.png" class="img5" alt="img5" onmouseover="this.src='';" onmouseout="this.src='';"/>
</a>
Bienvenue sur Security TEAM
Bonjour et bienvenue à tous sur Security TEAM, le site qui vous aidera à lutter contre les toutes sortes de virus
qui ont décidés de prendre votre ordinateur comme résidence.

Encore désole,
Bonne soirée :hello:

Répondre à omaplie

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

------------------------------ www.globject.org
Répondre à wibix

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

Message édité par omaplie le 20-08-2009 à 22:18:01

Répondre à omaplie

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 :

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


/* 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+

------------------------------ www.globject.org
Répondre à wibix

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 !

Répondre à omaplie

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

Message édité par omaplie le 20-08-2009 à 22:40:06

Répondre à omaplie

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

Répondre à omaplie

Code :

img a {
border: none; /*ou 0 */
}

Code :

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

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

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

Répondre à omaplie

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:

Code :

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

Code :

#image1 a {
...

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

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.

Message édité par omaplie le 20-08-2009 à 23:20:57

Répondre à omaplie

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!

Message édité par Allstar27 le 20-08-2009 à 23:27:04

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

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

Répondre à omaplie

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

Code :

<div id="menu">
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>

Code :

#menu ul {
margin-left: 10px;
}
#menu li {
line-height: 30px;
list-style-type: none;
float: left;
margin-right: 5px;
}
#menu li a {
display: block;
background: url(images/bg_menu_top.png);
width: 100px;
height: 30px;
text-align: center;
color: #666666;
text-decoration: none;
font-weight: bold;
font-size: 10px;
}
#menu li a:hover {
display: block;
background: url(images/bg_menu_top_active.png);
width: 100px;
height: 30px;
text-align: center;
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 10px;
}

Message édité par Allstar27 le 20-08-2009 à 23:37:33

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

Ah ouki, et le "li" il sert à quoi ?

Répondre à omaplie

li défini un élément dans une liste (ul)

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

Je teste sa de suite !!

Répondre à omaplie

Ben apparemment, ça n'a pas l'air de fonctionner.
Je fais sans doute une mauvaise manipulation.

Répondre à omaplie

Vu que tu as du mal, pourquoi ne pas installé un kit graphique?

------------------------------ Rémunère ton site
Hosting Favicon
Clic pas ici
Répondre à Allstar27

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.

Message édité par omaplie le 21-08-2009 à 00:06:50

Répondre à omaplie

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > HTML, problème de liens.

Aller à :

Aide |
Règles du forum

Il y a 1461 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,361 secondes

Liens