Discussion :

[JefReb]

Bonjour à tous,
Je m'arrache le peu de cheveux qui me restent, j'ai beau chercher, je ne trouve pas mon erreur.
Je désire faire un popup windows d'un texte sur une image.
En faisant un recouvrement de l'image par le texte.
Peu importe la couleur de fond que je mets à la <div> il est transparent au lieu d'être opaque !

voir codepen:
http://codepen.io/JefReb/pen/LWgJMm

Code css :

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
.conteneur {
	width:150px;
	margin: 150px auto;
}
img {
	position: relative;
	z-index:1;
	width: 140px;
	height: auto;
	overflow: hidden; 
}
.conteneur p {
	margin: 0;
	padding: 0;
	text-align: center;
}
.popup {
	display: none; 
	position: relative;
	z-index:999;
	top: -70px;
	left: 45px;
	width: 600px;
	height:150px; 
	padding: 20px
	background-color: #09F;
	border: 5px solid #ddd;
}
.popup p {
	margin: 2px;
}
.conteneur:hover .popup {
	display: block;
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class="conteneur">
  <img src="http://www.photodenature.fr/wp-content/uploads/2015/01/photo-Dauphin.jpg" alt="">
      <p>Photo 1</p>
 
    <div class="popup"> 
      <h2>Le dauphin</h2>
      <p>Le substantif masculin « dauphin » (/do.'fɛ̃/) est issu, par l'intermédiaire d'un latin etc. </p>
	</div>
 
</div>

Quelqu'un a-t-il une idée pour que je puisse dormir tranquille!

[Invité]

Bonjour,

il faut attendre encore un peu...

C'est bientot... aux Pâques... !



Bon. En vrai il manque un ; à la ligne précédente !

[JefReb]

heu heu

Bon. En vrai il manque un ; à la ligne précédente !

Mais encore??? Pâques ou à la trionité?

[JefReb]

Ohhh p...1 j'ai vu!
Incroyable, plus on regarde moins on voit,
Mille merci Jreaux62
C'est fou, comment on peut passer à coté d'un truc aussi évident.
Encore merci

[NoSmoking]

Bonjour,
il existe un outil redoutable pour ce genre de bévues et d'autres encore : CSS Validation Service ^(*), mets ton code dedans et observe le résultat...

26 .popup Propriété erronée : padding impossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.

... c'est souvent des heures de gagnées pour une foutue voyelle oubliée dans le nom d'une propriété .

^(*) devrait être déclaré d'Utilité Web Publique

[JefReb]

C'est vrai Nosmocking!
J'oublie tout le temps cet excellent outil, et ça m'aurait fait gagner du temps sur ce coup là.
Je vais faire un noeud à mon mouchoir ...
Merci