HTML - Boîtes Message

 Boîtes Message 
 Boîtes Message 

Mes boîtes de messages

Les règles ci-dessous, gérent les 3 boîtes modèles de message, avec une image différente pour chacune d'elles, ainsi que la couleur texte et celle du fond, également la bordure. Ce style est commenté directement dans la feuille, c'est la solution la plus sûre pour s'y retrouver dès que le fichier CSS s'agrandi. Je reviendrai sur ce sujet car il y a d'autres possibilités en créant plusieurs fichiers, ce qui simplifierait la maintenance.

/* ======================================
   GENERALITES SUR LES 3 BOITES SUIVANTES
   -------------------------------------- */
.boiteinfo, .boiteastuce, .boitedanger, {
width: 470px;
margin: auto;
padding: 5px;
font-family: "comic sans MS",arial,sans-serif;
font-size: 1em;
text-decoration: none;
text-align: left;
}
/* =======================================
   Généralités sur l'image dans las boîtes
   --------------------------------------- */
.boiteinfo img {float:left; border:0px; margin:5px;}
.boiteastuce img {float:left; border:0px; margin:5px;}
.boitedanger img {float:left; border:0px; margin:5px;}
/* ==============================
   Boîte message information avec image
   ------------------------------ */
.boiteinfo {
border: 4px inset #d9ffd9;
background-color: #99ff99;
color: #009900;
}
/* ==============================
   Boîte message astuce avec image
   ------------------------------ */
.boiteastuce {
border: 4px groove #d9ffd9;
background-color: #FFFFCC;
color: #663300;
}
/* ==============================
   Boîte message danger avec image
   ------------------------------ */
.boitedanger {
border: 4px outset #d9ffd9;
background-color: #FBAEBA;
color: #FF0000;
}
/* ==============================
   Titre des boîtes ci-dessus
   ------------------------------ */
.titremess {
width: 100%;
padding: 3 10 3 10;
background-color: #d9ffd9;
color: #660000;
font-style: italic;
font-weight: bold;
}

Si vous souhaitez utiliser ces règles de style, copiez et collez-les en fin de votre fichier de feuille de style  que vous trouverez dans l'espace de gestion de votre blog.

Code source HTML pour chaque boîte...

Je laisse le texte dans ces modèles en exemple, ceci vous donne la possibilité en le sélectionnant de saisir en recouvrement votre message.

InformationsInformations :
Ma boîte "Informations",contenant contenant, comme son nom l'indique, des informations en tous genres.

Html avec mon texte ci-dessous...

<div class="boiteinfo"><img src="https://static.blog4ever.com/2006/01/490/artimage_490_753182_20100415435099.gif" alt="Informations">
<span class="titremess">Informations :</span><br>
<div class="textmess">Ma boîte "<b>Informations</b>",contenant contenant, comme son nom l'indique,
des informations en tous genres.</div>
</div>

Après avoir ajouté les règles dans votre fichier de CSS, vous pourrez,  copier et coller le code ci-dessus dans le composeur de Blog4ever, en ayant cocher la case prévue pour saisir en code source HTML, insérez-le où vous souhaitez qu'il s'affiche, n'oubliez pas de décocher la case, puis validez votre article.


Idem pour cette boîte et la suivante, si l'image ne vous plaît pas, sélectionnez la dans le composeur et avec le bouton image de la barre d'outil ouvrez la boîte de dialogue qui vous permettra de rentrer l'adresse de la nouvelle image.

InformationsAide, Astuces, Trucs... :
Ma boîte "Astuces", remarque ou précision dans le contexte de la page, pour retenir l'attention du visiteur. Une explication sur une procédure en cours, une sorte d'aide pour mieux comprendre le fonctionnement.

Le texte de ces boîtes s'adapte selon la taille de l'image flottante à gauche, et suivant la longueur de ce texte qui viendra s'aligner sur le bord gauche.


<div class="boiteastuce"><img src="https://static.blog4ever.com/2006/01/490/artimage_490_753326_201004154530864.gif" alt="Informations">
<span class="titremess">Aide, Astuces, Trucs... :</span><br>
<div class="textmess">Ma boîte "<b>Astuces</b>", remarque ou précision dans le contexte de la page,
pour retenir l'attention du visiteur. Une explication sur une procédure en cours, une sorte d'aide pour
mieux comprendre le fonctionnement.<br>
<p>Le texte de ces boîtes s'adapte selon la taille de l'image flottante à
gauche, et suivant la longueur de ce texte qui viendra s'aligner sur le bord gauche.</p></div>
</div>

Remarquez au passage, l'apparence différente des bordures à chaque boîte.

InformationsATTENTION !!! lisez bien cette note...
Ma boîte "Danger", pour prévenir d'un risque d'erreur qui pourrait être grave dans le fonctionnement de la procédure en cours.

<div class="boitedanger"><img src="https://static.blog4ever.com/2006/01/490/artimage_490_753101_201004154331989.gif" alt="Informations">
<span class="titremess">ATTENTION !!! lisez bien cette note...</span><br>
<div class="textmess">Ma boîte "<b>Danger</b>", pour prévenir d'un risque d'erreur qui pourrait être grave dans
le fonctionnement de la procédure en cours.</div>
</div>

AIDENET, un de mes outils qui m'a aidé à créer ces boîtes de message.

Liste des liens sur les propriétés CSS utilisées


Extrait du tutoriel sur le CSS du site Aidenet


Pour plus d'informations sur le CSS suivre ces liens :




03/02/2008
0 Poster un commentaire

A découvrir aussi


Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres