Lien sur une image ne fonctionne pas

Résolu/Fermé

momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 - 7 oct. 2009 à 09:48
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 - 7 oct. 2009 à 11:33

Bonjour,
j'ai un soucis j'ai mis un lien sur une image, de forme <div id="blabla"><a href="lalala"><img src='loulali' /></a></div>
et quand je met un float left sur la div et bas le lien ne fonctionne plus alors que sans on va bien sur lalala^^

A voir également:

Lien sur une image ne fonctionne pas
Lien url - Guide
Verifier un lien - Guide
Créer un lien pour partager des photos - Guide
Image iso - Guide
Aucune application permettant d'ouvrir ce lien n'a été trouvée - Forum Mobile

8 réponses

Réponse 1 / 8

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
7 oct. 2009 à 10:17

Bonjour,

C'est peut-être un problème de superposition avec un autre élément de la page.

Vérifie avec Firebug sur quelle balise on se trouve lorsque l'on survole l'image. (activer firebug, lancer l'inspection, et survoler l'image. Firebug sélectionnera la balise qu'il survolera. Si ce n'est pas l'image mais un autre élément,c'est qu'il y a problème de superposition)

Pour régler le problème de superposition, essaye de donner à ton div les propriétés CSS suivantes:
z-index:1000;
position:relative; /* pour que le z-index soit actif */

Réponse 2 / 8

momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
7 oct. 2009 à 10:18

pas de probleme car c dans la banniere , et c'est la premiere image de la page... deja tester avec firebug et je vois le lien juste en dessous de l'image

Réponse 3 / 8

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
7 oct. 2009 à 10:23

Peux-tu fournir le code de ta page, avec le css associé?

Réponse 4 / 8

nico7382 Messages postés 279 Date d'inscription lundi 6 juin 2005 Statut Membre Dernière intervention 22 décembre 2010 50
7 oct. 2009 à 10:23

Salut,

le problème vient dans la redéfinition du style.
si tu veux ajouter ton alignement à gauche,
je te conseil pour faire simple, de redéclarer un nouvel id sur le <div>
et d'ajouter l'alignement dans le css.

Ce qui se passe, je pense que c'est la redéfiniton de l'argument "style" qui pose problème, car il y a une def, dans le css, et l'autre dans l'html=> conflit, interprétation différente suivant les navigateurs

Enfin voilà.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
7 oct. 2009 à 10:28

Pas tout compris^^, voila le code exact:

#maisonbleue{
float:left;
}

<div id ='maisonbleue'><a href='accueil.php'><img src='images/main/maisonbleue.jpg' /></a></div>

Réponse 6 / 8

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
7 oct. 2009 à 10:38

Et c'est vraiment tout ce qu'il y a dans ta page? je pense que c'est l'interaction avec les autres éléments qui fait que ça marche pas. C'est possible d'avoir le code de toute la page, et avec le CSS complet?

Réponse 7 / 8

momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
7 oct. 2009 à 11:24

j'ai un peu trouve rle probleme , ca vien du menu qui prend trop de place... mais je ne sais pas comment fair:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
<title>La maison bleue - accueil </title>
<link href="accueil.css" media="screen" rel="stylesheet" type="text/css" />
<link href="main.css" media="screen" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="header">

<?php
include('header.php');
?>
<div id="menu">
<?php
include('menu.php');
?>
</div>

</div>

<div id="tout">

<div id="droite" >
<div id="video"> <a href="video.php"><img src="images/accueil/video.jpg" alt="liens vers video" /></a></div>
<div id="carte" ><a href=""><img src="images/accueil/carte.jpg" alt="lien vers carte" /></a></div>

<div id="divcontact">
<p><img id="envelope1" src="images/main/envelope.jpg" /><span id="contact"> Contactez-nous </span><br /><br />
<span id="numero"> 01 46 54 05 74 </span><br /><a id="email" href=""> info@la-maison-bleue.com</a> </p>

</div>

</div>

<div id="centre">
<img id="central" src="images/accueil/image_central.jpg" />

<p><span id="bleue">La Maison Bleue</span><span id="gras"> gère et construit des crèches</span> pour le compte des collectivités et des entreprises</p>

<img id="collectivite" src="images/accueil/collectivite.png" />
<img id="entreprise" src="images/accueil/entreprise.png" />
<img id="parents" src="images/accueil/parents.png" />

<p id="collectivitet">Epsum factorial non deposit quid <br /> pro quo hic escorol.
<img id="entrer1" src="images/accueil/entrer.png" /> </p>

<p id="entrepriset">Epsum factorial non deposit quid <br /> pro quo hic escorol.
<img id="entrer2" src="images/accueil/entrer.png" /> </p>

<p id="parentst">Epsum factorial non deposit quid <br /> pro quo hic escorol.
<img id="entrer3" src="images/accueil/entrer.png" /> </p>

</div>
</div>
<div id="footer">

<?php
include('footer1.php');
?>

</div>

</body>

</html>

le header:

<div style="width:1024">
<div id="maisonbleue"><a href="accueil.php"><img src="images/main/maisonbleue.jpg" /></div></a>

<div id="inscription" style="float:right;"><form method="post" action="newsletter.php" name="form1" >

<input type="image" alt="" src="images/accueil/ok.png" id="okimg" />
<input type="text" name="entrer votre e-mail" id="e-mail" />

</form>

</div>
</div>

le menu

<link href="menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

function montre2(id) {
var d = document.getElementById(id);
for (var j = 1; j<=10; j++) {
if (document.getElementById('ssmenu'+j)) {document.getElementById('ssmenu'+j).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<div id="menu" >

<dl >
<dt onmouseover="javascript:montre('smenu1');javascript:montre2('');" onmouseout="javascript:montre('');" class="societe">;

</dt>

<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');" >
<ul>

<li ><a href="historique.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'">Historique</a></li>

<li ><a href="champdinterventions.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'" >Intervention</a></li>

<li ><a href="garanties.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'">Garanties</a></li>
<li ><a href="equipe.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'">Equipe</a></li>
<li ><a href="actualites.php" onmouseover="this.style.color='white';javascript:montre2('ssmenu1');" onmouseout="this.style.color='#06d0fb'">Actualités - Presse ></a>
<ul id="ssmenu1" style="position:absolute;left:150px;top:95px;display:none";>
<li><a href="actualites.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#06d0fb'">Actualités</a></li>
<li><a href="revue.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#06d0fb'">Revue de Presse</a></li>
<li><a href="video.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#06d0fb'">Videos</a></li>
</ul>
</li>
<li ><a href="partenaire.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'">Partenaires</a>
<li ><a href="contact.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#06d0fb'">Contact</a>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');javascript:montre2('');" onmouseout="javascript:montre('');" class="pedagogie"></dt>

<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>

<li ><a href="notre_approche.php" onmouseover="this.style.color='white';javascript:montre2('');;" onmouseout="this.style.color='#f02991'">Notre approche</a></li>

<li ><a href="originalite.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#f02991'">Notre originalité</a></li>

<li ><a href="matinee.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#f02991'">Une journée à la crèche</a></li>
<li ><a href="modeacceuil.php" onmouseover="this.style.color='white';javascript:montre2('ssmenu2');" onmouseout="this.style.color='#f02991'">Nos modes d'accueil </a>

</li>
<li ><a href="notrecharte.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#f02991'">Notre charte </a>

</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu3');javascript:montre2('');" onmouseout="javascript:montre('');" class="architecture"></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>

<li ><a href="approche-architectures.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#811688';javascript:montre2('');">Approches</a></li>

<li ><a href="navir.php" onmouseover="this.style.color='white';javascript:montre2('');;" onmouseout="this.style.color='#811688';javascript:montre2('');">NAVIR</a></li>

<li ><a href="plans_types.php" onmouseover="this.style.color='white';javascript:montre2('ssmenu4');" onmouseout="this.style.color='#811688';">Plans types ></a>
<ul id="ssmenu4" style="position:absolute;left:158px;top:50px;display:none";>
<li><a href="exemple1.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Exemple 1</a></li>
<li><a href="exemple2.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Exemple 2</a></li>
<li><a href="exemple3.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Exemple 3</a></li>

</ul>

</li>

<li ><a href="module_interieur.php" onmouseover="this.style.color='white';javascript:montre2('');;" onmouseout="this.style.color='#811688';javascript:montre2('');">Modules intérieurs</a></li>
<li ><a href="structures.php" onmouseover="this.style.color='white';javascript:montre2('');;" onmouseout="this.style.color='#811688';javascript:montre2('');">Structures motrices</a></li>
<li ><a href="bio_climatique_archi.php" onmouseover="this.style.color='white';javascript:montre2('ssmenu5');" onmouseout="this.style.color='#811688';">Crèche bio-climatique ></a>
<ul id="ssmenu5" style="position:absolute;left:155px;top:120px;display:none;width:300px";>
<li><a href="architecture-bioclimatique-1.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Une Architecture bioclimatique</a></li>
<li><a href="concept-pedagogique-1.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Un Concept Pédagogique</a></li>
<li><a href="structure-bois-modulable-1.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#811688'">Une Structures Modulable</a></li>

</ul>

</li>
<li ><a href="construction.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#811688';javascript:montre2('');">Construction</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu4');javascript:montre2('');" onmouseout="javascript:montre('');" class="developpement"></dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>

<li ><a href="approche_durable.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Approches</a></li>

<li ><a href="demarche_ethique.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Démarche éthique</a></li>

<li ><a href="bio_climatique_devi.php" onmouseover="this.style.color='white';javascript:montre2('ssmenu6');" onmouseout="this.style.color='#19a12d'">Crèches bio-climatiques ></a>
<ul id="ssmenu6" style="position:absolute;left:220px;top:50px;display:none;width:300px";>
<li><a href="architecture-bioclimatique-2.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#19a12d'">Une Architecture bioclimatique</a></li>
<li><a href="concept-pedagogique-2.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#19a12d'">Un Concept Pédagogique</a></li>
<li><a href="structure-bois-modulable-2.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#19a12d'">Une Structures Modulable</a></li>

</ul>
</li>
<li ><a href="bois.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Le bois</a></li>
<li ><a href="jardins.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Les jardins</a></li>
<li ><a href="vertes.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Formations vertes</a></li>
<li ><a href="pedagogie_verte.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Pédagogie verte</a></li>
<li ><a href="consommables.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Consommables</a></li>
<li ><a href="labels.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#19a12d'">Labels</a></li>
</ul>
</dd>
</dl>
<dl>
<dt class="creche" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');" ></dt>
<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
<ul>
<li ><a href="partenaire.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#ffa201'">Carte Flash</a></li>
<li ><a href="places_disponibles.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#ffa201'">Places disponibles</a></li>

</ul>
</dd>
</dl>

<dl>
<dt class="carriere" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');" ></dt>
<dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">
<ul>
<li ><a href="rejoignez-nous.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#fe0000'">Rejoignez-nous</a></li>
<li ><a href="" onmouseover="this.style.color='white';javascript:montre2('ssmenu3');" onmouseout="this.style.color='#fe0000'">Postes à pourvoir ></a>

<ul id="ssmenu3" style="position:absolute;left:150px;top:25px;display:none;width:300px";>
<li><a href="poste_creche.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#fe0000'">Crèche</a></li>
<li><a href="poste_siege.php" onmouseover="this.style.color='white';" onmouseout="this.style.color='#fe0000'">Siège</a></li>

</ul>

</li>
<li ><a href="formation.php" onmouseover="this.style.color='white';javascript:montre2('');" onmouseout="this.style.color='#fe0000'">Formation</a>
</ul>
</dd>
</dl>
</div>

et le main.css

body{
margin:auto;
width:1024px;
height:100%;

font-family:verdana;
font-size:0.9em;
}

div#tout{
background-color: white ;
}

img{
border:0;
}

div#header{
background: url(images/main/bg_banniere.jpg) no-repeat top center ;
height:200px;
margin-top:-10px;

}

#maisonbleue {
float:left;
z-index:3;

}

#e-mail{
float:right;
margin-top:28px;
margin-right:5px;
}

#okimg{
float:right;
margin-top:26px;
margin-right:10px;
}

#menu{
margin-top:-200px;
z-index:4;
}

#actutitre{
margin-left:600px;
margin-top:50px;
}
.actu{
margin-left:600px;
}

div#centre{
min-height:500px;

border:1px solid white;
}

div#droite{
float:right;
margin-top:0px;
}

#entreprise_menu{
margin-top:-5px;
}

#parents_menu{
margin-top:-5px;
}

div#video{
float:left;
margin-left:10px;
margin-bottom:10px;
}

div#contact{
background: url(images/main/contact_menu.jpg) no-repeat top center ;
height:105px;
width:210px;
margin-left:10px;
}

#contactt{
font-weight:bold;
color:#0087cb;

}

#envelope{
margin-top:15px;
margin-left:25px;
}

div#footer{
background: url(images/main/bg_footer1.jpg) no-repeat top center ;
color:#0087cb;
text-align:center;
}

div#footer2{
background: url(images/main/bg_footer2.jpg) no-repeat top center ;
color:#ef037f;
text-align:center;
}

a:link {color:#0071cb}
a:visited {color:#0071cb}
a:hover {color:#0071cb}
a:active {color:#0071cb}

.bleue{
color:#0071cb;
}
.rose{
color:#ef037f;
}

Réponse 8 / 8

momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
7 oct. 2009 à 11:33

mouhahaha j'ai trouve, mais quel con, fallait fair ton truc de ton premier message j'avais essayer sans succes mais la ca marche....

merci maden

Discussions similaires

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

"Aucune application permettant d'ouvrir cette URL"

lien copié

Rajout de lien sur plusieurs pages

Comment retrouver des lien copier sur sont téléphone

Discussions similaires

Newsletters