DIV visible au survol pour chaque enregistrement(mysql) [Résolu]

pp_le_moko · 16/01/2011, 20h23

Bonsoir à tous et meilleurs vœux,

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.
Je perds le lien dès que je code en php. Une solution ?
Je ne sais pas comment écrire le code qui me permettrait d'afficher le DIV invisible de chaque enregistrement.
Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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']; ?> &euro;</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']; ?> &euro; </span></span><span id="zoom_annul"></span></div>
  </div>
<!-- FIN DU DIV INVISIBLE -->

Merci pour vos réponses

NoSmoking · 16/01/2011, 22h10

Bonjour,

Citation:

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.

le CSS suffit dans ton cas, un petit exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

pp_le_moko · 17/01/2011, 12h54

Bonjour,

Je peut être d'accord avec la réponse mais... je ne souhaite pas que le DIV s'aligne verticalement sur la ligne qui lui est propre.
Je veux que mon DIV, placé précisément sur ma page, ne suive pas la ligne de mon enregistrement de ma liste.
Est-ce que le CSS me permet cette "rigidité" ?

Merci

NoSmoking · 17/01/2011, 18h25

Citation:

Est-ce que le CSS me permet cette "rigidité" ?

le CSS permet plein de chose et plus encore.

Je te mets un exemple qui devrait mieux te convenir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!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;
}
#titre {
  width : 600px;  
  margin : auto;  
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 500px;
  height : 400px;
  margin : auto;
  padding : 5px;
}
#conteneur li {
  cursor : pointer;
}
#conteneur .info {
  top : 50px;
  left : 300px;
  width : 150px;
  height : 250px;
  border : 1px solid #f0f080;
  background-color : #fefeee;
  padding : 5px;
}
#conteneur li div {
  display : none;
}
#conteneur .where{
  position : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}
#conteneur li:hover div {
  position : absolute;
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div id="conteneur">
  <div class="where info">Zone Info...</div>
  <ul>
    <li><div class="info"><b>Titre 1</b><hr>Bonjour de la ligne 1</div>Ligne 1</li>
    <li><div class="info"><b>Titre 2</b><hr>Bien le bonjour de la ligne 2</div>Ligne 2</li>
    <li>Ligne 3<div class="info"><b>Titre 3</b><hr>Les informations de la ligne 3</div></li>
  </ul>
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>
</div>
</body>
</html>

SpaceFrog · 17/01/2011, 19h56

attention avec :hover et les versions de IE sous certains version le hover n'est pris en compte que par la balise a ...

pp_le_moko · 23/01/2011, 18h20

Bonsoir,

Vos conseils m'ont été très utiles.
J'ai intégré ce principe dans mes listes et "ça fonctionne !" parfaitement.

J'ai une remarque:
j'ai intégré dans mon LI un back-ground image. Lorsque mon rollover joue pleinement sa fonction, je n'arrive pas à décaler verticalement cette image pour ajouter un effet dynamique au passage de mon focus.

Avez-vous une solution à préconiser ?

merci

pp_le_moko · 24/01/2011, 22h48

Bonsoir,

Je pense avoir trouvé une solution. Cela fonctionne mais je n'en suis pas sûr à 100%.
J'ai créé dans mon <LI> une zone (<a href="#">) précisant que dès le survol, mon background-image est décalée d'autant de pixel souhaité.
Ceci est mon <a href="#">:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#liste_elements a {
	display: block;
	height: 26px;
	padding: 6px;
	background-image: url(images/bando_ent_fro.png);
	background-repeat: no-repeat;
	text-decoration: none;
}
#liste_elements a:hover {
	display: block;
	height: 26px;
	padding: 6px;
	background-image: url(images/bando_ent_fro.png);
	background-repeat: no-repeat;
	background-position: 0px -37px;
	text-decoration: none;
}

Mon problème résolu, je me retrouve confronté à un autre problème:
je veux que l'apparition du DIV ne se fasse pas au survol du LI mais bien sur celui du <a href="#">.

Ceci est le déclenchement du DIV à afficher actuellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#conteneur li:hover div {
	position : absolute;
	display : block;
}

En lisant la synthaxe de cette phrase, si j'ai bien compris, il est écrit que sur le hover du li, le DIV apparaît. Ai-je raison ?
Ce que je souhaite, c'est au survol du a:hover de mon LI, mon DIV apparaisse.

Merci

NoSmoking · 25/01/2011, 07h47

Citation:

Envoyé par pp_le_moko

Mon problème résolu, je me retrouve confronté à un autre problème:
je veux que l'apparition du DIV ne se fasse pas au survol du LI mais bien sur celui du <a href="#">.
...
En lisant la synthaxe de cette phrase, si j'ai bien compris, il est écrit que sur le hover du li, le DIV apparaît. Ai-je raison ?
Ce que je souhaite, c'est au survol du a:hover de mon LI, mon DIV apparaisse.
Merci

