Visualiser · Éditer · Uploader · Historique

(r�-aiguill� depuis Outils.AideEnCss)

Page explicative sur la CSS des profils de Mountyhall.

Le but de ce "tutoriel" n'est pas de vous fournir une feuille de style (ou CSS) pr�te � l'emploi mais au contraire de vous montrer la d�marche de "cr�ation" de votre propre CSS personnelle.

Lorsque l'on d�bute il est important d'adopter une bonne m�thodologie, d'y aller �tape par �tape et le profil se construit tout seul.

Hypoth�se : Je suppose que votre profil (Options / Apparence de mon profil) est du type "Profil avanc� (XHTML pour des CSS 2.1)".

J'ajoute que je d�veloppe sous Firefox 2.0.0. Si vous utilisez un autre navigateur il se peut que vous constatiez des diff�rences, plus ou moins notables, par rapport aux impressions que je donne. A vous d'adapter le code en cons�quence si vous souhaitez l'exploiter.

Travailler "offline"

Connectez-vous sur votre compte MH puis enregistrez chacune des pages HTML, correspondant aux diff�rentes pages de votre profil : "profil", "�v�nements" et "classement", sur votre disque dur (clic-droit sur la page / Enregistrer sous...).

Remarque : si vous n'�tes pas connect� au moment de sauvegarder, la page de profil ne contiendra pas le lien [Envoyer un message � ce Tr�ll]. Vous aurez donc du mal � voir les modifications de style s'y rapportant.

Vous devriez maintenant vous retrouver avec 3 fichiers :

PJView.php.html,
PJView_Events.php.html,
PJView_Classements.php.html,

ainsi que leurs r�pertoires associ�s (PJView.php_fichiers, PJView_Events.php_fichiers, PJView_Classements.php_fichiers).

Ces r�pertoires contiennent les �l�ments n�cessaires � l'affichage du profil, dont cette fameuse CSS qui nous int�resse.

Bien �videmment vous pouvez tout � fait renommer ces pages HTML comme bon vous semble, par contre ne modifiez pas le nom des r�pertoires associ�s ou leur contenu, les chemins d'acc�s aux �l�ments tels que la CSS ou votre avatar ne seraient plus valides.

Vous vous servirez de ces copies pour afficher le r�sultat de vos modifications sur votre CSS personnalis�e, plut�t que de devoir uploader votre CSS � chaque modification pour voir le r�sultat en ligne.

Ceci �tant fait on va pouvoir s'attaquer au coeur du probl�me.

El�ments du profil

Habituellement, lorsque vous d�veloppez un site web, vous acc�dez � la fois au code HTML et aux CSS. Il est important de comprendre qu'ici on vous impose l'environnement : le code HTML, vous ne pouvez pas y toucher, c'est MH qui le fournit ! Nous verrons plus tard qu'il existe des moyens pour modifier le contenu affich�, en camouflant certaines donn�es ou en ajoutant du texte, mais partez du principe que vous ne devez pas toucher � ces informations "officielles".

Ouvrez donc maintenant, avec votre �diteur de texte pr�f�r� (je vous conseille notepad++ pour un environnement windows), la page HTML du profil (le fichier PJView.php.html si vous n'avez pas changer son nom), pour afficher le code source HTML que nous allons parcourir ensemble, ainsi que le fichier CSS ("num�ro de votre troll.css", se trouvant dans le r�pertoire PJView.php_fichiers), pour appliquer du style aux �l�ments HTML (je vous proposerais au fur et � mesure de copier-coller des morceaux de code � l'int�rieur). Ouvrez enfin, en parall�le, la page HTML du profil mais cette fois avec votre navigateur (Firefox recommand�), pour voir l'application de votre CSS sur le profil et son rendu � l'affichage, au fil des ajouts effectu�s dans la CSS.

Type de profil et ligne d'appel de la CSS

Pour information, extrait de mon fichier PJView.php.html :

  <link rel="stylesheet" href="PJView.php_fichiers/80000.css" type="text/css" title="Style personnalis� du troll 80000">
  <link rel="alternate stylesheet" href="PJView.php_fichiers/MH_Style_ProfilAvance.css" type="text/css" title="Style de base">

Les lignes qui pr�c�dent indiquent que le profil correspond au "Profil avanc�" et que sa CSS se trouve � l'adresse : PJView.php_fichiers/80000.css (stockage local, c'est cette ligne que vous devez modifier si vous changer le nom du r�pertoire et/ou le nom de la CSS). Celle disponible sur MH se trouve � l'adresse : http://blason.mountyhall.com//Css_PJ/80000.css. Comme les CSS de tous les trolls sont publiques vous savez d�sormais o� chercher l'inspiration !

