infobulle mal affichée

**ickyknox** · 17/09/2012, 22h26

bonjour !

sur :
http://icreatorbeta.free.fr/soins-corps

en passant la souris sur DETAIL, j'ai une infobulle qui s'affiche bien sur FIREFOX, mais sur chrome ca ne s'affiche pas.

Je voulais savoir comment l'afficher sur Chrome.

J'ai un autre soucis. L'infobulle ne fait qu'apparaitre et disparaitre sous firefox.
Je n'arrive pas à trouver le moyen de le stabiliser tant que la souris est sur le bouton.

Je vous remercie, si vous avez des idées à me proposer.

HTML :

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
 
<title>Plénitude Beauté 06 - Soins Corps - Modelages du corps et Gommages</title>
 
 <!--[if lte IE 8]><script src="js/ie.patch.js"></script><![endif]-->
 
<meta name = "description" content = "Modelages relaxant, aux pierres chaudes, amincissant aux bambous, drainage lymphatique manuel. Sur Cannes et environs."/>
<meta name="Identifier-URL" content ="www.plenitude-beaute06.com/soins-corps"/>
<meta name="keywords" content ="massage, modelage, relaxant, pierres_chaudes, amincissant, bambous, drainage_lymphatique, gommage, cannes, bocca, 06, 83, alpes maritimes, var "/>
 
 
 
 
  <link rel="stylesheet" type="text/css" href="prestations.css" />
 
 
<link href="style.css" rel="stylesheet" type="text/css">
 
<link rel="shortcut icon" href="../favicon.ico" type="shooting/image/x-icon"/>
 
 
 
    <style type="text/css">
 
ul {
    padding: 0;
}
 
li {
    float: left;
    margin: 0 5px;
    text-decoration: none;
    border-radius: 1ex;
    font-variant: small-caps;
    background: -moz-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;
    background: -o-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;    
    background: -ms-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;	
	    background: -webkit-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;
    background: -khtml-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%) repeat scroll 0 0 transparent;	
	list-style-type: none;}
 
 
#header-menu a {
    display: block;
    padding: 1em;
    color: black;
    text-decoration: none;
    font-variant: small-caps;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -khtml-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    background-color: rgba(255, 255, 255, 1);
}
 
#header-menu a:hover{
    color: white;
    background-color: transparent;
}
    </style>
 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript" src="bulle.js"></script>
</head>
 
<body>	
 
					<div class="container"/>
 					 <div class="header"/>
 
<!-- LOGO -->
 
				<article id="logo" href="#">                        
                        		<a class="facebook" href="http://icreatorbeta.free.fr"><img alt="logo_plenitude_beaute" width="410" height="120" 
                                    src="images/logo.png" 
 
                                    style="
        -webkit-transition: all 0.9s ease-in-out; 
        -webkit-transition-duration: 0.8s;
	    -moz-transition: all 0.9s ease-in-out; 
        -moz-transition-duration: 0.8s;	
	    -o-transition: all 0.9s ease-in-out; 
        -o-transition-duration: 0.8s;
		-ms-transition: all 0.9s ease-in-out; 
        -ms-transition-duration: 0.8s;
		-khtml-transition: all 0.9s ease-in-out; 
        -khtml-transition-duration: 0.8s;"></a>
                              </article>
 
 
 <!-- BOUTONS ACCUEIL -->
 
			<article id="heada"> 
				<ul id="header-menu" >
				<li class="header-menu-choix"><a href="http://icreatorbeta.free.fr">Accueil</a></li>
				<li class="header-menu-choix"><a href="#">Contact</a></li>
				<li class="header-menu-choix"><a href="#">Parrainage</a></li>
				<li class="header-menu-choix"><a href="#">Produits</a></li>
				<li class="header-menu-choix"><a href="#">Partenaires</a></li>
				<li class="header-menu-choix"><a href="#">Blog</a></li>
				</ul>
			</article> 
 
  						</div>
 
 
 
 <!-- GALLERIE -->
 
					<div class="content"> 
 
 <!-- TITRE -->
 
<div class="ligne"></div>
 
<article id="cadretitre">
 
				<center><section id="titre">
					<h1>SOINS DU CORPS </h1>
					</section>
			</article></center>		
 
 <!-- CADRE -->
 
   				<div id="modelage-corps">
					<p>MODELAGES DU CORPS</p>
							</div>			
 
   				<article id="relax">
					<section id="relax-titre">MODELAGE<br> RELAXANT</section>
 
				<section id="relax-prix">1 h---------------- 80€<br>1 h30------------1 10€</section>
 
 
	<p id="infobulle" style="margin-top:100px;margin-left:20px;
	text-decoration:none;"><a title="Ce modelage tout en douceur apporte plénitude et vous réconcilie avec votre corps.<br/><br/> Laissez vous porter par les bienfaits des huiles essentielles d’orange, petit grain et Ylang-ylang aux vertus relaxantes et décontractantes.">Détail</a></p>
 
  							</article>	
 
 
 
 
 
 
 
				</div>
 
 
			<div id="footer"/> 
   				<div id="footer-contact">
					<p>Sur rendez-vous tous les jours de 9h à 20h Téléphone : 06 61 87 83 65</p>					
				</div>
				</div>
 
	</body>
 
 
