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

    Join Date
    May 2012
    Posts
    37
    Rep Power
    2

    problem in margins


    hello I have a CSS code as following
    Code:
    span.dropt {border-bottom: thin dotted; text-align:center;}
    span.dropt:hover {text-decoration: none; background: #ffffff;}
    
    span.dropt span {position: absolute; left: -9999px;
      margin: 0px 0 0 0px; padding: 3px 3px 3px 3px;
      border-style:solid; border-color:black; border-width:1px; z-index: 6; width:80px;}
      
    span.dropt:hover span {left: 2%; background: #ffffff;} 
    span.dropt span {position: absolute; left: -9999px;
      margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
      border-style:solid; border-color:black; border-width:1px;}
    span.dropt:hover span {margin: 20px auto auto 240px; background: #3CF;}
    and html code
    [HTML]<span class="dropt" title="">formal description<span><b>Protein</b><br/><a href="#">more..</a> </span></span>test !!!

    <span class="dropt"><cons sem="protein">Mybbp1a</cons><span><b>Protein</b><br/><a href="#">more..</a></span></span>[/HTML]

    when I click at the second word the margin still static and appears at the first word as the following pictures:
    the first pic. when I mouse over the first word

    and this pic. when I mouse over the other word

    I want when I mouse over any word the subset list appear under it
    thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    1
    Rep Power
    0

    CSS Margins for Pop-Up


    Did you ever solve this problem of having the pop-up under the triggering link?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    10
    Rep Power
    0

    You have to separate the tag style


    You are setting the "span.dropt span" and "span.dropt:hover span" styles twice which will not work. You have to name them separately.

    CSS

    PHP Code:
    span.dropt 
    {
        
    border-bottomthin dottedtext-align:center;
    }
    span.dropt:hover 
    {
        
    text-decorationnonebackground#ffffff;
    }

    #firstClass span 
    {
        
    positionabsolute
        
    left: -9999px;
      
    margin0px 0 0 0px;
        
    padding3px 3px 3px 3px;
      
    border-style:solid;
        
    border-color:black
        
    border-width:1px
        
    z-index6
        
    width:80px;
    }
      
    #firstClass:hover span 
    {
        
    left2%;
        
    background#ffffff;


    #secondClass span 
    {
        
    positionabsolute;
        
    left: -9999px;
      
    margin4px 0 0 0px;
        
    padding3px 3px 3px 3px
      
    border-style:solid;
        
    border-color:black
        
    border-width:1px;
    }

    #secondClass:hover span 
    {
        
    margin20px auto auto 240px;
        
    background#3CF;
        
    left2%;

    HTML

    PHP Code:
      <span class="dropt" id="firstClass" title="">
        
    formal description
        
    <span>
          <
    b>Protein</b>
          <
    br/>
          <
    a href="#">more..</a
        </
    span>
      </
    span>
      
    test !!!

      <
    span class="dropt" id="secondClass">
        <
    cons sem="protein">Mybbp1a</cons>
        <
    span>
          <
    b>Protein</b>
          <
    br/>
          <
    a href="#">more..</a>
        </
    span>
      </
    span
    P.S. you should format your code so others can easily read it.

    Goodluck!
    Last edited by khayhurst; January 29th, 2013 at 01:56 AM. Reason: which tags are best for HTML?

IMN logo majestic logo threadwatch logo seochat tools logo