Div Boxen für Warnungen, Informationen und weitere Meldungen

Weil ich selbst immer wieder nachschlage muss wie ich das so halbwegs optimal hinbekomme, notiere ich mir das hier einmal in der Hoffnung das es anderen auch hilft. Mit CSS habe ich ganz einfach CSS Alerts gemacht. So können diese aussehen, diese kann man ja wenn man will umgestalten. Der Abruf erfolgt simpel durch den Klassen Aufruf der CSS. [html] <div class="info">Eine Infonachricht!</div> <div class="success">Erfolgreiche Nachricht</div> <div class="warning">Warnmeldung</div> <div class="error">Fehler Meldung</div> [/html] Die CSS hat das Grundprinzip, was jedes Div braucht und darauf folgend die jeweilige Eigenschaft für die jeweiligen Typen. [css] .info, .success, .warning, .error, .validation { background-repeat: no-repeat; background-position: 10px center; border: 1px solid; margin: 10px 0px; padding:15px 10px 15px 50px; } .info { background-color: #BDE5F8; background-image: url('images/alerts/info.png'); color: #00529B; } .success { background-color: #DFF2BF; background-image:url('images/alerts/success.png'); color: #4F8A10; } .error { background-color: #FFBABA; background-image: url('images/alerts/error.png'); color: #D8000C; } .warning { background-color: #FEEFB3; background-image: url('images/alerts/warning.png'); color: #9F6000; } .validation { background-color: #FFCCBA; background-image: url('images/alerts/validation.png'); color: #D63301; }[/css]