Warnbox, Fehlerbox, Notizbox etc.

    Hallo liebe Community,
    da ich eben ein wenig Zeit hatte und diese kleinen Boxen brauchte habe ich welche erstellt, diese könnt Ihr gern nutzen.


    Die CSS Datei hat folgenden Inhalt:

    Spoiler anzeigen

    Code
    /*Aufruf der Box: <div class="error_style text-block"><p class="printonly"><strong>Error!</strong></p> Text innerhalb der Box </div>*/.text-block {    border-radius: 4px;    -moz-border-radius: 4px;    -webkit-border-radius: 4px;	padding: 5px 10px 5px 50px;    background: #eee;    margin: 10px 0 0;	min-height: 35px;	overflow: auto;}.text-block p.first-p {	margin-top: 0;}.warning_style {	background: #FFFF99/*<- Hintergrundfarbe | Pfad zum Bild ->*/ url(css/boxen/warning.png) no-repeat scroll 10px 7px;    border: 1px solid #000000;/*Randbreite, Randfarbe*/    color: #000000;/*Schriftfarbe*/}.error_style {    background: #FCC/*<- Hintergrundfarbe | Pfad zum Bild ->*/ url(css/boxen/warning.png) no-repeat scroll 10px 7px;    border: 1px solid #000000;/*Randbreite, Randfarbe*/    color: #000000;/*Schriftfarbe*/}.notice_style {    background: #FDEBAE/*<- Hintergrundfarbe | Pfad zum Bild ->*/ url(css/boxen/notice.png) no-repeat scroll 10px 7px;    border: 1px solid #000000;/*Randbreite, Randfarbe*/    color: #000000;/*Schriftfarbe*/}.important_style {    background: #DEE3AB/*<- Hintergrundfarbe | Pfad zum Bild ->*/ url(css/boxen/important.png) no-repeat scroll 10px 7px;    border: 1px solid #000000;/*Randbreite, Randfarbe*/    color: #000000;/*Schriftfarbe*/}.printonly {    display: none;}

    Spoiler anzeigen

    Einbau in eine HTML Datei:
    Spoiler anzeigen

    Als erstes auf die Datei(Css) verweisen:

    Code
    <link rel="stylesheet" type="text/css" href="boxen.css">

    Spoiler anzeigen

    Dannach kommt die Box zum Einsatz:

    Code
    <div class="error_style text-block"><p class="printonly"><strong>Error!</strong></p> Fehlerbox </div>	<div class="warning_style text-block"><p class="printonly"><strong>Warning!</strong></p> Warnbox</div>	<div class="important_style text-block"><p class="printonly"><strong>Important!</strong></p> Hinweisbox </div>	<div class="notice_style text-block"><p class="printonly"><strong>Notice!</strong></p> Notizbox </div>

    Spoiler anzeigen


    Viel mehr ist es auch schon garnicht ;)
    Achso ja die Boxen passen sich Ihrem Platz an d.h Sie sind immer genau so groß, dass sie noch in den Berreich reinpassen ;)
    so wie es momentan aufgebaut ist wären die Maße 30px × 30px geeignet.
    Ich weiß das es nichts besonderes oder großes ist, aber evtl kann es ja jemand gebrauchen.
    Gruß,
    CedBec
    ______
    Vorschau, Bilder/Icons sind links neben dem Text ;)


    __
    Edit:
    Aussage, wo die Bilder wären hinzugefügt.
    Maße.

    2 Mal editiert, zuletzt von CedBec ()

    Danke für die positive Bewertung;)
    Farben lassen sich in der CSS Datei ja auch ganz leicht anpassen.
    //EDIT:
    Ich habe oben vergessen die Maße mitdazu zu schreiben, so wie es momentan aufgebaut ist wären die Maße 30px × 30px geeignet.

    Einmal editiert, zuletzt von CedBec ()

    Der Ramen war eigentlich so das er ein wenig von der Hintergrundfarbe abgehoben also deutlicher war aber das gefällt nunmal nicht jedem daher habe ich es für den Anfang auf schwarz gemacht. In dem CSS Quelltext steht aber wo man den gewollten Farbcode hinschreiben muss ;)
    Dennoch Danke für deine Bewertung
    PS: Icons sind nicht dabei, da ich selbst kein guter gfx'ler bin und keine lust habe mir irgendwo welche zu ziehen und zu gucken ob die überhaupt frei genutzt werden, das solltet Ihr übernehmen.


    Werde evtl bald nochmal n bissel was besseres draus bauen:b