</html>

CSS

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
 
			/* DETAIL */
 
.infobulle{
        position:absolute;
        background:grey;
        padding:3px 7px;
		width:300px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -o-border-radius:3px;
        -ms-border-radius:3px;
        -khtml-border-radius:3px;
 
 
 
        color:#d4d4d4;
			border-radius: 1ex;
        text-align:center;
}

**Muchos** · 18/09/2012, 01h18

Je vais en remettre une couche, mais…
J'ai une idée ! Et si tu ne faisais pas ton info-bulle comme ça ? Ça éviterait de mal utiliser la balise <a> et l'attribut title, et ça allègerait la page d'un script !
Non, mieux : pas d'info-bulle du tout ! Ce serait bien mieux d'avoir directement l'intégralité du texte.

**ickyknox** · 18/09/2012, 06h00

merci, j'avais aussi pensé à mettre tout le texte dans la meme page.

Voilà au final comment doit etre ma page :
http://plenitude-beaute06.com/soins_du_corps.html
(je sais que tu vas dire que c'est pourri, mais c'est normal je suis esthéticienne, donc je n'ai pas assez de neurones

)

et si je veux mettre des infos bulles, c'est pour ne pas encombrer visuellement la page (esthétique oblige).

Quelqu'un m'avais aussi conseillé de ne pas mettre de diaporama en accueil, IDEM pour les boutons animés car ca faisait trop lourd. Il y en a meme un qui m'a dit de ne pas mettre de logo car les images pesaient. En faites , on me proposait de faire un site avec un titre et une description;
Mais je préfère prendre le risque de faire un site qui rame, mais qui au moins soit agréable à regarder

**Muchos** · 18/09/2012, 17h18

Envoyé par ickyknox

Je préfère prendre le risque de faire un site qui rame, mais qui au moins soit agréable à regarder

On peut tout à fait réaliser un très beau site qui soit léger et accessible. On peut aussi être esthéticienne et intelligente.
Malheureusement, ton ignorance et surtout ton entêtement te font rater le premier point. Alors, n'en rajoute pas en te dévalorisant : ce serait dommage d'être à côté de la plaque sur toute la ligne !

**ickyknox** · 18/09/2012, 23h49

"le manque de neurones", c'était pour l'ironie. Vu que face aux informaticiens arrogants comme toi

qui savent tout, on est pas doué.

Du coup je ne vois pas ton utilité à pars ton agressivité.

Parceque :

Code :

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

1
2
"J'ai une idée ! Et si tu ne faisais pas ton info-bulle comme ça ?"
"Non, mieux : pas d'info-bulle du tout !"

ca m'avance bien. Il faut arreter de tourner autour du pot.
Je préfère avoir une réponse déjà plus aimable des autres actifs à ce forum qui ont l'habitude de me répondre gentiment.

....

Mais vu que je veux une info bulle, et pas le texte dans la meme page.
Si quelqu'un a une solution alternative, je suis preneuse s'il vous plait.

**Muchos** · 19/09/2012, 15h08

Désolé de t'avoir ennuyée. Je voulais juste dire que l'info-bulle n'était pas une bonne idée ici, en plus d'être mal intégrée.

Je précise aussi que je ne suis pas informaticien : j'apprends le web en autodidacte depuis cette année. J'ai juste été très tôt sensible aux notions de fond (sémantique, accessibilité, respect des standards…) et je suis déçu de voir ce que ton site devient.

**ickyknox** · 19/09/2012, 16h17

ah non il n'y a pas de soucis. Moi aussi je suis désolée de m'être emportée. Je suis juste parfois perdue car on retrouve des informations différentes d'un forum à un autre. Certains se basent sur des cours très anciens, et d'autres que sur certains navigateur.
Du coup, je ne sais meme plus quelle est la version officielle à utiliser.

D'ailleurs si tu as un site qui propose des infos de standardisation de site internet, je le lirais volontier. Meme un livre.

A bon entendeur

**NoSmoking** · 19/09/2012, 19h49

Bonjour,
il existe une alternative sur base de CSS:hover, mais cela doit rester pour des textes courts, le contenu doit être dans la page.

exemple d'infoBulle en CSS:hover

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<style>
a.bulle {
  position : relative;
  font-size: 1.2em;
  text-decoration : none;
  border-bottom : 1px dotted #fa8;
}
a.bulle span {
  display : none;
}
a.bulle:hover span {
  display : block;
  position : absolute;
  top : 18px;
  left : 20px;
  padding : 5px;
  font-size: .8em;
  width:250px;
  color : #000;
  background-color : #ffb;
  border : 1px solid #fa8;
}
</style>
</head>
<body>
<a class="bulle" href="#" title="">
<span>Ce modelage tout en douceur apporte plénitude et vous réconcilie avec votre corps.<br>Laissez vous porter par les bienfaits des huiles essentielles d’orange, petit grain et Ylang-ylang aux vertus relaxantes et décontractantes</span>
Détail</a>
</body>
</html>

**ickyknox** · 20/09/2012, 12h21

Merci no smoking, c'est exactement ce qu'il me fallait ! ca va me servir pour d'autres pages !

infobulle mal affichée

CSS

Discussions similaires

Partager

Partager