Lien sur une image ne fonctionne pas [Résolu/Fermé]

Signaler
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
-
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
-
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^^

8 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
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 */
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
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
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Peux-tu fournir le code de ta page, avec le css associé?
Messages postés
279
Date d'inscription
lundi 6 juin 2005
Statut
Membre
Dernière intervention
22 décembre 2010
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à.
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
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>
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
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?
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
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" />
<!--[if lte IE 7]>
<link href="accueilie.css" rel="stylesheet" type="text/css" />
<![endif]-->


</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">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
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;
}
Messages postés
236
Date d'inscription
lundi 6 juillet 2009
Statut
Membre
Dernière intervention
9 février 2012
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