Discussion :

[Oluha]

Salut,

J'ai récupéré sur ce site un code pour faire une infobulle en CSS que j'ai appliqué sur cette page (liens bleu dans la partie programme).

Ca fonctionne bien sous IE7, FF et Netscape (et à priori Safari aussi d'après une amie). Par contre rien ne s'affiche sous IE6 (alors que sur la page où j'ai récupéré le code ca a l'air de marcher). Et je vois pas d'où vient le problème...
Sinon sous Opéra, l'infobulle ne se positionne pas correctement non plus.

Voici le code 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
21
22
23
24
25
26
27
28
29
30
31
a.info{
    position:relative; 
    z-index:24; 
    color:#0298CC;
    text-decoration:none;
}
 
a.info:hover{
	z-index:25;
	color:#0298CC;
    text-decoration:underline;
}
 
a.info div{
	display: none;
}
 
a.info:hover div{ 
	display:block; 
	position:absolute;
    top:2em; 
	left:2em; 
	width:30em;
    border:1px solid #0298CC;
    background-color:#FFFFFF; 
	color:#000000;
    font-weight:normal;
    padding:2px;
	text-decoration:none;
	text-align: justify;
}

et le code HTML :

Code :

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

<a href="#" class="info">Registration<div>In order to allow ...</div></a>

Si quelqu'un a une idée, parce que là je sèche

Merci

[Candygirl]

Pour que cela fonctionne sur IE6, tu peux une propriété "bidon" directement sur le a:hover. Genre:

Code :

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

1
2
3
.info:hover {
  border:0;
}

En passant, un a ne peut pas contenir de div...

[Oluha]

Merci ! Effectivement là ca fonctionne

Pour le <div> dans le <a> je sais, d'ailleurs à l'origine ils utilisent <span>, mais du coup si je veux appliquer une class à un mot à l'intérieur de l'infobulle, je ne peux pas sans que ca bug à l'affichage puisqu'il m'y applique alors le style avec le cadre de l'infobulle elle même (je sais pas si je suis très claire lol).

Sinon une idée du pourquoi Opéra positionne mal l'infobulle ? (là c'est moins grave)

[Candygirl]

Non, tu n'es pas très claire mais oui j'ai compris

Plusieurs options:

- soit tu attribues une class à ton premier span que tes styles ne s'appliquent pas aux suivants

- soit tu rétablis les propriétés définies dans a.info:hover span à leur valeur intitiale dans a.info:hover span span

- soit tu cibles plus précisément le premier span de ton .info (va y avoir des problème avec IE6)

...

Aucune idée pour le bug d'opéra.

[Oluha]

- soit tu attribues une class à ton premier span que tes styles ne s'appliquent pas aux suivants

C'est ce que j'ai fais, merci