Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Making text box using css and html Reply To: Making text box using css and html

#186999
Apparatus17
Participant

Ah OK i figured it out and a tool tip did do what i need but my only problem now is that the elements after group 9 need to be displayed to the left of the element block as apposed to the right as the current are because when you get to He(helium) it expands into the pare of the page making it impossible to see without scrolling right which id rather the user not have to do.
Here’s the current part that creates the too tip


a.tooltip /*------------------------------applied to nonmetals*/
        {
            outline:none; 
        }
        a.tooltip strong 
        {
            line-height:30px;
        }
        a.tooltip:hover 
        {
            text-decoration:none;
        }

a.tooltip span 
{
    display:none;
    line-height:16px;
    margin-left:28px;
    margin-top:-30px;
    padding:14px 20px;
    width:450px; 
    z-index:10;
}
a.tooltip:hover span
{ 
    background:#228C24; 
    border:1px solid #000000;
    color:#111;
    display: inline;
    position: absolute;
}
    /*CSS3 extras*/
a.tooltip span
{
    border-radius:4px;
    box-shadow: 5px 5px 8px #707062;
}/*---------------------------------------------------------end of nonmetals-*/

and that is just for one of the element groups what changes the actual position of the tip is


a.tooltip span 
        {
            display:none;
            line-height:16px;
            margin-left:28px;
            margin-top:-30px;
            padding:14px 20px;
            width:450px; 
            z-index:10;
        }

specifically the margin-left which i thought by just changing the left to right would work…it does not