Can multiple CSS popups occupy the same space within a single div?
I'm trying to get text spaces to pop up on the hover pseudo class for different lines in a menu (list items). I can have popups taking up the same space in a div if the menu / list is horizontal, but the vertical list puts the popups at the same vertical height as the "parent" list / menu item.
Here is the relevant code that I have so far:
<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 text but I want it to appear in exactly the same place as popup 1 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;
}
Mine is mine that a lot of HTML and CSS for a simple task. I won't try to read all of this, but just give you your answer.
<ul>
<li><a href="">item 1<span>this is popup1.</span></a></li>
<li><a href="">item 2<span>This is popup 2 text but I want it to appear in exactly the same place as popup 1 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; }
You only need to have a relative position on the ul (or one of the divs above it), because that's what you want to make your spans absolute.
Also, kill those P marks around your LIs. You shouldn't have anything between UL and LI.
source to share
So you want all the different gaps to appear in the same place? You set a relative position to A, which makes the range "relative" to it.
Fix:
- Remove relative positioning to anchor. // Although it doesn't seem to matter in FF for some reason
- Set the positioning (top, left, etc.) for span to your desired value.
* Your code snippet doesn't work on IE6 / 7, so I didn't bother with errors in it.
source to share