Sujet Précédent Sujet Suivant

Problème de liens sur des images

Résolu/Fermé
ALC - Modifié par ALC le 21/06/2011 à 16:04
 ALC - 21 juin 2011 à 17:19
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.

4 réponses

Réponse 1 / 4
js95 Messages postés 773 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 29 juillet 2014 353
21 juin 2011 à 16:54
Il manque l'attribut alt à la ligne 14
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
0
ALC
21 juin 2011 à 17:13
merci beaucoup pour la vérification mais le problème n'est pas là, je viens de vérifier.
0
Réponse 2 / 4
CrazyWorld Messages postés 326 Date d'inscription samedi 8 novembre 2008 Statut Membre Dernière intervention 16 février 2013 41
21 juin 2011 à 17:06
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 ?
0
Réponse 3 / 4
ALC
21 juin 2011 à 17:11
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.
0
Réponse 4 / 4
ALC
21 juin 2011 à 17:19
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.
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Rajout de lien sur plusieurs pages
leparradiss -
David -

11 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
ne pas utiliser la souris mais le clavier
isabela -
thomas-richet -

32 réponses