ASP Source Code

Step 1 : Add Style sheet below the header Tag < style type ="text/css"> .tooltip { border-bottom : 1px dotted #000000 ; color : #000000 ; outline : none ; cursor : help ; text-decoration : blink ; position : relative ; } .tooltip span { margin-left : -999em ; position : absolute ; } .tooltip:hover span { border-radius : 5px 5px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; box-shadow : 5px 5px 5px rgba(0, 0, 0, 0.1) ; -webkit-box-shadow : 5px 5px rgba(0, 0, 0, 0.1) ; -moz-box-shadow : 5px 5px rgba(0, 0, 0, 0.1) ; font-family : Calibri, Tahoma, Geneva, sans-serif ; position : absolute ; left : 1em ; top : 2em ; z-index : 99 ; margin-left : 0 ; width : 250px ; } .tooltip:hover img { border : 0 ; margin : -10px 0 0 -55px ; float : left ; position : absolute ; } .tooltip:hover em { font-family : Candara, Tahoma, Geneva...

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;}

Button Creating with CSS Styles for Button Creating button with Css: .buttonsave,.buttoncancel{ padding: 3px 5px 5px 20px; background: #663300 url(../IMG/save.png) no-repeat scroll 5px center; color:#D59200; font-weight:bold; height:30px; line-height:2px; margin-bottom:14px; text-decoration:none; width:85px; font-family:Verdana; font-size:13px; -webkit-border-radius: 16px; -moz-border-radius: 10px; } .buttonsave{ background: #663300 url(../IMG/save.png) no-repeat scroll 5px center; } .buttoncancel{ background: #663300 url(../IMG/cancel.png) no-repeat scroll 5px center; } .buttonsave:hover,.buttoncancel:hover { color:#fff; } .buttonsave:active,.buttoncancel:active { color:#fff; } .buttonsave:focus,.buttoncancel:focus { color:#fff; }

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...