retour à la liste
Faire de "jolis" messages d'informations
Il me semble indispensable qu'un site pssède de "jolis" messages d'information pour prévenir ses utilisateurs convenablement. Je mets le mot joli entre guillemets, parce que, bien évidemment, tout cela reste totalement subjectif.
On pourra parler sans jamais être d'accord sur le graphisme d'un site, mais une chose est certaine, celui-ci est très important, et notamment sur un site Web.

Je vous propose ici de vous indiquer comment j'ai réalisé les miens, il ne vous reste plus qu'à apporter vos modifications...

Le seul travail réside dans la création de classes CSS gérant les différents messages que l'on souhaite utiliser.

div.msgValideAvecIcone {
        width: 600px;
        padding: 15px 10px 15px 60px;
        text-align: left;
        font-weight: bold;     
        font-size: 9pt;
        margin: auto;
        margin-top: 25px;
        background: url(msgValide.png) 7px center no-repeat;
        border: 2px solid green;
        background-color: #A0FF9F;
        color: green;
}
 
Exemple :
Ceci est un test du message "validation" !


Comme vous pouvez le constater, j'utilise un fichier png, ce qui est plus fin que les autres types de fichiers images, mais qui pose des problèmes sur les vieux navigateurs, Internet Explorer 6 en tête. Il existe des scripts JavaScript qui règle le problème de transparence de ces fichiers sous ce navigateur, mais pour ma part, j'ai décidé de ne plus utiliser ce genre d'artifice pour ce navigateur qui, bien qu'encore utilisé, est (fort heureusement) amené à disparaître.
Néanmois, ces messages se comportent très bien sur tous les autres navigateurs qui gère la transparence nativement. Pour IE6, on peut mettre en place un hack CSS pour faire afficher un gif transparent au lieu du fichier PNG, mais on perdra en qualité.
Je vous donne d'autres exemples de messages :
Ceci est un test du message "erreur" !
Ceci est un test du message "information" !
Ceci est un test du message "question" !
Ceci est un test du message "warning" !


Vous pouvez télécharger, en cliquant ici les icones utilisées.

Je vous livre donc ces 5 classes CSS en un seul bloc, et vous laisse adapter les couleurs à vos goûts :

div.msgValideAvecIcone, div.msgWarningAvecIcone, div.msgErreurAvecIcone,
div.msgQuestionAvecIcone, div.msgInfoAvecIcone {
        width: 600px;
        padding: 15px 10px 15px 60px;
        text-align: left;
        font-weight: bold;     
        font-size: 9pt;
        margin: auto;
        margin-top: 25px;
}

div.msgValideAvecIcone {
        background: url(msgValide.png) 7px center no-repeat;
        border: 2px solid green;
        background-color: #A0FF9F;
        color: green;

}
div.msgWarningAvecIcone {
        background: url(msgWarning.png) 7px center no-repeat;
        border: 2px solid #FFA200;
        background-color: #FFDC9F;
        color: #FFA200;
}

div.msgErreurAvecIcone {
        background: url(msgErreur.png) 7px center no-repeat;
        border: 2px solid red;
        background-color: #FFBFBF;
        color: #D8000C;
}

div.msgQuestionAvecIcone {
        background: url(msgQuestion.png) 7px center no-repeat;
        border: 2px solid blue;
        background-color: #9FC6FF;
        color: #12315F;
}

div.msgInfoAvecIcone {
        background: url(msgInfo.png) 7px center no-repeat;
        border: 2px solid #636F37;
        background-color: #D5EF77;
        color: #636F37;
}
 
Ce qu'il y a de bien avec ces classes CSS, c'est qu'elles gèrent également un texte sur plusieurs lignes :
Ceci est un test du message "erreur"
écrit
sur plusieurs lignes !



 
retour à la liste
laurent.rameil@free.fr