Div Boxen für Warnungen, Informationen und weitere Meldungen
21. September 2014
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. Eine Infonachricht! Erfolgreiche Nachricht Warnmeldung Fehler Meldung So können diese aussehen, diese kann man ja wenn man will […]
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.
Eine Infonachricht!
Erfolgreiche Nachricht
Warnmeldung
Fehler Meldung
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]
Kommentare
Kommentare werden geladen...