- This topic is empty.
-
AuthorPosts
-
October 21, 2014 at 11:16 am #186763Apparatus17Participant
I was wondering how to have something like an information box fad in or out depending if the object is hovered over i would like to use html and css to do this as apposed to the Js methods I’ve seen only because it seems too lengthy for what I’m doing the page I’ve created is at
My pageOctober 21, 2014 at 11:35 am #186765Paulie_DMemberDo you mean like a tooltip?
I agree that a table is ideal here but I’m not really a fan of the structure inside
<td class="transition"> <sup> 25</sup> <br>Mn<br> <p>Manganese</p> </td>
October 22, 2014 at 5:01 am #186801Apparatus17ParticipantAlmost like a tool tip but almost like and alt where when u hover a text box describing that element appears and have it do it where it positions it depending on the area of the screen that the element is in so that it wont get cut off. also, have a some what translucent affect as where u can see the information in the box but still see part of the text and other elements below. The structure in the td’s is needed to have the elements look as if they are elements but how else would u suggest to create them?
October 22, 2014 at 5:15 am #186803Paulie_DMemberThe structure in the td’s is needed to have the elements look as if they are elements
Not sure what that means but ideally you should have three (divs & spans / paragrapfs would work) and not using break tags for spacing…that’s what margins & padding are for.
<td class="transition"> <p class"number">25</p> <p class="shortcode">Mn</p> <p class="element-name">Manganese</p> </td>
Then you just style each class as required.
positions it depending on the area of the screen that the element is in so that it wont get cut off.
That’s certainly possible but detecting the edge of the screen is something you need javascript for.
How much text are you anticipating?
October 24, 2014 at 7:22 am #186999Apparatus17ParticipantAh 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 tipa.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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.