Exemple de structure CSS

A utiliser comme "patron de conception" pour votre propre CSS.

Remarque : il s'agit d'une CSS pour profil de type "Profil avancé (XHTML pour des CSS 2.1)" (sous votre compte MH : Options / Apparence de mon profil).

Elle renferme la structure de la page de profil, il ne vous reste plus qu'à l'habiller suivant vos convenances : couleurs, police, images, etc.

Attention : le code présenté ne "sylise" pas (spécifiquement) les pages "Evénements" et "Classements". Vous devez le faire !

body {
  background-color: #FEFEE2; /* Fond couleur "blanc cassé" car le blanc fait mal aux yeux ! */
  border: 1px solid #000;    /* Applique un cadre pour distinguer clairement ce qu'on manipule */
  width: 732px;              /* Définit une largeur fixe à l'élément, pour pouvoir le centrer sur la page... */
  margin: 0 auto;            /* Petite astuce CSS pour centrer un élément (nécessite de fixer la largeur !) */
}

h1 {
  background-color: #FDF1B8; /* Fond couleur "crème", pour faire ressortir l'élément */
  color: #DB1702;            /* Applique un peu de couleur à la police de caractères, attention : la couleur change en fonction du fond ! */
  text-align: center;        /* Centre le texte "nom du troll" */
}

ul#pjLinks {
  background-color: #FDF1B8;
  list-style-type: none;     /* Supprime les puces en face des liens */
  padding-left: 0;           /* "Annule" l'indentation automatique de la liste, pour caler le texte complètement à gauche */
  text-align: center;        /* Centre le texte vis à vis du conteneur (la liste "pjLinks"), délimité par le cadre */
}

ul#pjLinks li {
  display: inline;           /* Affiche les différents éléments du conteneur sur une même ligne */
  padding: 10px;             /* Donne un peu d'espace aux liens, applique des "marges intérieures" */
}

ul#pjLinks li a {
  text-decoration: none;     /* Supprime le style par défaut "souligné" des liens */
  font-weight: bold;         /* Applique l'effet "gras" sur la police */
  color: #9E0E40;
}

ul#pjLinks li a:hover {      /* L'attribut "hover" s'applique aux liens ("a") sur lesquels l'utilisateur passe la souris */
  color: #ED7F10;            /* On change la couleur lors des "survols de liens" */
}

#formView {
  border: 1px solid #000;    /* On encadre, ne pas hésiter à jouer avec les différentes bordures possibles... */
  position: fixed;           /* Positionnement absolu et fixe (lors du défilement) du formulaire "Trõll n° : [80000] [Afficher]" */
  top: 0;                    /* Fixe le formulaire dans le coin, en haut... */
  right: 0;                  /* ... à droite. */
  padding: 10px;             /* Eloigne une peu les éléments du bord */
  text-align: center;        /* Centre les éléments dans le "cadre" */
  width: 180px;              /* Définit une largeur fixe à l'élément, une idée derrière la tête pour plus tard... */
}

#IDPJ label {
  /*display: none;           /* Fait disparaitre l'intitulé "Trõll n° : " */
}

#IDPJ input {
  width: 50px;               /* Largeur de la zone de saisie du "numéro" du troll à afficher */
  text-align: center;        /* Centre le "numéro du troll" dans le champ <input> du formulaire */
}

form#formView .submit {
  margin-top: 10px;          /* "Décolle" le bouton "Afficher" des éléments du dessus */
}

form#formView .submit input {
  background-color: #FDF1B8; /* Applique un fond au bouton "Afficher", on peut lui appliquer n'importe quel style ! */
}

h2 {
  display: none;             /* Fait disparaitre les titres "Son Profil Général" et "Description", à vos risques et périls */
}

#profil {
  background-color: #FDF1B8;
  margin-top: 20px;
  padding: 20px;             /* "Décolle" la liste des bords */
  line-height: 20px;         /* Donne davantage d'air à la liste */
}

dt {
  float: left;               /* Pour que les informations se trouvent sur la même que leur intitulé */
  font-weight: bold;         /* Fait ressortir les intitulés de la description du profil, génère un léger décalage dt - dd */
  margin-top: -1px;          /* Ré-alignement dt - dd */
}

dd {
  color: #DB1702;            /* Un peu de couleur... */
  text-indent: 10px;         /* Décolle un peu les valeurs des intitulés */
}

dt.blason {
  display: none;             /* Fait disparaitre le texte "Blason", tant pis pour l'acessibilité (comprenne qui doit). */
}

dd.blason {
  text-align: right;         /* Plaque l'image de votre avatar à droite */
  float: right;              /* Pour que les éléments du profil qui suivent "enveloppent" le "Blason" par la gauche */
}

dd.numero span#envoiMessage {
  display: block;            /* Affichage du lien "[Envoyer un message à ce Trõll]" sur une nouvelle ligne */
}

dd.numero span#envoiMessage a {
  text-decoration: none;     /* Mêmes idées que pour les liens "| Profil | Evénements | Classements |" */
  color: #9E0E40;
}

dd.numero span#envoiMessage a:hover {
  color: #ED7F10;
}

.email {
  display: none;             /* Personnellement je n'affiche pas mon adresse mail, une ligne de gagnée pour alléger le profil */
}

dd.guilde a {
  text-decoration: none;     /* On traite toujours de la même manière les liens... */
  color: #9E0E40;
  font-weight: bold;         /* On décide de faire ressortir un peu plus le nom de la guilde en le mettant en "gras" */
}

dd.guilde a:hover {
  color: #ED7F10;
}

dt.guilde, dt.mouches, dt.meurtres, dt.deces, dt.equipement {
  margin-top: 0px;           /* De nouveau un décalage à rattraper, à cause du "gras" sur le lien de la guilde... */
}

dt.distinctions, dt.maladie, dt.equipement, dt.possessions {
  float: none;               /* Petit problème avec les listes "distinctions", "équipement" et "possessions" réglé ! */
  padding-left: 2px;         /* Rattrape le décalage provoqué par le précédent "padding" sur les autres éléments de la liste */
}

dd.distinctions ul, dd.maladie ul {
  list-style-type: none;     /* On supprime les puces de la liste des "distinctions" */
  padding: 2px 0;            /* Rattrape une indentation un peu trop généreuse */
}

dd.equipement ul, dd.possessions ul {
  padding: 2px 0;            /* On garde les puces mais on décale à gauche de la même manière que pour les "distinctions" */
}

dd.equipement li span.magie {
  color: #9E0E40;            /* On fait ressortir les templates de notre équipement */

  font-weight: bold;

}

dd.possessions a {
  text-decoration: none;     /* On change le style de nos bidouilles */
  color: #DB1702;
}

dd.possessions a:hover {
  color: #ED7F10;
}

.numero, .race, .creation, .niveau, .guilde, .mouches, .meurtres, .deces {
  padding: 2px;              /* Donne un peu d'air à la liste */
}

#disclaimer {
  font-size: x-small;
  font-weight: normal;
  text-align: center;
}

#description {
  background-color: #FDF1B8;
  padding: 20px;
}

/*
#styleSwitcher {
  margin-top: 20px;
  text-align: center;
}
*/

#styleSwitcher {
  border: 1px solid #000;
  position: fixed;
  top: 80px;
  right: 0;
  padding: 10px;
  text-align: center;
  width: 180px;
}

#styleSwitcher a {
  text-decoration: none;
  color: #DB1702;
}

#styleSwitcher a:hover {
  color: #ED7F10;
}