/ Published in: CSS
A simple message box created with only one div container with background and border color, some margin and padding for position the text message nicely, I set the width for 500px, you can change it to auto or any fixed value you want.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<style> .error_msg_001, .success_msg_001, .info_msg_001, .warning_msg_001{ width: auto; height: auto; margin: 1px; padding: 2px 4px; text-align:center; font: bold 15px Arial,sans-serif; } .error_msg_001{ border:solid 1px #FBD3C6; background:#FDE4E1; color: #B10009; } .success_msg_001{ border: solid 1px #ADDE5C; background: #DFF2BF; color: #008000; } .info_msg_001{ border:solid 1px #46B6EC; background:#BDE5F8; color: #00529B; } .warning_msg_001{ border:solid 1px #FDDD5B; background:#FEEFB3; color: #9F6000; } </style> <div id="msg_1" class="error_msg_001"> Error: This username is not available. </div> <div id="msg_2" class="success_msg_001"> Your account has been created successfuly. </div> <div id="msg_3" class="info_msg_001"> Important information for your account. </div> <div id="msg_4" class="warning_msg_001"> Warning: please update your profile information. </div>
URL: http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html