pour des raisons de validation il faut remplacer les éléments DIV par des éléments SPAN à l'intérieur des balises A, et modifier un peu le CSS, comme indiqué ci dessous
Cela donne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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;
}
#titre {
  width : 600px;  
  margin : auto;  
}
#conteneur {
  font-size : 13px;
  position : relative;
  border : 1px solid #e0e0e0;
  width : 500px;
  height : 400px;
  margin : auto;
  padding : 5px;
}
/*-- OUT
#conteneur li {
  cursor : pointer;
} --*/
/*-- AJOUT --*/
#conteneur a {
  cursor : pointer;
  text-decoration : none;
}
#conteneur .info {
  color : #000;
  top : 50px;
  left : 300px;
  width : 150px;
  height : 250px;
  border : 1px solid #f0f080;
  background-color : #fefeee;
  padding : 5px;
}
/*-- OUT
#conteneur li div {
  display : none;
} --*/
%osition : absolute;
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}
/*-- OUT
#conteneur li:hover div {
  position : absolute;
  display : block;
} --*/
/*-- AJOUT --*/
#conteneur a span {
  display : none;
}
/*-- AJOUT --*/
#conteneur a:hover span {
  position : absolute;
  display : block;
}
</style>
</head>
<body>
<div id="titre">
<h2>Hover en CSS</h2>
</div>
<div id="conteneur">
  <div class="where info">Zone Info...</div>
  <ul>
    <li><a href="#"><span class="info"><b>Titre 1</b><br>Bonjour de la ligne 1</span>Ligne 1</a></li>
    <li><a href="#"><span class="info"><b>Titre 2</b><br>Bien le bonjour de la ligne 2</span>Ligne 2</a></li>
    <li><a href="#">Ligne 3<span class="info"><b>Titre 3</b><br>Les informations de la ligne 3</span></a></li>
  </ul>
<b>Attention</b> :
<br><i>ne fonctionne pas sur IE6</i>
</div>
</body>
</html>

nota : c'est toujours incompatible IE6...

pp_le_moko · 30/01/2011, 12h28

No Smoking,

Ton code fonctionne à merveille. J'ai bien un survol sur ma ligne d'enregistrement. Mais...
Il m'est dans l'impossibilité d'ajouter un background-image dans mon <a href="#">: l'image ne s'affiche pas !

Le background-image me sert au survol du <a href="#"> puisque mon image se décalerait verticalement.

Le <a href="#"> est-il en bonne place dans le LI ?

merci

pp_le_moko · 30/01/2011, 13h07

No Smoking,

J'ai finalement trouvé une solution. Non pas d'après "ta" dernière contribution, mais à partir de "ta" première.

Citation:

Pour résumé:
– mon <LI> a une certaine largeur (le rollover agit sur le LI entier),
– ma liste n'a plus de marge à gauche (100px par exemple)
– ma zone d'info, elle, est bien décalé de -100px à gauche (valeur négative)...

J'ai donc calé ma zone d'info avec un calage négatif pour ne plus être gêné par le <a href="#"> du LI qui agissait sur mon LI entier.

Mais les valeurs négatives, fonctionnent-elles parfaitement sur tous les navigateurs (Safari, Firefox: ok mais IE ?) ?

Merci encore pour ton aide précieuse.

NoSmoking · 30/01/2011, 14h10

Citation:

Ton code fonctionne à merveille.

j'ai un doute, je viens de me rendre compte qu'il y a une erreur dans la déclaration de style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/*-- OUT
#conteneur li div {
  display : none;
} --*/
#conteneur .where{  /* manque cette ligne */
/* %osition : absolute; GROSSE CAGAGNE ! */
  position : absolute; /* ce qu'il fallait lire */
  color : #e0e0e0;
  font-weight : bold;
  background-color : #f8f8f8;
  border : 1px solid #e0e0e0;
}

Citation:

Il m'est dans l'impossibilité d'ajouter un background-image dans mon <a href="#">: l'image ne s'affiche pas !

il me semble qu'avec un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#conteneur li a:hover {
  background-image : url(image_fond.gif);
}

cela devrait le faire, et si tu veux qu'il aient tous la même largeur, pour plus de propreté à l'affichage mettre par exemlpe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#conteneur li a:hover {
  width : 150px;
  display : block;
  background-image : url(image_fond.gif);
}

regarde si cela convient

17/01/2011, 19h56	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	attention avec :hover et les versions de IE sous certains version le hover n'est pris en compte que par la balise a ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/01/2011, 12h54	#3
pp_le_moko Candidat au titre de Membre du Club Inscription : mars 2009 Messages : 45 Détails du profil Informations forums : Inscription : mars 2009 Messages : 45 Points : 12 Points : 12	Bonjour, Je peut être d'accord avec la réponse mais... je ne souhaite pas que le DIV s'aligne verticalement sur la ligne qui lui est propre. Je veux que mon DIV, placé précisément sur ma page, ne suive pas la ligne de mon enregistrement de ma liste. Est-ce que le CSS me permet cette "rigidité" ? Merci
	00

23/01/2011, 18h20	#6
pp_le_moko Candidat au titre de Membre du Club Inscription : mars 2009 Messages : 45 Détails du profil Informations forums : Inscription : mars 2009 Messages : 45 Points : 12 Points : 12	Bonsoir, Vos conseils m'ont été très utiles. J'ai intégré ce principe dans mes listes et "ça fonctionne !" parfaitement. J'ai une remarque: j'ai intégré dans mon LI un back-ground image. Lorsque mon rollover joue pleinement sa fonction, je n'arrive pas à décaler verticalement cette image pour ajouter un effet dynamique au passage de mon focus. Avez-vous une solution à préconiser ? merci
	00

30/01/2011, 12h28	#9
pp_le_moko Candidat au titre de Membre du Club Inscription : mars 2009 Messages : 45 Détails du profil Informations forums : Inscription : mars 2009 Messages : 45 Points : 12 Points : 12	No Smoking, Ton code fonctionne à merveille. J'ai bien un survol sur ma ligne d'enregistrement. Mais... Il m'est dans l'impossibilité d'ajouter un background-image dans mon <a href="#">: l'image ne s'affiche pas ! Le background-image me sert au survol du <a href="#"> puisque mon image se décalerait verticalement. Le <a href="#"> est-il en bonne place dans le LI ? merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email