Si vous ne trouvez pas des lignes similaires dans votre page HTML, je vous renvoie � mon hypoth�se initiale, allez modifier le type de votre profil ! (Que de pr�cautions, mais le "probl�me" a d�j� �t� rencontr�...)

Nous ne nous soucierons pas davantage des autres �l�ments de l'en-t�te (contenus entre les balises HTML <head>). Seuls les �l�ments du profil proprement dit nous int�ressent.

CSS vierge et "corps" du profil

On va partir d'une CSS vierge, supprimez donc tout le contenu de votre fichier CSS. Je vous conseille d'ajouter les �l�ments en m�me temps que je vous les pr�sente et d'afficher le r�sultat dans votre navigateur � chaque �tape (Actualiser ou F5), pour bien voir le profil �voluer. Un coup d'oeil sur le navigateur vous montre � quoi ressemble un profil avec une CSS vide : les �l�ments sont affich�s les uns � la suite des autres, sur un fond blanc.

En tout premier lieu on regarde le code HTML, afin d'identifier les �l�ments que l'on va styliser. Je vais prendre mon profil personnel pour exemple.

Voici un premier bloc, extrait du code source HTML :

  <body id="PJView">
    <h1>Ca�n</h1>
    <ul id="pjLinks">
      <li id="pjLinkProfil"><a href="...">Profil</a></li>
      <li id="pjLinkEvents"><a href="...">Ev�nements</a></li> 
      <li id="pjLinkClassement"><a href="...">Classements</a></li>
    </ul>
    <form method="get" action="" id="formView">
      <div id="IDPJ">
        <label for="ai_IDPJ">Tr�ll n� : </label>
        <input name="ai_IDPJ" id="ai_IDPJ" maxlength="8" value="80000" type="text">
      </div>
      <div class="submit">
        <input name="as_Action" value="Afficher" type="submit">
      </div>
    </form>

En HTML, le contenu de la page � afficher se trouve entre les balises <body> et </body>. On va donc pouvoir se servir de cet �l�ment pour d�finir les caract�ristiques de plus haut niveau de notre profil (celles qui s'appliqueront � l'ensemble des autres �l�ments contenus). Il est important de comprendre et de constater l'imbrication des balises (mise en �vidence par l'indentation du code), c'est ce qui nous indique quel est le conteneur et quel est le contenu, et ainsi nous permettre de faire r�f�rence aux �l�ments pour les styliser. Rassurez-vous, vous n'aurez besoin d'aucune connaissance HTML pour comprendre ce qui suit.

Cette caract�ristique d'imbrication a �galement un effet sur les styles que vous allez appliquer : en cas de d�finition multiple, le style du contenu l'emporte sur celui du conteneur. Exemple: si vous d�finissez une couleur de police pour l'�l�ment body et que vous en d�finissez une autre pour l'�l�ment h1 (contenu dans body), c'est cette derni�re couleur qui va prendre le pas sur la premi�re lors de l'affichage du titre h1... Dans le cas des marges, elles s'ajoutent par contre.

Comme vous m'avez l'air impatient on va d�j� ajouter un �l�ment de style � notre CSS. Copiez-coller le code suivant dans votre fichier CSS. Enregistrez et actualisez l'affichage de votre navigateur. Les commentaires du code (texte compris entre les commandes "/*" et "*/") vous indiquent l'effet d�sir�.

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 !) */
}

Constatez la mani�re dont on d�finit le style pour un type d'�l�ment HTML, la syntaxe employ�e :

"nom de l'�l�ment" {
  "propri�t� CSS": <valeur>;
  ...
}

Pour information, le site MH ouvre les profils dans des fen�tres de 750 pixels de large pour 550 de haut. N�anmoins, dans les 750px de large il faut aussi compter la largeur de la barre de d�filement, qui r�duit d'autant l'affichage. Il ne faudrait pas avoir une barre de d�filement horizontale en bas de la fen�tre, beurk ! On se laisse donc un peu de marge en appliquant une largeur de 732 pixels (valeur purement arbitraire)...

C'est habituellement dans le body que l'on d�finit la police de caract�re utilis�e pour tout le reste du document (�a �vite ainsi de r�p�ter la d�finition), sans quoi le navigateur impose son style par d�faut. Je vous laisse ici faire votre choix quant � la police � utiliser, la taille des caract�res, etc. Sachez toutefois qu'il se peut que les autres utilisateurs ne disposent pas des polices que vous avez choisi et donc que le navigateur appliquera le style par d�faut. Suivant le syst�me d'exploitation, les polices install�es, le choix peut s'av�rer assez restreint. Je vous invite � aller faire un tour sur cette page pour voir les possibilit�s qui s'offrent � vous.

