Posted By

msstar on 12/12/12


Tagged

css html


Versions (?)

Message box


 / Published in: CSS
 

Message box for different types of message

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5. body{
  6. font-family: Arial, Helvetica, sans-serif;
  7. font-size: 13px;
  8. }
  9. .info, .success, .warning, .error, .validation {
  10. border: 1px solid;
  11. margin: 10px 0px;
  12. padding: 15px 10px 15px 50px;
  13. background-repeat: no-repeat;
  14. background-position: 10px center;
  15. }
  16. .info {
  17. color: #00529B;
  18. background-color: #BDE5F8;
  19. background-image: url('img/info.png');
  20. }
  21. .success {
  22. color: #4F8A10;
  23. background-color: #DFF2BF;
  24. background-image: url('img/success.png');
  25. }
  26. .warning {
  27. color: #9F6000;
  28. background-color: #FEEFB3;
  29. background-image: url('img/warning.png');
  30. }
  31. .error{
  32. color: #D8000C;
  33. background-color: #FFBABA;
  34. background-image: url('img/error.png');
  35. }
  36. .validation{
  37. color: #D63301;
  38. background-color: #FFCCBA;
  39. background-image: url('img/validation.png');
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="info">Info message</div>
  45. <div class="success">Successful operation message</div>
  46. <div class="warning">Warning message</div>
  47. <div class="error">Error message</div>
  48. <div class="validation">Validation message 1<br>Validation message 2</div>
  49. </body>
  50. </htm>

Report this snippet  

You need to login to post a comment.