Sujet Précédent Sujet Suivant

* DIV visible au survol d'un lien d'une liste *

cs_lemoko Messages postés 8 Date d'inscription vendredi 13 mars 2009 Statut Membre Dernière intervention 6 février 2011 - 17 janv. 2011 à 13:16
cs_ludwig59 Messages postés 128 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 6 mai 2011 - 17 janv. 2011 à 16:46

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:

<!-- DEBUT DE LA LISTE-->
<?php do { ?>
  <li id="txt_img_fd" onMouseOver="div.show('zoom')" onMouseOut="div.hide('zoom')">
    [# ">
          
        <?php echo $row_RsEntreesFroides['NomFr']; ?>

        <?php echo $row_RsEntreesFroides['DescriptionFr']; ?> 
          
          <?php echo $row_RsEntreesFroides['PrixEuro']; ?>,<?php echo $row_RsEntreesFroides['PrixCent']; ?> €

          ]</li>
  <?php } while ($row_RsEntreesFroides = mysql_fetch_assoc($RsEntreesFroides)); ?>
<!-- FIN DE LA LISTE -->
    
  

   
<!-- DEBUT DU DIV INVISIBLE -->
  

  	" />
    
<?php echo $row_RsEntreesFroides['NomFr']; ?><?php echo $row_RsEntreesFroides['PrixEuro']; ?>,<?php echo $row_RsEntreesFroides['PrixCent']; ?> € 

  

<!-- FIN DU DIV INVISIBLE -->

On me propose du CSS mais j'ai un problème d'alignement:

<!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>


  <li>
bonjour
ligne 1
Ligne 1</li>
  <li>
bonjour
ligne 2
Ligne 2</li>
  <li>
bonjour
ligne 3
Ligne 3</li>


</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

A voir également:

Div visible javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Lien javascript - Forum Javascript / DHTML
Javascript partie entiere ✓ - Forum Java

1 réponse

Réponse 1 / 1

cs_ludwig59 Messages postés 128 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 6 mai 2011 2
17 janv. 2011 à 16:46

Bonjour,

Pour le li:hover div vous avez spécifiez la position absolute mais il faut ajouter les valeurs top et left pour bien le positionner

<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;
  top : 200px; /* remplacer par la bonne valeur */
  left : 200px; /* remplacer par la bonne valeur */ 
}
</style>

Discussions similaires

Excel VBA - Proprièté "Visible" pour "Worksheet"

Partie entiére d'un nombre

Rendre invisible ou visible une form en vba

la division en java

coller deux div avec du css

Votre réponse

Discussions similaires