Advanced Search

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