Nom du troll

Poursuivons maintenant la lecture de notre code HTML...

  <h1>Nom de votre Troll</h1>

Ce code repr�sente le nom de votre troll. Vous allez pouvoir le styliser en appliquant des attributs CSS � la balise h1. Par exemple, on va changer la couleur de la police pour du "vermillon" (voir liste de couleurs wikipedia). Copiez-collez le code ci-dessous � la suite de votre CSS :

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 */
  text-align: center;         /* Centre le texte "nom du troll" */
}

(Aller-retour vers le navigateur pour voir l'effet de la modification)

Je vous laisse toujours le soin de choisir la police qui vous plait, la taille des caract�res etc. Petite remarque quant � la couleur de la police, le rendu � l'affichage est influenc� aussi par le fond appliqu� !

Pour de plus amples param�tres de style je vous invite � aller jeter un oeil au sommaire de r�f�rence CSS de SELHTML. Rassurez-vous, nous en aborderons quelques uns au cours de ce "tutoriel".

Attention : tous les autres �l�ments de la page se trouvant dans des balises de type "h1" seront �galement affect�s par le style ! On s'assure donc en parcourant la page qu'il n'y a pas d'autres balises de ce type (Ctrl+f "h1")... Ouf, il n'y en a pas d'autres ! Evidemment, il s'agit du formattage du titre de plus haut niveau mais soyez-en conscients lorsque vous manipulerez d'autres balises, plus courantes. Vous pouvez aussi choisir, en connaissance de cause, d'appliquer un style qui se r�percutera sur plusieurs �l�ments sur la page, il faut juste que vous soyez conscients de ce que vous fa�tes.

Liens de navigation : Profil | Ev�nements | Classements

On repart vers le code HTML :

  <ul id="pjLinks">
    <li id="pjLinkProfil"><a href="...">Profil</a></li>
    <li id="pjLinkEvents"><a href="...">Ev�nements</a></li> 
    <li id="pjLinkClassement"><a href="...">Classements</a></li>
  </ul>

Ces quelques lignes forment une liste �num�rative HTML qui repr�sente le menu de navigation du profil, les liens vers les diff�rentes pages. Je vous renvoie au sommaire de r�f�rence HTML de SELFHTML pour les explications des futures balises recontr�es, vous avez compris la manoeuvre maintenant :)

Comme nous l'avons vu avec le nom du troll, nous pourrions d�finir un style � appliquer aux balises ul (si l'on veut styliser l'ensemble des �l�ments de la liste �num�rative, par exemple pour un positionnement du "bloc" dans sa globalit�) ou li (si l'on s'int�resse aux �l�ments, lignes, de la listes) ou encore li a (pour le style des liens en eux-m�mes, police et attributs li�s). Toutefois, la remarque fa�te pr�c�demment s'applique ici : le profil comporte d'autres listes �num�ratives ! (distinctions, �quipement...). On ne peut donc pas proc�der de cette mani�re sans affecter �galement ces autres listes.

Heureusement, le concepteur avait pr�vu le coup : il a attribu� des "identifiants" � la liste et � chacun des liens, de mani�re � pouvoir y acc�der ind�pendamment. Par exemple, pour styliser le "menu de navigation" (Profil | Ev�nements | Classements) voici comment faire :

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, cale le texte � gauche */
  text-align: center;       /* Centre le texte vis � vis du conteneur (la liste "pjLinks") */
}

pjLinks est l'identifiant (id="pjLinks) de la liste �num�rative (ul, l'�l�ment global, conteneur des liens). On acc�de donc en CSS � cet �l�ment via la commande ul#pjLinks (voir Formats ind�pendants).

Note : text-indent: 0; qui semblerait plus logique que padding-left: 0; n'a malheureusement aucun effet.

Les liens restent en colonne, on pr�f�rerait les avoir en ligne, quoi de plus facile ! Cette fois on "stylise" les �l�ments de la liste (li) :

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" */
}

Notez bien la mani�re dont on acc�de aux �l�ments pour �tre en mesure de le faire vous-m�mes quelque soit le code HTML rencontr� !

On aimerait maintenant styliser nos liens...

ul#pjLinks 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 a:hover {      /* L'attribut "hover" s'applique aux liens survol�s � la souris */
  color: #ED7F10;         /* On change la couleur lors des "survols de liens" */
}

Remarque : ul#pjLinks li a et ul#pjLinks li a:hover seraient des commandes encore plus pr�cises...

N'oubliez pas qu'en supprimmant le style par d�faut des liens, leur r�le de lien n'apparait plus de mani�re si flagrante (seul le changement de pointeur laisse encore pr�sager que ce sont effectivement des liens). Reproduire le comportement habituel de lien sera appr�ci� des utilisateurs. Ici on change la couleur lors du survol : l'attribut ":hover" est l� pour �a. Pour d'autres attributs, voir par ici...

Pour acc�der � un lien en particulier on utilise son identifiant, par exemple pour le lien "Profil" :

ul#pjLinks li#pjLinkProfil a {
  /* attributs � d�finir */
}

Formulaire "Tr�ll n� : [80000] [Afficher]"

De notre premier bloc de HTML � analyser il nous reste le formulaire Tr�ll n� : [80000] [Afficher] � styliser.

  <form method="get" action="" id="formView">
    <div id="IDPJ">
      <label for="ai_IDPJ">Tr�ll n� : </label>
      <input name="ai_IDPJ" id="ai_IDPJ" maxlength="8" value="80000" type="text">
    </div>
    <div class="submit">
      <input name="as_Action" value="Afficher" type="submit">
    </div>
  </form>

Ce formulaire nous g�ne un peu alors on va le mettre dans un coin. Et pour le rendre plus pratique, pour que le visiteur puisse changer de profil de troll quel que soit l'endroit o� il se trouve dans la page on va le fixer...

#formView {
  border: 1px solid #000;  /* On encadre, jouer avec d'autres types de bordures... */
  position: fixed;         /* Positionnement absolu et fixe (lors du d�filement) */
  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... */
}

#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" */
}

Pour acc�der aux �l�ments de "classe", ex: <div class="submit">, on utilise les commandes du type .[nom de l'�l�ment], ex: .submit (voir Formats pour les classes).

Pour savoir quel objet manipuler je vous conseille de proc�der m�thodiquement sinon vous pourriez rapidement vous perdre dans vos modifications : toujours commencer par l'�l�ment le plus englobant pour descendre vers ceux contenus, en d�marrant par les modifications de positionnement. Les subtilit�s et d�tails peuvent attendre...

Vous me voyez aussi parfois utiliser margin d'autres fois padding, tout d�pend de l'objet que l'on manipule et de l'effet d�sir�, amusez-vous avec les deux en attribuant diff�rentes valeurs et constatez si l'affichage vous convient.

El�ments de description : "Son Profil G�n�ral"

La suite du code HTML nous pr�sente la description du troll proprement d�te (une partie seulement est affich�e ici) :

  <h2>Son Profil G�n�ral</h2>
  <dl id="profil">
    <dt class="blason">Blason</dt>
    <dd class="blason"><img src="..." id="blason" alt="Blason du troll n�80000"></dd>
    <dt class="numero">N�</dt>
    <dd class="numero">80000
      <span id="envoiMessage">
        <a href="...">[Envoyer un message � ce Tr�ll]</a>
      </span>
    </dd>
    <dt class="distinctions">Distinctions</dt>
    <dd class="distinctions"><ul><li>[Tueur de Crascs Maexus]</li></ul></dd>
    <dt class="maladie">Maladie</dt>
    <dd class="maladie"><ul><li>[Immunis� � la Peste Scrofuleuse]</li></ul></dd>
    <dt class="race">Race</dt>
    <dd class="race">Kastar</dd>
    <dt class="creation">Date de cr�ation</dt>
    <dd class="creation">04/07/2006 19:47:14</dd>
    <dt class="email">Adresse E-mail</dt>
    <dd class="email"> -  </dd>
    <dt class="niveau">Niveau</dt>
    <dd class="niveau">36</dd>
    <dt class="guilde">Guilde</dt>
    <dd class="guilde" id="nomGuilde"><a href="...">les ElecTrolls Libres</a></dd>
    <dd class="guilde" id="rangGuilde">[Mountyp�diatroll]</dd>
    <dt class="mouches">Mouches</dt>
    <dd class="mouches">35</dd>
    <dt class="meurtres">Nombre de Meurtres</dt>
    <dd class="meurtres">144</dd>
    <dt class="deces">Nombre de D�c�s</dt>
    <dd class="deces">6</dd>

h2 (balise de titre de niveau 2) renferme l'intitul� "Son Profil G�n�ral", on retrouve plus loin dans le code source une autre balise de ce type : <h2 id="descriptionTitre">Description</h2>. Je d�cide de prendre la libert� de masquer ces deux titres, vu leur �vidence...

On constate ensuite que la description du profil s'articule autour des balises <dl><dt><dt>. Apr�s la consultation d'un manuel de r�f�rence HTML, je d�couvre qu'il s'agit de la syntaxe d'une liste de d�finitions. J'apprends que les balises <dt> symbolisent les "termes" � d�finir, <dd> les d�finitions. Maintenant que j'ai compris le fonctionnement je vais pouvoir manipuler ces �l�ments.

h2 {
  display: none;          /* Masque les titres "Son Profil G�n�ral" et "Description" */
}

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

On constate que les intitul�s et leurs valeurs ("Race" et "Kastar") ne sont pas sur les m�mes lignes, et puis �a manque un peu de relief tout �a !

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, g�n�re un d�calage */
  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 */
}

float: left; change le cours normal du texte (lignes les unes en dessous des autres). On obtient ainsi que les �l�ments qui suivent la cible (l'�l�ment sur lequel on applique cette propri�t�) l'entourent par la droite.

On souhaite dans notre cas que les dd se trouvent directement � droite des dt, on applique donc cette propri�t� aux dt qui convient parfaitement � l'effet voulu. Evidemment je vous �pargne toute la recherche pr�alable en vous donnant directement la solution, en pratique vous devrez parcourir le manuel de r�f�rence CSS � la recherche d'une propri�t� qui convienne � votre besoin...

Une petite mise en garde : les �l�ments flottant sont d�licats � manipuler, un rien et la mise en page vole en �clats ! Soyez donc m�thodiques dans vos modifications (l'une apr�s l'autre, en constatant le r�sultat � chaque ajout) pour voir leur incidence et d�celer quel est le coupable en cas de catastrophe.

Apr�s avoir appliqu� l'effet "gras" aux dt on se rend compte que cela g�n�re un l�ger d�calage vertical, on y rem�die imm�diatement � l'aide d'un margin-top: -1px;. Ajouter les propri�t�s CSS une � une pour bien voir leur incidence sur l'affichage.

Blason

Il ne nous convient pas tel qu'il est plac�, on le pr�f�rerait cal� � droite :

dt.blason {
  display: none;          /* Fait disparaitre le texte "Blason", tant pis pour l'acessibilit�... */
}

dd.blason {
  text-align: right;      /* Plaque l'image de votre avatar � droite */
  float: right;           /* Pour que la description du profil "enveloppe" le blason par la gauche */
}

On applique une nouvelle fois la propri�t� "float", mais cette fois dans l'autre sens, pour que le texte suivant le blason se poursuive sur la gauche de ce dernier.

Lien "[Envoyer un message � ce Tr�ll]"

Un �l�ment qui tend � �tre n�glig� voir ignor�. Il n'y a pas de raisons !

dd.numero span#envoiMessage {
  display: block;         /* Affiche le lien "[Envoyer un message � ce Tr�ll]" sur une nvelle 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;
}

Adresse email

On l'a d�j� vu avec le texte du blason, on peut "masquer" ou plut�t emp�cher l'affichage de certains �l�ments du profil. J'ai choisi, pour ma part, de ne pas d�voiler mon adresse email dans mon profil (standard). Cette ligne se r�v�le donc inutile, je d�cide de la "masquer". Je vous mets en garde cependant, vous �tes passibles de sanctions lorsque vous masquer, d�lib�r�ment ou non, des informations officielles de votre profil. Disons que l'on prend peu de risques ici...

.email {
  display: none;          /* une ligne de gagn�e pour all�ger le profil */
}

Guilde et grade

dd.guilde a {
  text-decoration: none;  /* On traite toujours de la m�me mani�re les liens... */
  color: #9E0E40;
  font-weight: bold;      /* Fait ressortir un peu plus le nom de la guilde */
}

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 dd.guilde a */
}

Pas grand chose � dire l�-dessus, si ce n'est que l'effet "gras" a encore d�cal� le texte se trouvant en dessous (en fait cela rattrape plut�t le margin-top: -1px; que nous avons d�fini plus haut mais si je vous demande de modifier du contenu pr�c�dent on ne va plus s'y retrouver)...

Distinctions, �quipement et possessions

dt.distinctions, dt.maladie, dt.equipement, dt.possessions {
  float: none;            /* Pb avec les listes "distinctions", "�quipement" et "possessions" r�gl� ! */
  padding-left: 2px;      /* Rattrape le d�calage provoqu� par le pr�c�dent "padding" */
}

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 re-cale � gauche */
}

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 */
}

Rappelez-vous, un coup d'oeil au code source HTML d'abord. Vous auriez pens� au span.magie sans �a ? Hum...

On termine en donnant un peu d'espace � la liste, un peu tass�e sur elle-m�me jusqu'ici.

Avertissement et description

