Discussion :

[¤dinky¤]

Bonjour à tous,

Je vien vous voir pour un petit problème que je rencontre avec CSS.

voici ma structure 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
a
{	
	text-decoration:none;
	color:black;
	word-spacing:4px
 
}
a:active
{	background:#FEF6DE	
	}
a:hover
{	position:absolute;
	top:60px;left:8px;
	width:85%;
	background:#F3EFCC;
	text-align:center;
	border:1px ridge black;
	z-index:1	
}

Ma structure 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
<div class="test" >	 
	<span>
	<ul>
		<li>
		&int;&nbsp;&nbsp;<a href="histoire.htm" > Manoir<br></a></li>
      	<hr align="center" size="1">
		<li>
	 	&int;&nbsp;&nbsp;<a href="histoire.htm">Parc - piscine</a></li>
      	<hr align="center" size="1">
		<li>
		&int;&nbsp;&nbsp;<a href="histoire.htm">Histoire</a></li>
   </ul> 
   </span> 
</div>

Donc mon idée était de partir sur un lien :hover qui pouvais s'afficher autre part ...
Le lien s'affiche bien autre part mais le lien devient instable ! certe, le lien disparaît quand je vais dessus ( normal ! ) mais le problème est qu'il est dur de cliquer dessus !

J'aimerai savoir s'il y a un moyen ( avec CSS ) de transformer ça proprement ( sans la disparition et l'instabilité du lien ) ?

Merci pour vos réponses

[henry4]

bsr

je dis peut-être une bêtise mais en supprimant

Code :

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

1
2
3
4
5
6
7
8
9
10
 position:absolute; 
 
   z-index:1   
 
ça semble stable!
 
tu dis si Ok
 
@plus
henry

[¤dinky¤]

yes c'est stable mais c'est pas se que je veux !

ma position absolute me sert à placer mon :hover ou je veut. Comme t'as pu surement le voir sur mon script, quand je survole mon lien, le :hover s'affiche avec un background et un border .. l'affichage quand à lui est paramètré de tel manière qu'on le vois autre part de son endroit par défault .

En faite pour simplifier j'ai paramètré un calque d'affichage ...

merci pour vos réponses

[adiGuba]

Salut,

Ce comportement est normal étant donné que tu déplaces le lien :
Quand le pointeur passe sur un lien le a:hover déplace ce lien, et donc ton pointeur ne se trouve plus sur le lien, tu repasses en a, puis tu te retrouves encore sur le lien, etc...
En fait tu ne fais que boucler entre le style a et a:hover...

Si j'ai bien compris, tu voudrais que lorsque tu passes sur un lien, une popup apparaisse à un endroit fixe sur la page...
Si c'est ca essaye le style suivant :

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
 
a {   
   text-decoration:none;
   color:black;
   word-spacing:4px
 
}
a:active {
	background:#FEF6DE   
}
 
a span {
	display: none;
}
 
a:hover {
	background: #FEF6DE;
}
 
a:hover span {
	display: block;
	position:absolute;
	top:60px;left:8px;
	width:85%;
	background:#F3EFCC;
	text-align:center;
	border:1px ridge black;
	z-index:1;
}

Et tu ecris tes liens sous la forme suivant :

Code :

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

<a href="histoire.htm">Histoire<span>Histoire</span></a>

a++

[¤dinky¤]

bah voilà ça

bravo et beaucoup de merci

problème [résolu] :p

[¤dinky¤]

je tien à préciser que c'était vraiment se que je voulais ...trop fort

en + dans mes recherche j'était vraiment pas loin, mais j'avais oublié le display avec le span !

beaucoup de merci encore