problem in margins

Dev Shed Forums Sponsor:

June 1st, 2012, 08:22 AM

wama_mms

Contributing User

Join Date: May 2012

Posts: 37

Time spent in forums: 4 h 27 m 40 sec
Reputation 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]formal descriptionProtein <a href="#">more..</a> test !!!

<cons sem="protein">Mybbp1a</cons>Protein <a href="#">more..</a>[/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

January 25th, 2013, 10:37 AM

webmom

Registered User

Join Date: Jan 2013

Posts: 1

Time spent in forums: 2 m 25 sec
Reputation Power: 0

CSS Margins for Pop-Up

Did you ever solve this problem of having the pop-up under the triggering link?

January 29th, 2013, 01:54 AM

khayhurst

Registered User

Join Date: Jan 2013

Posts: 10

Time spent in forums: 3 h 16 m 38 sec
Reputation 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-bottom: thin dotted; text-align:center;

}

span.dropt:hover 

{

    text-decoration: none; background: #ffffff;

}



#firstClass 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;

}

  

#firstClass:hover span 

{

    left: 2%;

    background: #ffffff;

} 



#secondClass span 

{

    position: absolute;

    left: -9999px;

  margin: 4px 0 0 0px;

    padding: 3px 3px 3px 3px; 

  border-style:solid;

    border-color:black; 

    border-width:1px;

}



#secondClass:hover span 

{

    margin: 20px auto auto 240px;

    background: #3CF;

    left: 2%;

}

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?

problem in margins

Developer Shed Advertisers and Affiliates