[résolu] Balise <span> et <ul>: conflit en vue?

Salut!
Voici ce que je souhaite faire:
j'ai un menu horizontal réalisé avec des <ul> et <li> et je veux qu'en passant sur un lien une boite s'affiche avec la description du lien du menu.
j'ai donc utilisé des span entre les liens de mon menu mais je n'arrive pas à positionner mon span ou je veux car il reste "bloquer dans" le menu.
C'est à dire que si je le positionne très bas il reste "emprisonné" dans le cadre de l'<ul>!
J'ai utilisé ce tuto: http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript


Voici le code XHTML

<div id='barrehaut'>
     <ul class='menuhaut'>
          <li><a href='index2.php?page=sommaire' class='lienhaut'>Accueil<span>test</span></a></li>
          <li><a href='index2.php?page=serial' class='lienhaut'>Code sage<span>test</span></a></li>
          <li><a href='index2.php?page=forfait' class='lienhaut'>Assistance<span>test</span></a></li>
          <li><a href='index2.php?page=assistance' class='lienhaut'>Faq<span>test</span></a></li>
          <li><a href='index2.php?page=deconnec' class='lienhaut'>Déconnexion<span>test</span></a></li>
     </ul>
</div>

et la css

#barrehaut{
position:absolute;
padding:0;
margin:0;
left:auto;
font-size:1.2em;

margin-left:15% !important;
margin-left:8%;
width:85%;
}


ul.menuhaut   {
list-style-type: none;
width:94%;
height:100%;
padding:0;
}


.menuhaut li{
float:left;
width:18%;
text-align:center;
}

.menuhaut a{
/*background-color:#838282;*/
background-image:url('../images/bouton2.jpg');
display:block;
color:#ffffff;
text-decoration:none;
border:1px solid #000000;
width:100%;
height:100%;
}

.menuhaut a:visited{
background-image:url('../images/bouton2.jpg');
display:block;
color:#ffffff;
text-decoration:none;
width:100%;
height:100%;
border:1px solid #000000;
}

.menuhaut a:hover{
background-image:url('../images/bouton.jpg');
color:#3e589b;
border:1px solid #000000;
height:100%;
background: none;
}

.menuhaut a span {
display: none;
}

.menuhaut a:hover span {
display: block;
font-size:1em;
background-color:#4771dc;
color:#ffffff;
text-align:center;
width:20%;
height:20%;
padding:1em;
border:1px solid #000000;
top:65%;
}

Modifié par Pops83 (16 Sep 2005 - 10:53)

Bonjour,

Plus simplement, on peut arriver au même résultat en utilisant l'attribut title :

<li><a href='index2.php?page=sommaire' class='lienhaut' title="Retour à l'accueil">Accueil</a></li>

Plop,

Il existe déjà quelque chose qui fait très bien ce que tu recherches, c'est l'attribut Title sur tes balises <a>

Malgré tout, si c'est pour une question de style que tu veux faire ça, il faut bien comprendre l'astuce.

Le but est de faire afficher le span où le désire par rapport au lieu ciblé.
Pour ceci seul un positionnement absolu sortira le span du flux et te permettra de le positionne où tu veux.
Mais par rapport au premier parent positionné ! L'astuce est donc de positionner en relative tes <a> ou <li> sans pour autant modifier leur emplacement dans le flux.

En clair il te faut rajouter

.menuhaut a { position: relative ; }

et

.menuhaut a:hover span { position: absolute ; }

Je t'encourage à te documenter sur ces positionnements pour bien comprendre
Lien 1
Lien 2

edit : grilled par Vero pour le title
Modifié par tyx (16 Sep 2005 - 10:39)

Merci pour ces réponses rapides.
SI je ne m'abuse le title reste collé au lien et moi je veux que mon commentaires soit au milieu de la page.

J'ai en effet mis ma position en absolute et ça marche et un post de résolu.

J'ai un autre problème mais je vais faire un autre post