Lien sur une image ne fonctionne pas

Résolu

momohuri Messages postés 235 Date d'inscription Statut Membre Dernière intervention -
momohuri Messages postés 235 Date d'inscription Statut Membre Dernière intervention - 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
Créer un lien pour partager des photos - Guide
Verificateur de lien - Guide
Image iso - Guide
Légender une image - Guide

8 réponses

Réponse 1 / 8

M@dien Messages postés 437 Date d'inscription Statut Membre Dernière intervention 74

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 Statut Membre Dernière intervention 8

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 Statut Membre Dernière intervention 74

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

Réponse 4 / 8

nico7382 Messages postés 279 Date d'inscription Statut Membre Dernière intervention 50

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 Statut Membre Dernière intervention 8

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 Statut Membre Dernière intervention 74

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 Statut Membre Dernière intervention 8

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 Statut Membre Dernière intervention 8

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

Copier un lien instagram

Retrouver liens copiés sur le téléphone

Rajout de lien sur plusieurs pages

PIX

copie d'un lien dans le navigateur internet

Votre réponse

Discussions similaires