Return to Snippet

Revision: 62235
at February 9, 2013 12:20 by codingforever99


Updated Code
<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>

Revision: 62234
at February 9, 2013 12:10 by codingforever99


Initial Code
.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;
 }

Initial URL
http://function-code.blogspot.com/2012/12/css-message-boxes-for-different-types.html

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

Initial Title
css message boxes for different types

Initial Tags
css, error

Initial Language
CSS