Discussion :

[solorac]

Bonjour la Communauté,

J'ai crée dans mon site des infos bulles qui se dévoilent au passage de la souris sur certains mots.

Je voudrais maintenant que ces infos apparaissent dans un cadre identique (largeur, longueur ajusté en fonction du texte) et surtout que ce cadre apparaisse tjs au même endroit dans ma page web.

Je vous joins mon code pour que vous puissez me dire comment je pourrais faire en fonction de ce que j'ai déjà fais;

je vous remercie pour votre aide.

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
a.info {
	position: relative;
	text-decoration: none;
	color: #0066FF;
 
	border-bottom: 1px dotted;
}
a.info span {
	display: none;
}
a.info:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500;
}
a.info:hover span {
	display: block;
	position: absolute;
	background:#ef9906;
	padding:2px;
	color: black;
	border: 1px solid black;
}

[binouzzz19]

Salut,

Désolé je n'ai pas forcément les compétences suffisantes pour t'aider en CSS, mais je pensais que si tu veux que ton info-bulle se trouve toujours au même endroit, pourquoi ne pas placer une <div id="infobulle" style="display:none"></div> puis faire un peu de javascript pour l'afficher lorsque tu passes sur tel ou tel champ ?!

Cordialement.

[tsunamichups]

Salut
dans ton code css , ici exactement

Code :

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

1
2
3
4
 
a.info span {
	display: none;
}

tu peut definir une position:absolute;
et definir sa place avec top, left, right et bottom, ce qui aura pour effet de caller ton span en fonction du coin haut gauche de ton navigateur

ce qui en gros te donnera

Code :

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

1
2
3
4
5
6
 
a.info span {
	display: none;
top:550px;
left:250px;
}

A toi de jouer après pour le placer ou tu veux

[solorac]

Ok, j'ai bien compris pour la position de l'info bulle, mais comment afficher tjs la même longueur, alors que la hauteur de la bulle (qui est en fait un rectangle) sera en fonction du texte dans l'info-bulle ?

je vous remercie

[binouzzz19]

Je crois que si tu définis dans le css une longueur et une largeur, les tailles de ton info bulle seront fixes. Apres tu pourras mettre overflow : scroll;

[solorac]

Nickel pour la taille.
Par contre, je n'ai pas très bien compris pour mettre au même endroit les infos-bulles.

Merci pour votre aide.

[binouzzz19]

Pour placer au centre de l'écran, comme le dit tsunamichups :

tu peut definir une position:absolute;
et definir sa place avec top, left, right et bottom, ce qui aura pour effet de caller ton span en fonction du coin haut gauche de ton navigateur

Il faut définir un position:absolute qui place exactement à l'endroit que tu demande grâce au attributs left, right, top et bottom de cette manière :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
 
a.info span {
position: absolute;
display: none;
top:50%;
left:50%;
bottom:50%;
top:50%;
}

Les 50% indiquent que tu veux que le centre de ton info-bulle soit au centre de l'écran.

Ensuite, à doit d'enlever le display:none lorsque tu pointes sur tes mots.

[binouzzz19]

Alors ça donne quoi ? N'oublie pas le tag si ça fonctionne

[solorac]

Il y a un peu du mieux, mais cela ne me convient encore pas. Je suis peut-être difficile.

Maintenant, j'aimerai que les infos-bulle s'affichent au même endroit et non à partir des mots survolés car, vu qu'ils ne sont pas au meme endroit dans la page et bien les infos-bulles s'affiche à 50% à partir de ces mots.

J'espère que vous me comprenez.

A bientôt

[Baldy]

la propriété position: absolute se réfère par rapport au dernier parent de ton élément.

Si tu veux placer ton infobulle par rapport à ta page elle même, je pense qu'il faut placer le code de celle ci à l'intérieur de la balise BODY seulement (et pas dans un DIV ou un P par exemple).

[solorac]

Merci pour ton aide.
J'essai demain matin et je vous tiens au courant.

[12monkeys]

Bonsoir

la propriété position: absolute se réfère par rapport au dernier parent de ton élément.

Manque 2/3 mots ici : l'élément en absolue se positionne par rapport à son premier parent positionné en relative, absolute ou fixed... http://css.developpez.com/faq/?page=...ement_absolute