CSS Message Boxes for different message types - CSS Snipplr Social Repository

Revision: 19681

at October 28, 2009 11:58 by gd6d

Initial Code

div class="info">Info message</div>
        <div class="success">Successful operation message</div>
        <div class="warning">Warning message</div>
        <div class="error">Error message</div>

body{
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
}
.info, .success, .warning, .error, .validation {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image:url('success.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}

Initial URL

http://css.dzone.com/news/css-message-boxes-different-me

Initial Description

Initial Title

CSS Message Boxes for different message types

Initial Tags

css, error

Initial Language

CSS

Choose a language for easy browsing: