Accueil »wiki »Creer_un_message_d_erreur_personnalise

Tuto pour créer un message d'erreur sympas en xhtml/css

Les Pages Thématiques
Infos installationLe 'Bac à sable'

Les prérequis, les hébergeurs testés, un tutoriel d'installation, le glossaire, l'installation d'un style, ...

image  Les Modules

Présentation des modules et tutoriel de duplication

image  Les Blocs

Listing des blocs par défaut, tutoriel d'ajout de bloc dans un modèle, informations pour les futurs codeurs, ...

image  Les Astuces

Créer un message d'erreur personnalisé, ne plus recevoir d'email de notification, ...

image  PHP5

Les astuces pour passer de PHP4 à PHP5 selon les hébergeurs spécifiés

image  Le Graphisme

Modification de la bannière, du calendrier du blog, menu de navigation à la verticale, les switchs, imposer un thème à un module, ajout d'une image dans le message d'alerte,  ajouter une image sur la barre de navigation, ...

image  Le WYSIWYG

Ajouter des titres de format, présentation de qqs outils, ajouter une image depuis votre pc, ajouter un bbcode, ...

image  La Gestion

Comment activer un membre, gérer les permissions, créer un groupe coloré, attribuer des droits de modération, tous les outils pour gérer vos membres...

image  Le Coin des developpeurs

Le système de cache, la structure des fichiers, le fonctionnement des modules, le système de templates/thèmes/styles, ...
Soutenir Malleo
Pour faire un don

Participer à l'hébergement de mon site
Partenaires
Il était une petite main...
Malleo :: le CMS qui fait blog, forum, wiki, pages web
RSS Image
Combattez les SPAMS

Comment créer un message d'erreur sympas en xhtml/css



Avant de commencer voici un aperçu du résultat final afin de vous montrez à quoi sert ce tuto.


data/images/demoai8.png


Pour réaliser ceci nous allons prendre l'image suivante (taille 32x32). data/images/warningpd3.png

Code CSS à mettre dans votre fichier style.css
 Déplier
  1. /* tableau du message d'erreur */ 
  2. table.warning{ 
  3. margin: 0 auto; /* alignement (centrer) */ 
  4. width:680px; /* dimension */ 
  5. border:1px solid #f46767; /* couleur de la bordure et epaisseur */ 
  6. margin-bottom:10px; /* marge en dessous du tableau */ 
  7. } 
  8.  
  9. /* Cellule du tableau */ 
  10. td.warning{ 
  11. padding-left:32px; /* décallage du texte pour éviter la superposition du texte sur l'images */ 
  12. background:#ffcccc url('warning.png') no-repeat; /* couleur et images de fond de la cellule */
  13. height:32px; /* hauteur de la cellule */ 
  14. text-align:center; /* alignement du texte */ 
  15. font-weight:bold; /* text en gras */ 
  16. }

 
Code XHTML à mettre dans vos fichiers html (oublier pas de remplacer le texte).

 Déplier
  1. <table class="warning">
  3. <td class="warning">Vous n'avez pas de smileys en attente d'installation dans le dossier data/smileys/, veuillez mettre des smileys dans ce dossier pour pouvoir en installer.</td>
  4. </tr>
  5. </table>


Voila c'est fini.


Tuto proposé par Liz@rd