2008-12-18 6 views
0

J'essaie d'avoir des sauts de texte pop-up sur une pseudo-classe hover pour différentes lignes dans un menu (éléments de la liste). Je peux faire en sorte que les pop-ups occupent le même espace dans la div si le menu/la liste est horizontal, mais une liste verticale place les popups à la même hauteur verticale que la liste/l'élément de menu "parent".Est-ce que plusieurs popups CSS hover occupent le même espace dans un même div?

Voici le code approprié je jusqu'à présent:

<div id="greenback"> 
    <div class="serviceframe"> 
    <div class="serviceslist"> 
<ul> 
<li><a href="">item 1<span>this is popup1.</span></a></li> 

<p><li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li></p> 

<p><li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li></p> 
</ul> 
     </div><!-- closes serviceslist--> 
    </div><!-- closes serviceframe --> 
</div><!-- closes greenback--> 

CSS:

ul { 
    list-style: disc url(w-arrow.png) outside; 
    } 



#greenback { 
    position: relative ; 
     top: 0em ; 
    width: 800px ; 
    height: 250px ; 
    background-color: #7EBB11 ; 
    border: 3px solid #112D82 ; 
    } 

/*********SERVICE LIST MENU**********/ 
.serviceframe { 
    position: relative ; 
    width: 100% ; 
    height: 94% ; 
    background-color: #666666 ; 
    top: 3%; bottom: 3%; 
    } 
/*--serviceframe is now sitting in greenback--*/ 

.serviceslist { 
    position: relative ; 
    width: 100% ; 
    height: 90% ; 
    top: 1% ; 
    background-color: #7EBB11 ; 
    font-family: Optima, Calibri, Candara, Century-Gothic, 
    Arial, sans-serif; 
    font-size: 100% ; 
    color: black ; 
    display: table-cell ; 
    vertical-align: middle ; 
    z-index: 100 ; 
} 

.serviceslist a 
    {position: relative; 
    display: table-cell; text-align: left; height: 100%; font: 1em sans-serif; 
    text-decoration: none; color: #112D82; 
    background: #7EBB11 ; 
} 

/*appearance of the <a> item (but before the <span> tag) on hover*/ 
.serviceslist a:hover { 
    color: white; 
    } 

/*appearance of the spanned content within <a></a> tags when not hovered*/ 
.serviceslist a span {display: none;} 

/*appearance of spanned content within <a> tags when hovered*/ 
.serviceslist a:hover span { 
    position: absolute; 
    display: table-cell; 
    margin-top: 0em; margin-left: -50%; z-index: 100; 
    width: 40%; height: auto; color: #FFFFFF; background-color: #7EBB11; 
    font: 14px Verdana, sans-serif; text-align: left; 
    } 
+0

Pouvez-vous s'il vous plaît reformater le code? Il est difficile à lire comme il est (indent chaque ligne de quatre lignes pour le rendre facile à lire sur stackoverflow). – csl

+0

J'ai édité la mise en forme pour lui/elle – Greg

+0

Lol, nous éditons tous le formating pour lui ...: D – Paulius

Répondre

1

Mon my, c'est beaucoup de HTML et CSS pour une tâche simple. J'essaie l'habitude de lire tout cela, mais vous donner votre réponse

<ul> 
    <li><a href="">item 1<span>this is popup1.</span></a></li> 
    <li><a href="">item 2<span>This is popup 2's text but I want it to appear in exactly the same place as popup 1's text does.</span></a></li> 
    <li><a href="">item 3<span>same here - how can I get all popups positioned in exactly the same place?</span></a></li> 
</ul> 

ul { position: relative; } 
ul span { position: absolute; } 

Vous avez seulement besoin d'avoir la position relative sur la ul (ou l'un des divs au-dessus) parce que ce que vous êtes désireux de faire vos travées absolues. En outre, supprimez ces balises P autour de vos LI. Vous ne devriez rien avoir entre l'UL et LI.

+0

merci, cela n'a pas semblé faire la moindre différence (au moins en FF) mais je vais l'essayer dans d'autres. les tags P étaient juste pour me donner un peu de rythme et ne pas affecter le résultat de toute façon, mais je les ai sortis quand même. acclamations patrick. –

+0

@patrick - J'ai enlevé beaucoup de css de cela pour le garder simple, mais le fait d'avoir une position relative et absolue dans ces endroits avec des déclarations haut/gauche fonctionnerait très certainement. –

0

Vous voulez que tous les différentes portées à paraître au même endroit? Vous définissez la position relative dans A, ce qui rend l'intervalle "relatif" à celui-ci.

Fix:

  • Retirez le positionnement relatif à ancre. // Bien que cela ne semble pas important dans FF pour une raison quelconque
  • Réglez le positionnement (haut, gauche, etc.) pour sur la valeur désirée.

* Votre extrait de code ne fonctionne pas sur IE6/7, donc je n'ai pas dérangé les bugs dedans.

+0

merci beaucoup, faisant la condition a: hover celui qui définit la position fonctionne un régal. Tellement logique ... c'est mon premier CSS donc j'apprends comme je vais. Je veux le faire correctement dans FF/Sf 1er et puis réparer pour IE (afin que je puisse réaliser une chose qui fonctionne d'abord!) - une bonne approche ou non? Bravo Patrick. –

+0

C'est une approche habituelle, puisque IE6 est si original. Je crois que l'utilisation de pourcentage en hauteur, faites votre snippet buggy dans IE. – Jason

Questions connexes