Problème de liens sur des images
Résolu
ALC
-
ALC -
ALC -
Bonjour,
Je suis en train de réaliser une expo virtuelle, donc de monter des pages Html avec principalement du texte et des images. Sur une de mes pages, j'ai inséré plusieurs images. J'ai mis un lien vers une autre page sur chacune de ces images mais je rencontre certains problèmes.
Lorsque j'ai positionné mes images sur la page avec la css, un de mes liens est devenu complètement inactif, c'est comme s'il n'existait pas. Pour les autres, le lien n'est cliquable qu'a certains endroits de l'image et n'englobe pas la totalité de l'image comme je le voudrais.
Voilà mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/screen1.css">
</head>
<body>
<div id="container">
<div id="en-tete">
<img src="images/site/Logo_AJC_seul.jpg"/>
<p id="titre_expo"> ytkedtktetyjr</p>
</div>
<div id="expo">
<div id="manuscrit1_2">
<a href="pages_zoomify/canot1.html">
<img class="image1" src="images/photos_expo/116p.jpg" alt="" />
</a>
<a href="pages_zoomify/canot2.html">
<img class="image2" src="images/photos_expo/117p.jpg" alt="" />
</a>
</div>
<div id="manuscrit1_3">
<a href="notices_images/Femme_canot.html">
<img class="image3" src="images/photos_expo/plancheMartin2 - Copie.jpg" alt="" />
</a>
</div>
<div id="titre_ouvrage1">
<p> ghuytrecvg </p>
</div>
<div id="manuscrit1_1">
<a href="pages_zoomify/image_soupe.html">
<img src="images/photos_expo/Dic_Andre_751_2.jpg" alt=""/></a>
</div>
<div id="texte1">
<p>
ujyxdjkxduktsxtykxyix </p>
</div>
</div>
<div id="fleches_navigation">
<img class="precedent" src="images/site/flecheP.png" alt="passez à la page précédente"/>
<img class="suivant" src="images/site/flecheS.png" alt="passez à la page suivante"/>
</div>
</div>
</body>
</html>
Et ma CSS :
* {
margin: 0;
border: none;
padding: 0;
}
body {
background-color: #370019/*bleu : #135556*/;
color: white;}
#container {
height:450px;
position:absolute;
z-index:-2;
width:860px;
margin-left:250px;
margin-top: 30px;
background-color: #520022/* bleu : #35A0A3*/;
padding: 30px;}
#en-tete {
height: 100px;
}
#en-tete img {
margin-left:-18px;
margin-top:-20px;
}
#ajc {
position:relative;
margin-left:-45px;
width:260px;
text-align:center;
padding-top:10px;
font-size:small;
}
#texte1 {
position:relative;
padding-left:330px;
width:500px;
text-align:justify;
text-indent:20px;
font-family: "Verdana", Arial, sans-serif;
font-size: small;
margin-top:90px;}
#titre_ouvrage1 {
text-align:justify;
text-indent:20px;
font-family: "Verdana", Arial, sans-serif;
font-size: small;
padding-left:560px;
margin-top:-200px;
width: 300px;
text-align:center;
font-family:Times,Arial,sans-serif;}
#manuscrit1_1 {
padding-left:580px;
margin-top: 50px;
}
#manuscrit1_3 {
position: relative;
padding-left:288px;
margin-top: -305px;}
J'avoue j'ai du mal à voir mon erreur, est-ce que quelqu'un pourrait me donner un coup de main, svp ?
Merci d'avance.
Je suis en train de réaliser une expo virtuelle, donc de monter des pages Html avec principalement du texte et des images. Sur une de mes pages, j'ai inséré plusieurs images. J'ai mis un lien vers une autre page sur chacune de ces images mais je rencontre certains problèmes.
Lorsque j'ai positionné mes images sur la page avec la css, un de mes liens est devenu complètement inactif, c'est comme s'il n'existait pas. Pour les autres, le lien n'est cliquable qu'a certains endroits de l'image et n'englobe pas la totalité de l'image comme je le voudrais.
Voilà mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/screen1.css">
</head>
<body>
<div id="container">
<div id="en-tete">
<img src="images/site/Logo_AJC_seul.jpg"/>
<p id="titre_expo"> ytkedtktetyjr</p>
</div>
<div id="expo">
<div id="manuscrit1_2">
<a href="pages_zoomify/canot1.html">
<img class="image1" src="images/photos_expo/116p.jpg" alt="" />
</a>
<a href="pages_zoomify/canot2.html">
<img class="image2" src="images/photos_expo/117p.jpg" alt="" />
</a>
</div>
<div id="manuscrit1_3">
<a href="notices_images/Femme_canot.html">
<img class="image3" src="images/photos_expo/plancheMartin2 - Copie.jpg" alt="" />
</a>
</div>
<div id="titre_ouvrage1">
<p> ghuytrecvg </p>
</div>
<div id="manuscrit1_1">
<a href="pages_zoomify/image_soupe.html">
<img src="images/photos_expo/Dic_Andre_751_2.jpg" alt=""/></a>
</div>
<div id="texte1">
<p>
ujyxdjkxduktsxtykxyix </p>
</div>
</div>
<div id="fleches_navigation">
<img class="precedent" src="images/site/flecheP.png" alt="passez à la page précédente"/>
<img class="suivant" src="images/site/flecheS.png" alt="passez à la page suivante"/>
</div>
</div>
</body>
</html>
Et ma CSS :
* {
margin: 0;
border: none;
padding: 0;
}
body {
background-color: #370019/*bleu : #135556*/;
color: white;}
#container {
height:450px;
position:absolute;
z-index:-2;
width:860px;
margin-left:250px;
margin-top: 30px;
background-color: #520022/* bleu : #35A0A3*/;
padding: 30px;}
#en-tete {
height: 100px;
}
#en-tete img {
margin-left:-18px;
margin-top:-20px;
}
#ajc {
position:relative;
margin-left:-45px;
width:260px;
text-align:center;
padding-top:10px;
font-size:small;
}
#texte1 {
position:relative;
padding-left:330px;
width:500px;
text-align:justify;
text-indent:20px;
font-family: "Verdana", Arial, sans-serif;
font-size: small;
margin-top:90px;}
#titre_ouvrage1 {
text-align:justify;
text-indent:20px;
font-family: "Verdana", Arial, sans-serif;
font-size: small;
padding-left:560px;
margin-top:-200px;
width: 300px;
text-align:center;
font-family:Times,Arial,sans-serif;}
#manuscrit1_1 {
padding-left:580px;
margin-top: 50px;
}
#manuscrit1_3 {
position: relative;
padding-left:288px;
margin-top: -305px;}
J'avoue j'ai du mal à voir mon erreur, est-ce que quelqu'un pourrait me donner un coup de main, svp ?
Merci d'avance.
A voir également:
- Problème de liens sur des images
- Créer un lien pour partager des photos - Guide
- Des images - Guide
- Vérificateur de liens - Guide
- Ou trouver les liens copiés sur android - Guide
- Image de manchots sur une image de plage. - Forum Graphisme
4 réponses
Il manque l'attribut alt à la ligne 14
La balise link n'est pas refermée par un slash
Mon éditeur indique que la valeur -2 de l'attribut z-index est invalide.
Évite les espaces dans les noms de fichiers :
La balise link n'est pas refermée par un slash
z-index:-2;
Mon éditeur indique que la valeur -2 de l'attribut z-index est invalide.
Évite les espaces dans les noms de fichiers :
plancheMartin2 - Copie.jpg
ALC
merci beaucoup pour la vérification mais le problème n'est pas là, je viens de vérifier.
Je viens de tester ton code en mettant des images quelquonques, pas de soucis sauf qu' elles sont plus ou moin superposées c' est ce que tu veux faire ?
Bonjour,
Non je ne souhaite pas que mes images soient superposées.
Je dois avoir aussi un problème avec ma css parce que la dernière fois que je l'ai testé mes images étaient bien placées, les unes à coté des autres.
Le souci était surtout avec les liens sur mes images: j'en avais un inactif, les autres qui ne fonctionnaient que sur certaines zones de l'image.
J'avoue de pas trop comprendre ce qu'il se passe, d'autant que je l'ai testé dans IE et ça fonctionne.
Non je ne souhaite pas que mes images soient superposées.
Je dois avoir aussi un problème avec ma css parce que la dernière fois que je l'ai testé mes images étaient bien placées, les unes à coté des autres.
Le souci était surtout avec les liens sur mes images: j'en avais un inactif, les autres qui ne fonctionnaient que sur certaines zones de l'image.
J'avoue de pas trop comprendre ce qu'il se passe, d'autant que je l'ai testé dans IE et ça fonctionne.
En fait j'ai trouvé le problème: Firefox supporte mal les "position:relative" ou "position:absolute" et cela interfère dans le comportement des liens qui deviennent souvent inactifs.
J'ai donc modifié ma css en enlevant tous les "position ..." et ça fonctionne correctement.
Merci beaucoup pour vos réponses.
J'ai donc modifié ma css en enlevant tous les "position ..." et ça fonctionne correctement.
Merci beaucoup pour vos réponses.
