Skip to main content

Posts

Showing posts with the label css message box

CSS mouseover for text

CSS mouseover for text on Mouse over text to be displayed by CSS. Mouseover with a text paragraph <span class="dropt" title="Title for the pop-up">Hot Zone Text <span style="width:500px;">Pop-up text</span> </span> CSS code for class dropt: span.dropt {border-bottom: thin dotted; background: #ffeedd;} span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } span.dropt span {position: absolute; left: -9999px; margin: 20px 0 0 0px; padding: 3px 3px 3px 3px; border-style:solid; border-color:black; border-width:1px; z-index: 6;} 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 0 0 170px; background: #ffffff; z-index:6;}

CSS Message Boxes for different message types

CSS Message Boxes for different message types 1. Information messages The purpose of information messages is to inform the user about something relevant. This should be presented in blue because people associate this color with information, regardless of content. This could be any information relevant to a user action. 2. Success messages Success messages should be displayed after user successfully performs an operation. By that I mean a complete operation - no partial operations and no errors. For example, the message can say: "Your profile has been saved successfully and confirmation mail has been sent to the email address you provided". This means that each operation in this process (saving profile and sending email) has been successfully performed. 3. Warning messages Warning messages should be displayed to a user when an operation couldn't be completed in a whole. For example "Your profile has been saved successfully, but confirmation mai...