HTML - 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.
Informations :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.
Aide, Astuces, Trucs... :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.
ATTENTION !!! lisez bien cette note...<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 :
- Propriétés de couleur d'arrière-plan : BACKGROUND
- Propriétés de couleur des textes : COLOR
- Propriétés de la mise en forme des polices : FONT
- Propriétés des marges externes : MARGIN
- Propriétés des marges internes : PADDING
- Propriétés des bordures des boîtes : BORDER
- Propriétés des styles de liste : LIST-STYLE