On passe maintenant � la partie "officieuse", celle que vous d�finissez vous-m�me comme vous l'entendez en BBCode :

  <h2 id="descriptionTitre">Description</h2>
  <p id="disclaimer">[Toutes les informations ... ne sont donc pas officielles]</p>
  <div id="description">
    blabla
  </div>

Pas besoin de bcp de personnalisation de ce c�t� l�, tout peut �tre fait directement dans le "code source", puisque vous y avez acc�s sur MH via Options / Description.

#disclaimer {            /* "Toutes les informations pr�sent�es en dessous de cette ligne..." */
   font-size: x-small;
   font-weight: normal;
   text-align: center;
}

#description {           /* Zone "Description" */
   background-color: #FDF1B8;
   padding: 20px;
}

Lien "Changer d'apparence"

Et enfin la derni�re partie du code source qui nous int�resse :

<div id="styleSwitcher">
  <a href="javascript:void(0);" onclick="rotateStyleSheet();">Changer d'apparence</a>
  <script src="PJView.php_fichiers/event_FF.js" id="monScript" language="JavaScript"></script>
</div>

#styleSwitcher {          /* Bouton "Changer d'apparence" */
  margin-top: 20px;
  text-align: center;
}

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

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

A la r�flexion, le bouton de changement d'apparence n'est pas tr�s pratique en l'�tat. Il le serait davantage si l'utilisateur pouvait y avoir acc�s facilement, d'autant plus si votre profil est vraiment original ! Devoir aller tout en bas de la page est d�j� trop p�nible dans certains cas... Je propose donc de remplacer le code pr�c�dent par :

#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;
}

Ainsi, comme le formulaire de changement de profil de troll, le lien de changement d'apparence est fixe par rapport au d�filement de la page.

Voil�, on a maintenant une page de profil bien structur�e, il ne vous reste plus qu'� l'habiller suivant vos convenances : couleurs, police, images, etc.

Puisque vous avez eu le courage d'arriver jusque l�, je vous mets le lien vers la page qui contient tout le code CSS que j'ai diss�min� plus haut ExempleDeStructureCSS.

R�flexion sur le positionnement des �l�ments

Il existe d'autres alternatives au "positionnement" que je vous ai pr�sent�. En r�alit� j'ai juste jou� avec les propri�t�s float pour modifier le cours du texte. On pourrait tr�s bien vouloir changer l'ordre d'apparition des informations ou bien encore rassembler certaines infos dans des endroits pr�cis du profil...

La solution : le positionnement absolu. C'est � dire fixer l'emplacement d'un �l�ment � des coordonn�es fixes : � 50px du haut, 20px � droite... Malheureusement un probl�me se pose alors : comment conserver un profil centr� avec un tel positionnement ? On va voir que c'est possible en jouant avec les marges, avec certaines limitations toutefois (dont vous vous rendrez rapidement compte en jouant avec la taille de votre fen�tre d'affichage).

Pour cette m�thode de placement par "positionnement absolu", je vous sugg�re de n'afficher que les �l�ments que vous avez d�j� plac� et celui sur lequel vous �tes en train de travailler, �a �vitera de parasiter votre "recherche artistique" :)

Commencer par sauvegarder votre CSS si vous l'avez d�j� personnalis�, sinon supprimer sans crainte tout le code qui se trouve sous :

h2 {
  display: none;
}

Vous pourrez toujours r�cup�rer le code original depuis la page ExempleDeStructureCSS...

Ainsi fait, on ajoute maintenant le code qui va masquer les �l�ments sur lesquels on ne va pas travailler :

.numero, .distinctions, .maladie, .race, .creation, .niveau, .guilde, .mouches, .meurtres, .deces, .equipement, .possessions {
  display: none;
}

On ajoute quelques d�finitions issues de la premi�re CSS, que l'on reprend quasi identiques :

#profil {
	background-color: #FDF1B8;
	min-height: 400px;
}

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

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

#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;
}

On s'occupe du blason pour commencer. J'ai d�cid� de le laisser � sa place l� o� nous l'avions dispos�, les 2 m�thodes de positionnement ne sont pas incompatibles ! On pourrait tout aussi bien le caler � gauche, le centrer, etc. A vous de voir ce que vous pr�f�rez.

dt.blason, .email {
  display: none;
}

dd.blason {
  text-align: right;
  padding-top: 50px;
  padding-right: 20px;
}

Ceci fait, on met � jour le "code de masquage" pour faire apparaitre le prochain �l�ment � placer : le num�ro.

.distinctions, .maladie, .race, .creation, .niveau, .guilde, .mouches, .meurtres, .deces, .equipement, .possessions {
  display: none;
}

Positionnement absolu des �l�ments

