#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Derby UK
    Posts
    106
    Rep Power
    16

    Positioning a popup within suckerfish menu


    Dear clever CSSers

    I am currently changing my flyout menu from something rather complex, to the Suckerfish version.

    I have one problem: I have been using some mouseover tooltip-like information boxes giving extra details of the contents of a link, by having a div within the text of the hyperlink, to come visible when hovered. It has worked very well in my old version. Here's my test page

    In the new version, there are two lines of CSS allowing the popup to open, which is also enclosed in a balloon-style info graphic, actually in two halves so that it can open like a clamshell if there is extra text in there, or a user has a larger than normal font setting:

    Code:
    #nav a span {visibility:hidden;position:absolute;top:-120px;left:175px;background: url(http://www.internetevangelismday.com/images/balloontop.png) no-repeat transparent top left;width:196px;height:105px;line-height:1.2em;text-align:left;word-wrap:break-word;text-wrap:normal;white-space:normal;padding:0px;} #nav a:hover span {visibility:visible;z-index:9999;min-height:130px;}
    This CSS does allow the popup to appear, but unfortunately it positions each popup at the same position on the page. I would prefer it that they appeared with the 'point' of the balloon pointing at the relavent link. You can see that if you hover '2nd level here', and then 'page 1', or 'page 2' or 'another page', the info balloon appears in exactly the same place on the page.

    Changing the positioning from position absolute to position relative causes the popup to appear in about the correct position, but it also expands the link area on the menu itself to a huge blank area and misses off the balloontop.png graphic from the popup, which I presume is staying inserted, hidden, within the menu item and causing it to expand.

    Thanks for any ideas on this. BTW, the javascript is a neat one that repositions submenus where necessary so they can't vanish below the bottom of the page.

    Best wishes

    Tony
    Last edited by soon; September 29th, 2009 at 04:16 PM. Reason: small improvement
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Try taking a look at this code example. In this i position text that when on hover it will be above the <div> with blue background. It is the same code for each of the 3 divs and you will see how its done. I put relative positioning <div class='entry" which makes all absolute positioned elements inside of that element to be relative to its container
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Check this out</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    div.entry{
    	position:relative;
    	float:left;
    }
    span{
    	position:absolute;
    	top:0;
    	color:black;
    	display:none;
    }
    div.hover{
    	width:100px;
    	height:100px;
    	margin:100px;
    	border:1px solid black;
    	color:white;
    	background-color:blue;
    }
    div.hover:hover span{display:block;}
    </style>
    </head>
    <body>
    <div class="entry">
     <div class="hover">
       <p>lawl</p>
      <span>alsjd</span>
     </div>
    </div>
    
    <div class="entry">
     <div class="hover">
       <p>lawl</p>
      <span>alsjd</span>
     </div>
    </div>
    
    <div class="entry">
     <div class="hover">
       <p>lawl</p>
      <span>alsjd</span>
     </div>
    </div>
    
    </body>
    </html>
    Cheers
    Last edited by Skipt; September 27th, 2009 at 02:22 PM.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Derby UK
    Posts
    106
    Rep Power
    16
    Thanks so much, I'll experiment with this.

    Best wishes

    Tony

IMN logo majestic logo threadwatch logo seochat tools logo