NPDS : Gestion de contenu et de communauté

Bonjour à tous

Je viens de trouver un script en CSS afin d'afficher sur un lien
une infobulle avec image. L'ensemble fonstionne très bien sous Evolution
Le seul problème est l'affichage de l'image dû je suppose à la fonction
"position: absolute;" du fichier CSS.
En effet l'image s'affiche au centre de la page et ce qui pause
probleme si c'est une longue page, l'utitisateur ne voie plus
l'image par exemple sur un lien en bas de page.

Comment modifier le code du fichier CSS pour que l'image
s'affiche au niveau du lien et non pas suivant la fonction
"position: absolute;"

Si vous avez une solution avec un exemple je suis preneur :=!

Merci

Code de l'infoBullz



Dans le HTML
<a class="bulle" href="audauxstory.htm"><img src="Images/historique.jpg" border=0><span>Historique d'Audaux<img src="vignettes/audaux.JPG"/></span></a>

Dans le fichier CSS
a.bulle span{
display: none;
}

a.bulle:hover{
background: none; /*contournement bug IE*/
}

a.bulle:hover span{
display: inline;
position: absolute;
top: 213px;
left: 500px;
background: #fc9;
text-align: center;
text-decoration: none;
color: blue;
padding: 0.2em;
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
}


N

Message édité par : Newdev / 30-03-2008 16:13

Une tite recherche sur "position: absolute;" devrait vite te mettre sur le chemin de "top: 213px; et left: 500px;" :=!

moi je fais pas comme ca 8-)

Si j'ai bien compris je dois utiliser "position: relative ;"
Si vous pouvez m'expliquer la difference

Jireck, tu fais comment :-?

Merci

Bonjour,

J'ai teste avec "position: relative ;" et "position: absolute ;" et cela ne correspond pas à mes besoin.

En fait ce que je souhaite c'est que l'infobulle
s'affiche au niveau du lien et non pas suivant la fonction
"position: absolute;" ou "position: relative ;"

J'ai fais des recherches et ma question reste sans réponses

Merci

Salut,



A.ag_pop
{

    position:relative;
    text-decoration: none;
    font-weight: bold;

}

A:hover.ag_pop
{

    text-decoration: none;
    background: none;

}

A.ag_pop span
{

    display: none;

}

A:hover.ag_pop span
{

    display: inline;
    text-align:left;
    position: absolute;
    bottom:1em;
    right:3em;
    z-index: 20;
    background: #FEE5B3;
    color: #000;
    border:1px solid #000;
    width:160px;
    font-weight:bold;
    font-size: 15px;
    line-height:20px;
    padding:10px;

}





    echo '<a href="lien" class="ag_pop"><span>texte</span></a>';



Merci, je vais tester

N