La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours XHTML/CSS » A l'abordage des CSS

Atelier Webmaster



< Cours précédent - Sommaire du cours - Cours suivant >

Cours XHTML/CSS : A l'abordage des CSS



Voilà déjà deux chapitres que nous ne faisons que parler du XHTML. Vous connaissez désormais la structure d'une page Web, la structure des balises XHTML et la signification d'une grande partie de ces balises. En théorie, en me lisant, vous devriez vous dire :
Bon, en gros t'es en train de me dire que je connais l'XHTML et que je n'ai plus grand chose à apprendre... pourtant, si je regarde les pages que j'arrive à créer, ce n'est franchement pas brillant !

Hé oui, par exemple, vous pouvez créer un site sur les plantes carnivores très facilement en utilisant une structure du genre :

Code :
<!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Titre du site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
        <h1 id="haut">Titre du site</h1>
           <p>Slogan du site</p>

        <h2>Menu</h2>
          <a href="" title="">Lien n°1</a> |
          <a href="" title="">Lien n°2</a> |
          <a href="" title="">Lien n°2</a>

        <h2>Titre n°1</h2>
          <p>Paragraphe n°1</p>

        <h2>Titre n°2</h2>
          <p>Paragraphe n°2</p>

<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
   </body>
</html>



Il ne vous reste plus qu'à remplir le site avec le contenu que vous voulez :

Code :
<!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Les plantes caaarnivores</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
        <h1 id="haut">Les plantes caaarnivores</h1>
           <p>Parce que la nature aussi est cruelle</p>

        <h2>Menu</h2>
          <a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> |
          <a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> |
          <a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>

        <h2>Mais pourquoi caaarnivores ?</h2>
          <p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>

        <h2>Je peux participer ?</h2>
          <p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>

<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
   </body>
</html>



Mais c'est tout.  Pourtant, tout est là... mais vous voudriez aussi pouvoir ordonner le texte, l'aligner à tel endroit, ajouter de la couleur ou des images de fond, que sais-je encore... Ce qui vous manque c'est la mise en page, le design. Ce qui vous manque, c'est le CSS bn_big_smile


           
           
           
           
           
           
       

Une petite ode aux CSS pour se mettre dans l'ambiance.
Par di13774n73

Où écrire du code CSS


Si on reprend notre page XHTML de tout à l'heure sur les plantes Caaarnivores, nous avons 3 manières de lui appliquer du code CSS. Une bonne et deux à n'utiliser qu'en cas d'extrême nécessité. Commençons par ces deux là...
Ajouter du CSS directement dans les balises XHTML

De la même manière que l'on a précédemment utilisé un attribut href pour préciser un lien hypertexte, ou un attribut title pour préciser un titre, on va maintenant se servir de l'attribut style pour appliquer du code CSS à une balise.
Donc si on prend l'exemple d'un paragraphe avec la balise <p> :
Code :
<p style="Mon code CSS">
Je lève mes yeux vers les montagnes... D'où me viendra le secours ? Le secours me vient de l'Éternel, qui a fait les cieux et la terre. Il ne permettra point que ton pied chancelle ; celui qui te garde ne sommeillera point.
</p>


On peut ainsi se servir de l'attribut style dans toutes les balises que l'on a vu précédemment.

Ajouter du CSS au début du fichier XHTML

On peut aussi ajouter du CSS dans le header du fichier XHTML, entre les balises <head></head> à l'aide de la balise <style>. Tout ce qui se situe entre <style> et </style> sera considéré et interprété comme du code CSS.
Code :
<!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Titre de la page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
       <style type="text/css">
       <!--
       Mon code CSS
       -->

       </style>
   </head>
   <body>
   ...


On met le code CSS entre des balises de commentaires <!-- --> pour éviter que les très vieux navigateurs (qui n'interprètent pas le CSS) n'affichent bêtement le code sur la page sans l'interpréter.

Inconvénients de ces deux méthodes
  • Je vous en ai rapidement parlé dans l'introduction de ce cours d'XHTML/CSS, mais l'intérêt d'utiliser deux langages de programmation est de séparer le contenu de la forme. En travaillant comme cela, si un jour on souhaite modifier la couleur de fond de notre site Internet, on aura juste à modifier la partie forme (le CSS) c'est-à-dire quelques lignes dans une ou deux pages grand maximum, sans s'occuper, ni modifier les 3 600 pages de contenus (le XHTML). Et ça, c'est particulièrement intéressant ! Lorsqu'un site augmente en taille, ce n'est même plus une question de flemmardise, c'est de la survie !

    Je viens de faire un petit calcul : sans compter les pages du forum, la Bnbox compte, à l'heure où j'écris ces lignes, presque 1000 pages. Je vous laisse imaginer si je devais modifier à la main chacune de ces 1000 pages à chaque fois que je souhaite modifier mon design...


    Or ce que nous avons fait dans les méthodes précédentes, c'est justement de mélanger le contenu et la forme. Du coup tout l'avantage d'utiliser deux langages de programmation disparait en fumée !

    Je ne vous l'ai d'ailleurs pas dit, mais on peut mettre en page du texte avec du XHTML. Enfin plutôt avec du HTML. Avant que les CSS ne soient utilisées, on se servait de la balise font et des attributs align, color, ... pour faire le design d'un site Internet. Et on galérait ! Jusqu'à ce que l'on sépare contenu et forme...
  • Un autre avantage du CSS est de pouvoir créer un "patron". Par exemple, on peut écrire du code CSS permettant de mettre en valeur tous les titres de notre site. (avec image de fond, et tout le tralala mini_bn) On peut ensuite appliquer ce "patron" autant de fois que l'on veut dans notre fichier XHTML. Et pourtant on n'aura écrit qu'une seule fois du CSS.

    document/atelier/css.png


    Et la première méthode que je vous ai présenté ne tire pas avantage de ce potentiel énorme des CSS !


Je vous conseille donc de n'utiliser ces deux méthodes qu'en dernier recours ! Cela dit, on s'en sert parfois pour modifier le design d'un site d'une page à une autre à l'aide de PHP, ou d'un autre langage du même acabit.
La bonne méthode : le CSS dans un fichier séparé

La bonne méthode à utiliser est de placer le code CSS dans un fichier à part. Ce fichier aura pour extension .css (tout simplement bn_wink) et contiendra tout le code CSS.
Par exemple :
Code :
@charset "iso-8859-1";
/* Auteurs : Flan, Barth, Blouhibou, BN, Yoshi */
/* Date de création : 30/06/07 */

/* Balises générales */
body {
    margin:0px;
    font-family:Tahoma, Verdana, Arial, sans-serif;
    font-size:0.8em;
}

a {
    color:#4EAC40;
    font-weight:bold;
    text-decoration:none;
}
    a:hover {
        text-decoration:underline;
    }
a img {
    border:0 none;
}
img.email {
    position:relative;
    top:4px;
}


Dans ce chapitre, ne vous inquiétez pas du code CSS en lui-même, comme d'habitude, je vous donne de vrais exemples que vous ne comprenez pas (forcément) pour l'instant, mais qui vous paraîtront plus clairs dans les prochains chapitres.


Pour ma part j'ai pris l'habitude de toujours commencer mes fichiers CSS de la même manière. Ce n'est pas obligatoire, même s'il est conseillé de préciser au moins le jeu de caractères. (voir chapitre 1 pour les jeux de caractères.)

Code :
@charset "iso-8859-15";
/* Auteur : BN */
/* Date de création : 12/01/09 */


Une petite parenthèse mini_bn Il est possible d'ajouter une page CSS dans une autre à l'aide de la commande import des CSS. C'est parfois utile si vos fichiers CSS sont très volumineux et que vous souhaitez les partager en plusieurs petits morceaux.
Code :
@import url(nomDuFichierCSSAImporter.css);

Cela ne fonctionnera pas sur les vieux navigateurs.
Je ferme cette petite parenthèse qui vous servira peut-être un jour.


Maintenant, il ne reste plus qu'à relier nos pages XHTML à notre fichier CSS. Pour cela, on va utiliser la balise <link> dans notre page Web :
Code :
<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />


On explique ainsi clairement à notre page XHTML quel fichier CSS elle doit suivre. Les attributs de cette balise sont un petit peu différents de d'habitude, mais les seuls qu'il est important de comprendre sont href et title (que vous connaissez déjà) et media (qui permet de préciser pour quel type d'affichage s'applique le fichier CSS : screen pour un affichage à l'écran, print pour l'impression... J'y reviendrai dans un autre chapitre.
Résumons

Résumons. Où peut-on écrire du code CSS ?
  • Dans un fichier à part. On a donc un fichier CSS :
    Code :
    @charset "iso-8859-15";
    /* Auteur : BN */
    /* Date de création : 12/01/09 */

    balise { /* Ceci est un commentaire CSS */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    Et un fichier XHTML dont l'entête contient :
    Code :
    <link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />
  • Directement dans une balise :
    Code :
    <p style="propriétéCSS: valeur1; propriétéCSS: valeur2;"></p>
  • Directement dans le fichier XHTML :
    Code :
    <style type="text/css">
      <!--
      balise { /* Ceci est un commentaire CSS */
      propriétéCSS: valeur1;
      propriétéCSS: valeur2;
      ...
      }
      -->

    </style>




Et voilà, vous savez désormais où est-ce que vous allez coder votre CSS, même si vous ne savez toujours pas écrire une seule ligne dans ce langage mini_bn Ne vous inquiétez pas, ça ne va pas tarder !

Vos premières lignes en CSS


Appliquer du CSS sur des balises

Bon, depuis le début de ce cours on s'amuse à entourer nos textes avec des balises qui ne servent qu'à l'ordinateur, servons-nous en aussi un petit peu voulez-vous mini_bn
Avec le CSS on va pouvoir modifier le rendu à l'affichage de ce qui se situe entre des balises.
Par exemple pour centrer un paragraphe de texte entouré de la balise <p>, on écrira dans notre fichier CSS :
Code :
p {
text-align: center;
}


Pour rayer une phrase que l'on a préalablement entouré d'un <span> :
Code :
span {
text-decoration: line-through;
}


Ou pour positionner un bloc à droite en se servant de la balise <div> :
Code :
div {
float: right;
border: 1px solid black;
width: 50%;
}


On peut tester ces codes avec le fichier XHTML suivant :
Code :
<p><span>Rayez donc cette phrase</span>, et passons à la suite...</p>
<div>Louez l'Éternel ! Heureux l'homme qui craint l'Éternel, qui trouve un grand plaisir à ses commandements. Sa postérité sera puissante sur la terre, la génération des hommes droits sera bénie.</div>

<p>Il a dans sa maison bien-être et richesse, et sa justice subsiste à jamais. La lumière se lève dans les ténèbres pour les hommes droits, pour celui qui est miséricorDieux, compatissant et juste. Heureux l'homme qui exerce la miséricorde et qui prête.</p>




Bref, pour modifier le design de ce que contient une balise à l'aide du CSS, on utilise la structure suivante :
Code :
balise { /* Ceci est un commentaire */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}


Le point virgule ( ; ) de la dernière propriété n'est pas obligatoire. Cela dit, je vous conseille de le mettre, cela évite bien des erreurs d'inattentions par la suite mini_bn


So far, so good! (Jusqu'ici tout va bien bn_wink)
Seulement, en agissant ainsi, vous allez centrer toutes vos balises <p>, rayer toutes vos balises <span>, et tous vos <div> se positionneront à droite. Et ce n'est pas toujours ce que vous voulez faire. Selon les cas vous allez vouloir appliquer un design sur une seule occurrence d'une balise, sur un petit groupe de balises, ou sur toutes les balises. Et c'est pour cela que l'on va se servir des attributs class et id de l'XHTML.
Appliquer du CSS avec les attributs class et id

On peut donc se servir des attributs class et id pour appliquer un design sur une ou plusieurs balises. Il suffit de connaître la bonne syntaxe.
Si j'ai trois paragraphes et que je souhaite mettre une bordure autour de deux d'entre eux. Je vais utiliser l'attribut class.
Code :
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<p class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</p>


On utilisera alors le code CSS suivant :
Code :
p.entoure {
border: 1px solid black;
}



Le point (.) dans p.entoure permet donc d'appliquer un design sur toutes les balises p ayant pour class "entoure". Le nom donné à la class n'a pas d'importance, cela dit, il ne doit pas contenir d'espace, évitez les caractères accentués de préférence, et, pour la compréhension, il est bon d'utiliser un nom correspondant à l'utilisation que l'on va en faire.
On pourrait aussi ne pas préciser le p dans le fichier CSS et dans ce cas, cela fonctionnerait pour toutes les balises ayant pour class "entoure". Le même exemple modifié :
Code :
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>


Code :
.entoure {
border: 1px solid black;
}



Il est aussi possible de préciser deux class dans un seul attribut class, il suffit de les séparer par des espaces.
Code :
<p class="entoure align">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>


Code :
.entoure {
border: 1px solid black;
}
.align {
text-align: center;
}



On peut agir de la même manière en utilisant l'attribut id et en remplaçant le point (.) par un dièse (#). A noter que la valeur d'un id ne peut commencer par un chiffre.
Code :
<p id="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>


On utilisera alors le code CSS suivant :
Code :
p#entoure { /* Ou #entoure directement */
border: 1px solid black;
}




Il existe cela dit une différence notable entre class et id ! Un id est unique, deux balises d'une même page ne pourront donc pas avoir le même attribut id. Par contre, une même class peut être commune à autant de balises que l'on veut.
Par conséquent, on utilisera en général id pour séparer les grandes parties d'une page (par exemple : header, corps, menu, footer) et class pour le reste.
Résumons

Résumons les différentes manières d'appliquer du code CSS à une page Web.
  • Directement sur les balises :
    Code :
    balise { /* Ceci est un commentaire */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }
  • En utilisant l'attribut id :
    Code :
    balise#id { /* Ou #id directement */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    L'attribut id est unique.
    La valeur de l'id ne peut commencer par un chiffre et ne doit pas contenir d'espace. De manière générale, évitez les caractères accentués.
    Rappelons qu'id permet aussi d'utiliser des ancres. (voir le chapitre 3)
  • En utilisant l'attribut class :
    Code :
    balise.class { /* Ou .class directement */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    La valeur de la class ne doit pas contenir d'espace, et de manière générale, évitez les caractères accentués.
    Il est possible de préciser plusieurs class pour une même balise dans le XHTML : class=\"class1 class2 class3 ...\".


Et voilà, vous venez enfin de découvrir ce qu'était le CSS. Bientôt vous n'allez plus pouvoir vous en passer mini_bn A partir de maintenant tout va aller très vite, on va faire plusieurs chapitres en ne s'intéressant qu'au CSS et seulement après je vous apprendrai de nouvelles choses en XHTML !

Quand je dit : tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein bn_heureux ça, ça reste comme avant bn_tongue



Mini-tchat

?

test dit : Bonjour Hier, 23h41 via Résumé : L'Avare

test écrit : Test Hier, 23h41 via Résumé : L'Avare

Maricela déclare : What is size of wholesale jerseys may have? Know more about here - <a href="http://aeml.ca">wholesale mlb jerseys</a> Hier, 2h43 via Cours XHTML/CSS

sasa chuchote : A très bien.. #grosvent Le 21 février, 20h11 via Résumé du livre : Le Cid de...

sasa murmure : CC Le 21 février, 20h07 via Résumé du livre : Le Cid de...

tutota écrit : Je veux plus petit que sa ... Le 20 février, 22h54 via Résumé : L'Avare

clem murmure : Cc Le 20 février, 16h10 via Résumé - Les Fourberies De ...

clara s'exclame : Lol Le 19 février, 19h08 via Résumé - Le Médecin Malgrè ...

26 écrit : Trop facile Le 18 février, 13h49 via Accueil

26 bafouille : 7 Le 18 février, 13h48 via Accueil

moi bafouille : Coucou Le 16 février, 17h13 via Résumé scène par scène - Le...

lol lol déclame : Psssssssssssssssssssss Le 16 février, 13h34 via Résumé : Le Mariage de Figa...

dhg654 bafouille : *larmes*
C'est trop romantique pour moi
Le 16 février, 12h41 via Boîte à Nuts

dhg654 proclame : C'est si beau...
Si seulement je pouvais moi aussi dire cela à quelqu'un...
Le 16 février, 12h40 via Boîte à Nuts

Hey scribouille : Oui!
C'est le plus beau jour de ma vie!
Le 16 février, 12h39 via Boîte à Nuts

Un amoureux un peu timide tergiverse : +Hey
Veux tu m'épouser?
Le 16 février, 12h38 via Boîte à Nuts

Hey tergiverse : Oh my god I think I love you!
Je t'aime, Un amoureux un peu timide!
Le 16 février, 12h38 via Boîte à Nuts

Un amoureux un peu timide murmure : I love you !!!! Le 16 février, 12h33

d écrit : D Le 16 février, 12h24 via Résumé scène par scène - Le...

d bafouille : D Le 16 février, 12h24 via Résumé scène par scène - Le...

Fiery Blaze proclame : Ca va les bns Le 16 février, 12h22 via Résumé scène par scène - Le...

Fiery Blaze tergiverse : Je rigole Le 16 février, 12h22 via Résumé scène par scène - Le...

Fiery Blaze griffonne : Nan Le 16 février, 12h22 via Résumé scène par scène - Le...

Fiery Blaze murmure : Ultra super mega hyper tres vraiment trop beaucoup pas bon Le 16 février, 12h22 via Résumé scène par scène - Le...

Fiery Blaze chuchote : Trop pourri Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze gribouille : Vraiment degeulasse Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze dit : Super mauvais Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze proclame : Horrible Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze écrit : Beurk pas bon Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze dit : En fait je trouve ca degoutant Le 16 février, 12h21 via Résumé scène par scène - Le...

Fiery Blaze griffonne : Totalement hyper super absolument vraiment beaucoup tres ultra mega tellement trop BON!!!!!!!!!!!!!!!!! Le 16 février, 12h20 via Résumé scène par scène - Le...

Fiery Blaze proclame : Trop bon. Le 16 février, 12h18 via Résumé scène par scène - Le...

Fiery Blaze s'exclame : Exquis! Le 16 février, 12h18 via Résumé scène par scène - Le...

Fiery Blaze déclare : C'est un regal Le 16 février, 12h18 via Résumé scène par scène - Le...

Fiery Blaze chuchote : Delicieux Le 16 février, 12h17 via Résumé scène par scène - Le...

Fiery Blaze s'exclame : Miam
;P
Le 16 février, 12h17 via Résumé scène par scène - Le...

Fiery Blaze tergiverse : J'aime les BNs Le 16 février, 12h17 via Résumé scène par scène - Le...

Fiery Blaze bafouille : Hey Le 16 février, 12h15 via Résumé scène par scène - Le...

reztyuio déclame : Bonjour Le 15 février, 11h37 via Résumé : Le Tartuffe de Mol...

said murmure : Mort au vache Le 12 février, 13h05 via Résumé : On ne badine pas a...

said chuchote : Skrt Le 12 février, 13h04 via Résumé : On ne badine pas a...

3+1+1+1+1=7 s'exclame : 1+1+1+1+1+1+1=7 Le 12 février, 12h48 via Résumé - Le Médecin Malgrè ...

77 déclame : 77 Le 12 février, 11h42 via Résumé : L'Avare

soso murmure : Tu fais quoi ? Le 10 février, 10h38 via Résumé : L'Avare

lila déclare : Hello ! sa va ? Le 10 février, 10h37 via Résumé : L'Avare

soso murmure : Hello ! Le 10 février, 10h37 via Résumé : L'Avare

lila gribouille : C hyper pratique Le 10 février, 10h37 via Résumé : L'Avare

sofia ttc déclame : Adore se site je le recommende Le 08 février, 17h22 via Résumé - Le Médecin Malgrè ...

Mohamed rah s'exclame : Shnou ka dirou Le 08 février, 16h41 via Romain Gary : La Promesse d...

Azerty tergiverse : As zeerttyu Le 08 février, 16h39 via Romain Gary : La Promesse d...

Publicité



©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS