J'ai construit dans un "UL" une "merveilleuse" liste en LI issue d'une base de données.
A chaque enregistrement survolé s'affiche le DIV invisible dans lequel un élément de mon enregistrement est lié.
J'y ai donc intégré du javascript.
Cela marche très bien mais dès que j'intègre du PHP, le contenu de mon DIV ne s'affiche plus.
Mon code est le suivant:
Code HTML :
<ul>
<!-- DEBUT DE LA LISTE-->
<?php do { ?>
<li id="txt_img_fd" onMouseOver="div.show('zoom')" onMouseOut="div.hide('zoom')">
<a href="#"><span id="txt_img"><img src="images/entrees_froides/<?php echo $row_RsEntreesFroides['ImgVignette']; ?>"></span>
<span id="txt">
<span id="txt_c12"><?php echo $row_RsEntreesFroides['NomFr']; ?></span><br>
<span id="txt_c10"><?php echo $row_RsEntreesFroides['DescriptionFr']; ?></span> </span>
<span id="txt_fad">
<span id="txt_euros"><?php echo $row_RsEntreesFroides['PrixEuro']; ?></span><span id="txt_centime">,<?php echo $row_RsEntreesFroides['PrixCent']; ?> €</span></span><br>
</a></li>
<?php } while ($row_RsEntreesFroides = mysql_fetch_assoc($RsEntreesFroides)); ?>
<!-- FIN DE LA LISTE -->
</ul>
</div>
<!-- DEBUT DU DIV INVISIBLE -->
<div id="zoom">
<img src="images/entrees_froides/<?php echo $row_RsEntreesFroides['ImgZoom']; ?>" />
<div id="zoom_txt"><span id="zoom_nom"><?php echo $row_RsEntreesFroides['NomFr']; ?></span><span id="zoom_prix"><span id="zoom_euro"><?php echo $row_RsEntreesFroides['PrixEuro']; ?></span><span id="zoom_cent">,<?php echo $row_RsEntreesFroides['PrixCent']; ?> € </span></span><span id="zoom_annul"></span></div>
</div>
<!-- FIN DU DIV INVISIBLE -->On me propose du CSS mais j'ai un problème d'alignement:
Code HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
font-family : Verdana, Arial;
font-size : 1em;
}
li div {
display : none;
border : 1px solid #808080;
background-color : #f0f0f0;
margin-top : 20px;
margin-left : 20px;
padding : 10px;
}
li:hover div {
display : block;
position : absolute;
}
</style>
</head>
<body>
<ul>
<li><div>bonjour<br>ligne 1</div>Ligne 1</li>
<li><div>bonjour<br>ligne 2</div>Ligne 2</li>
<li><div>bonjour<br>ligne 3</div>Ligne 3</li>
</ul>
</body>
</html>
Mais là, mon DIV s'aligne sur les enregistrements de ma liste, ce que je souhaite éviter. Le DIV est dans un endroit bien précis.
Mettez-moi sur la piste. Merci