advanced code snippet search

Posted By

msstar on 12/12/12


Tagged

css html


Versions (?)

Message box

 / Published in: CSS
 

Message box for different types of message

Expand | Embed | Plain Text 
  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.