Petite r�flexion au sujet du num�ro : j'ai choisi, en toute conscience, de ne pas l'afficher. En effet, il est d�j� pr�sent dans le formulaire de changement de profil de troll qui se trouve dans le coin droit de la fen�tre et se retrouve donc redondant. Il pourrait �galement figurer sur votre banni�re, en image de fond de votre �l�ment h1...

Toutefois, on ne va pas simplement faire un display: none; qui aurait pour effet de masquer le lien "[Envoyer un message � ce Tr�ll]", il va falloir ruser ! On va utiliser la propri�t� visibility.

.numero {
  visibility: hidden;
}

dd.numero span#envoiMessage {
  visibility: visible;
  position: absolute;
  margin-left: 0;
  top: 140px;
  left: 0;
  width: 100%;
  text-align: center;
}

dd.numero span#envoiMessage a {
  text-decoration: none;
  color: #9E0E40;
}

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

Une fois plac� correctement (facile ici, j'ai d�j� tout fait !), on passe � la race et au niveau.

Nouvelle mise � jour du masque : race et niveau

.distinctions, .maladie, .creation, .guilde, .mouches, .meurtres, .deces, .equipement, .possessions {
  display: none;
}

En ce qui concerne la race et le niveau, on aimerait voir s'afficher : "[Race de votre troll] niveau [Niveau de votre troll]" Je vous le dis tout de suite on y va � t�tons pour trouver les bonnes valeurs ! Mais �a se fait relativement vite tout de m�me. J'ajouterai que c'est maintenant � vous de mettre la main � la p�te et de vous adapter � votre blason ! Taille, couleur (le texte doit pouvoir �tre lu sans difficult�...), etc.

dt.race {
  display: none;
}

dd.race {
  position: absolute;
  margin-left: 0;
  top: 200px;
  left: 0;
  width: 100%;
  text-align: center;      /* A ce niveau on a la "race" centr�e... */
  margin-left: -320px;     /* Il nous suffit alors de d�caler dans la direction souhait�e gr�ce aux marges */
}

dt.niveau {
  position: absolute;
  margin-left: 0;
  top: 200px;
  left: 0;
  width: 100%;
  margin-left: -260px;
  text-align: center;
  text-transform: lowercase; /* en minuscules... */
}

dd.niveau {
  position: absolute;
  margin-left: 0;
  top: 200px;
  left: 0;
  width: 100%;
  text-align: center;
  margin-left: -216px;
}

Nouvelle mise � jour du masque : mouches, meurtres et deces

.distinctions, .maladie, .creation, .guilde, .equipement, .possessions {
	display: none;
}

Et on ajoute les d�finitions :

dd.mouches {
	position: absolute;
	margin-left: 0;
	top: 220px;
	left: 0;
	width: 100%;
	margin-left: -334px;
	text-align: center;
}

dt.mouches {
	position: absolute;
	margin-left: 0;
	top: 220px;
	left: 0;
	width: 100%;
	margin-left: -280px;
	text-align: center;
	text-transform: lowercase;
}

dt.meurtres {
	position: absolute;
	margin-left: 0;
	top: 260px;
	left: 0;
	width: 100%;
	text-align: center;
	margin-left: -264px;
}

dd.meurtres {
	position: absolute;
	margin-left: 0;
	top: 280px;
	left: 0;
	width: 100%;
	text-align: center;
	margin-left: -280px;
}

dd.meurtres:after {

	content:" � mon actif !";

}

dt.deces {
	position: absolute;
	margin-left: 0;
	top: 320px;
	left: 0;
	width: 100%;
	text-align: center;
	margin-left: -277px;
}

dd.deces {
	position: absolute;
	margin-left: 0;
	top: 340px;
	left: 0;
	width: 100%;
	text-align: center;
	//margin-left: -340px;
	margin-left: -294px;
}

dd.deces:after {

	content:" incidents...";

}

Remarquez les "ajouts" via les propri�t�s after (il existe aussi before). (Malheureusement?) IE ne supporte pas ces ajouts... Essayez donc de ne pas en abuser sous peine de graves probl�mes de compatibilit� ! Et puis n'oubliez pas que vous n'�tes pas *autoris�* � modifier les informations officielles...

Je pense que je peux m'arr�ter l�, vous avez compris le principe. Je vous laisse le soin de placer le reste des �l�ments du profil.

Un dernier coup de pouce concernant le placement de l'�quipement : pour r�cup�rer ind�pendamment les �l�ments, si jamais vous voulez les positionner en fonction de votre avatar par ex., voici les commandes, des pieds � la t�te :

Bottes : dd.equipement ul li { }
Arme (1 main) : dd.equipement ul li+li { }
Bouclier : dd.equipement ul li+li+li { }
Armure : dd.equipement ul li+li+li+li { }
Talisman : dd.equipement ul li+li+li+li+li { }
Casque : dd.equipement ul li+li+li+li+li+li { }

Comme vous le voyez, on parcourt les "lignes" de liste �num�rative. Attention aux �quipements comportant une arme � deux mains ! (le bouclier �tant absent, je vous laisse deviner les cons�quences sur les commandes d'acc�s aux �quipements succ�dant l'arme...)

Une remarque au sujet du positionnement absolu : le profil est "vivant", votre positionnement non, il est fig�, il ne s'adaptera pas aux �volutions cons�quentes de votre profil ! Il vous faudra donc probablement l'adapter � des moments cl�s de la vie de votre troll :

plus de 9 meurtres,
plus de 99 meurtres, ...
plus de 9 morts, ...
une distinction de plus,
la maladie,
etc.

Un autre inconv�nient c'est que l'alignement n'est pas toujours super pr�cis...

Conclusion

N'oubliez surtout pas de styliser la page �v�nements ! (et accessoirement celle de classement aussi) Elle a un int�r�t capital pour les autres joueurs (des sanctions se perdent pour les joueurs rendant illisibles ces informations, plus ou moins volontairement d'ailleurs...).

Je vous conseille de partir d'une CSS vierge et d'ajouter petit � petit le style aux �l�ments qui vous int�ressent, c'est ce qui aura davantage de chance de laisser cours � votre imagination et vous amenera � un profil vraiment original !

Sinon, la CSS MH_Style_ProfilAvance.css vous fournit quelques �l�ments de personnalisation. N'h�sitez pas � "jouer" avec : changez les valeurs et regardez ce qui se passe en rafraichissant la page HTML correspondante, c'est le meilleur moyen d'apprendre ! Pour aller plus loin vous aurez besoin de notions en CSS et pour cela je vous recommande les pages suivantes : CSS de z�ro, qui est un excellent tutoriel pour d�buter, et le manuel de r�f�rence CSS qui constitue un excellent aide-m�moire que je n'ai pas h�sit� � citer de nombreuses fois.

Je vous conseille �galement les sites : Alsacreations et Openweb pour davantage de documentation et bien s�r le site du W3C.

Maintenant � vous de jouer et je ne saurai que trop vous conseiller de vous armer de patience !

En esp�rant �viter � certains de longues et fastidieuses recherches sur le sujet...

Bon courage :)

Trucs & Astuces

encadrer un �l�ment pour se rendre compte de ses dimensions et de son placement : border: 1px solid #000;
hack IE : la commande !important est ignor�e par IE. On peut donc s'en servir pour lui faire ignorer certaines propri�t�s...

Ca�n

Mountyp�dia
Encyclop�die Collaborative Tr�ll

Le Monde de Mountyhall (*)

Les Outils (*)

Les Guildes (*)

Editer les menus (*)

Page explicative sur la CSS des profils de Mountyhall.

Travailler "offline"

El�ments du profil

Type de profil et ligne d'appel de la CSS

CSS vierge et "corps" du profil

Nom du troll

Liens de navigation : Profil | Ev�nements | Classements

Formulaire "Tr�ll n� : [80000] [Afficher]"

El�ments de description : "Son Profil G�n�ral"

Blason

Lien "[Envoyer un message � ce Tr�ll]"

Adresse email

Guilde et grade

Distinctions, �quipement et possessions

Avertissement et description

Lien "Changer d'apparence"

R�flexion sur le positionnement des �l�ments

Positionnement absolu des �l�ments

Conclusion

Trucs & Astuces

Mountyp�diaEncyclop�die Collaborative Tr�ll

Le Monde de Mountyhall (*)

Les Outils (*)

Les Guildes (*)

Editer les menus (*)

Page explicative sur la CSS des profils de Mountyhall.

Travailler "offline"

El�ments du profil

Type de profil et ligne d'appel de la CSS

CSS vierge et "corps" du profil

Nom du troll

Liens de navigation : Profil | Ev�nements | Classements

Formulaire "Tr�ll n� : [80000] [Afficher]"

El�ments de description : "Son Profil G�n�ral"

Blason

Lien "[Envoyer un message � ce Tr�ll]"

Adresse email

Guilde et grade

Distinctions, �quipement et possessions

Avertissement et description

Lien "Changer d'apparence"

R�flexion sur le positionnement des �l�ments

Positionnement absolu des �l�ments

Conclusion

Trucs & Astuces

Mountyp�dia
Encyclop�die Collaborative Tr�ll