Classe de Xx-lOvedesign974-xX

Coucou et bienvenue à toi dans ma classe, alors je me présente: Syan dans le monde d'internet, et Alexandre (Alex) dans la vie de tout les jours ^^. J'ai eu quelques expériences sur divers projet web et je vais t'en faire profiter.
Alors, pour commencer, si j'ai bien compris, tu as lus les deux cours en complet ? Si oui, je vais te faire démarrer quelques petits exercices simples qui se compliqueront, et on verra quelques notions ensemble, puis ensuite je pense qu'on attaquera les webdesign.

Voilà; voilà Wink

Salut, merci à toi de m'avoir prise. Je m'appelle Jessica bientôt la vingtaine et je suis de La Réunion.
Oui c'est bien ça, j'ai d'ailleurs fini de lire le css que très récemment!

D'accord, alors, on va utiliser la base suivante: un fichier index.html, un sous dossier style qui comprendra un dossier css avec design.css et un dossier images (pour les images du design). On rajoutera les images qui ne font pas parti du design dans un autre dossier images à part.
Ca donne ça côté structure :
/.
index.html
-----/images (ce dossier images où l'on met les images à part)
-----/style
-----------/css
------------design.css
-----------/images

Pour l'index.html, on gardera ce code de base pour le moment :

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>

</body>
</html>

Pour le premier exercice; je voudrais que tu donnes un nom au site, et que tu mettes sur la page deux paragraphes avec une phrase en italique, puis une image après les deux paragraphes (qui sera placé dans le dossier des images à part), et un lien à la fin qui mène à un autre site ^^

Edit: Tu posteras le code ici pour chaque exercice

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>Actuality Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
<p><img src="images/usa.jpg" alt="5_avenue" title="new_york"/></p>
<p><a href="http://wwww.learning-design.actifforum.com">clique ici</a></p>

</body>
</html>

Ok c'est parfait =D
Alors maintenant, je voudrais que tu mettes tout les paragraphes dans un seul bloc (qu'on pourra créer avec la balise <div></div>) qu'on entoura avec le css d'une bordure d'1px de la couleur de ton choix et de type solid. Puis je voudrais que tu rajoutes ensuite avant le bloc un autre bloc où cette fois ci je voudrais que tu mettes un tableau d'une ligne et de 4 cellules de large. Pour remplir le contenu des cellules, tu peux mettre "..." ou tout autre chose que tu veux ^^

Edit : Pour rendre les blocs visibles, tu peux rajouter aussi une bordure en css si tu le souhaites mais ce n'est pas obligé

d'accord, mais je m'absente jusqu'à vendredi et donc je le ferais à mon retour.

D'accord, aucun soucis Wink

Je suis de retour,

code html:

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>Actuality Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div>
<table>
<tr>
<td>"..."</td>
<td>"..."</td>
<td>"..."</td>
<td>"..."</td>
</tr>
</table>
</div><br />
<div id="paragraphe">
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
<p><img src="images/usa.jpg" alt="5_avenue" title="new_york"/></p>
<p><a href="http://wwww.learning-design.actifforum.com">clique ici</a></p>
</div>

</body>
</html>

code css:

Code:: table
{
border-collapse: collapse;
margin: 10px;
}

tr, td, div
{
border: 1px solid gray;
}

Ok, c'est du travail parfait, je pense que tu as le niveau pour commencer les webdesign.
Pour la création de design webs, il existe de nombreuses manières de les réaliser, certains les font en tableau, d'autres les font en mapping, ou d'autres en bloc (mon cas) et il doit y avoir d'autres manières de programmer.
On va étudier ici la manière de réaliser des design par la technique des blocs.
Un site web est généralement composé d'une en-tête (header), d'un corps de page et d'un pied de page (footer).
Le header est la partie où l'on met la bannière du site (une image en haut de site), qui peut s'accompagner d'un menu horizontal en dessous.
Le corps de la page, c'est là où l'on mettra tout le reste, tout le blabla du site, des fonctions comme un mini espace de discussion, un menu vertical ect...
Le pied de page, c'est là où on met généralement le "copyright" (droit d'auteur).
En image ça donne ça :

Classe de Xx-lOvedesign974-xX Sanstitre1kw

On peut envelopper ces 3 blocs dans un 4e bloc (qui servira à définir la taille du design, la police d'écriture pour la page, l'alignement du texte par défaut, le centrage du design ect...) par exemple un bloc all

Classe de Xx-lOvedesign974-xX Sanstitre2mg

Dans le bloc corps, on pourra aussi placer un menu et du blabla comme on le souhaite :

Classe de Xx-lOvedesign974-xX Sanstitre4eb

On va donc commencer par s'entrainer à réaliser un simple design un peu vide avant de voir des choses plus complexes.

Je voudrais que tu réalises une page avec les 4 blocs
Avant de commencer, on reprendra le code de base donné au début, et je voudrais que tu mettes dans le css :

Code:: body {
padding: 20px 0 30px 0;
}

Le padding permettra de faire un espace de 20pixels à partir du haut (pour pas que le premier bloc colle le haut de page), de 0 pixels à partir de droite, de 30 pixels à partir du bas (pour pas que le dernier bloc colle au bas de page) et de 0 pixels à partir de gauche.

Au passage, pour donner des styles au div en utilisant un id en css, c'est de la forme suivant :
Code HTML :
<div id="all">
</div>
Code CSS:
div#all {
border:...;
}
Pour le bloc all, je voudrais que tu le fasses d'une largeur définie: 800px de largeur par exemple.
Pour le bloc header, je voudrais que tu le fasses de la largeur et de la hauteur d'une bannière (images au choix) et que tu mettes cette bannière en background pour le bloc. Pour le centrer automatiquement, il y a : margin: auto; en css.
Pour le bloc corps, je voudrais que tu le mettes de la largeur du bloc all, que tu lui mettes une bordure, une couleur de fond et une hauteur minimum de 300px (min-height: valeur au choix en px;)
Pour le pied de page, je voudrais un espace qui le sépare du bloc corps (margin-top: valeur au choix en px;) une bordure et une hauteur de 40px.

Une fois tout cela fait, tu peux essayer de rajouter d'autres choses en css pour tester si tu veux ^^ ensuite on verra les différents éléments qu'on peut mettre dans les blocs avant des designs plus complexes.

J'oubliais, il faudra que tu rajoutes un margin: auto; dans le css pour le bloc all, pour le centrer dans la page Smile

Edit : En rajoutant un espace entre le header et le corps, et en mettant des bordures aux 3 blocs et une couleur de fond, tu devrais obtenir quelque chose de similaire à :

Classe de Xx-lOvedesign974-xX Sanstitre2cel.th

J'arrive pas à faire afficher l'image, je poste quand même:

HTML:

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>USA actuality</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div id="all">

<div id="header">
</div>

<div id="corps">
<div id="contenu">
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
   <div id="menu">
      <div class="menu">
      <div class="menu">
</div>
   </div>
      </div>
      </div>

</div>

<div id="footer">
</div>

</div>

</body>
</html>

CSS:

Code:: body
{
padding: 20px 0 30px 0;
}

div#all
{
border: 2px dashed yellow;
width: 800px;
height: 800px;
margin: auto;
margin-bottom: 5px;
}

div#header
{
border: 2px dashed yellow;
background-image: url("style/images/usa1.jpg");
width: 750px;
height: 320px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div#corps
{
padding-left: 10px;
color: white;
width: 750px;
height: 300px;
background-color: black;
border: 2px dashed yellow;
margin: auto;
margin-top: 20px;
}

div#footer
{
width: 750px;
height: 40px;
margin-bottom: 15px;
margin: auto;
border: 2px dashed yellow;
background-color: black;
margin-top: 20px;
}

Pour l'image, il faut indiquer la position de l'image par rapport à l'endroit où se trouve le fichier css ^^
Ca donne : background-image: url("../../images/usa1.jpg"); à la place de background-image: url("style/images/usa1.jpg");
Sinon tout le reste est parfait, c'est merveilleux =D Tu vas vite apprendre ^^
Je te prépare la suite de l'exercice Smile

D'accord merci! ^^

J'ai rectifié mais ça n'a rien changé, c'est bizarre.

Edit:
C'est bon j'ai réussi en fait il fallait mettre : "../images/usa1.jpg"

Ok ^^ Je pensais que tu avais mis l'image à un autre endroit Smile

Ah d'accord! Non j'avais mis dans le bon dossiers!

Alors, maintenant pour terminer le petit design de test, je vais t'expliquer comment mettre un menu vertical (à gauche ou à droite du corps) : (ensuite, faut aller tout en bas de la page pour la suite de l'exercice)

Classe de Xx-lOvedesign974-xX Sanstitre5ho.th

En utilisant la technique des blocs, il faut créer un bloc entre le bloc header et le blop corps et utiliser la propriété css "float". On met à ce nouveau bloc une hauteur minimum et une largeur et on positionne le bloc à gauche ou à droite avec le float (float : left; ou float: right). Le bloc corps que j'ai mis utilisant un width: 100%, il prendra 100% de la place libre restant.

Classe de Xx-lOvedesign974-xX Sanstitre6lr.th

Classe de Xx-lOvedesign974-xX Sanstitre7ft.th

Code HTML :

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>Actuality Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div id="all">
<div id="header"></div>
<div id="menu"></div>
<div id="corps"></div>
<div id="footer"></div>
</div>

</body>
</html>

Sinon on peut lui mettre une taille qui lui est propre, par exemple 400 px; et de mettre une marge à gauche de la taille du bloc menu + de l'espace qu'on veut entre le bloc menu et le bloc corps (par exemple si la taille du bloc all fait 800px, que le menu fait 200px et que le corps fait 400px, que l'on veut que le bloc corps soit collé à droite sur la limite du bloc all; il faut mettre au bloc corps margin-left: 400px;)
Ce passage est peut être pas très clair, si tu as pas compris, hésites pas à poser des questions.

Classe de Xx-lOvedesign974-xX Sanstitre8qd.th

Ensuite, à l'intérieur du bloc menu et du bloc corps, on peut placer deux autres blocs pour modifier le style du haut et du bas de ces deux blocs.
Code HTML :

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>Actuality Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div id="all">
<div id="header"></div>

<div id="menu">
   <div id="menu_haut"></div>
   
   <div id="menu_bas"></div>
</div>

<div id="corps">
   <div id="corps_haut"></div>
   
   <div id="corps_bas"></div>
</div>

<div id="footer"></div>
</div>

</body>
</html>

Classe de Xx-lOvedesign974-xX Sanstitre9v.th

Code CSS des nouveaux blocs :

Code:: background-color: #1c467a;
border: 1px solid #000000;

On peut mettre des images à la place des couleurs de fonds et ...
A partir de là, on peut déjà faire de très joli design, comme celui que je travaille depuis hier pour Chuck* (qui est sur ce forum) Si j'obtiens son autorisation je te montrerai le design obtenu en utilisant exactement les techniques qu'on vient de voir. (Puis après on fera un vrai design de ton choix (si tu veux en créer un ou si tu en as un sous la main et que tu voudrais reproduire pour comprendre) pour passer à du concret)
Sinon on peut obtenir des design de ce genre :
http://mademoiselle-art.com/

Après, je t'expliquerai comment diviser le corps en 3 blocs (pour mettre par exemple un menu à gauche, le blabla au milieu puis une colonne pour autre chose à droite) et on verra aussi les menus horizontal.
J'attends de voir d'abord si tu as compris ce que j'ai expliqué ici avant de continuer ^^
Alors, pour terminer ce chapitre, je voudrais que tu mettes un menu, à gauche ou à droite du bloc corps de ton design.

Edit : j'ai rajouter les code HTML

J'ai un problème pour le menu, en fait il se met a gauche dans le bloc coprs sous le texte que je lui donne une taille propre ou la place restant!

Ok, je peux voir ton code HTML et CSS pour voir d'où ça vient ? Smile

oups!

HTML:

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>USA actuality</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div id="all">

<div id="header">
</div>

<div id="menu">
</div>

<div id="corps">
<div id="contenu">
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
   <div id="menu">
      <div class="menu">
      <div class="menu">
</div>
   </div>
      </div>
      </div>

</div>

<div id="footer">
</div>

</div>

</body>
</html>

CSS:

Code:: body
{
padding: 20px 0 30px 0;
}

div#all
{
border: 2px dashed yellow;
width: 800px;
height: 750px;
margin: auto;
margin-bottom: 5px;
}

div#header
{
border: 2px dashed yellow;
background-image: url("../images/usa1.jpg");
width: 750px;
height: 320px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div#menu
{
width: 250px;
height: 300px;
border: 2px dashed yellow;
float: left;
}

div#corps
{
padding-left: 10px;
color: white;
width: 500px;
height: 300px;
background-color: black;
border: 2px dashed yellow;
margin: auto;
margin-top: 20px;
margin-left: 500px;
}

div#footer
{
width: 750px;
height: 40px;
margin-bottom: 15px;
margin: auto;
border: 2px dashed yellow;
background-color: black;
margin-top: 20px;
}

Ok, en faîte, c'est car tu dois mettre le bloc menu entre le bloc header et le bloc corps et pas dans le bloc corps ^^
En supprimant dans le bloc corps :

Code:: <div id="menu">
<div class="menu">
<div class="menu">
</div>
</div>
</div>

Ton problème devrait être réglé, il te manquera alors juste à revoir le margin-left: 500px; dans div#corps
Je te laisse essayer Smile

Ah d'accord il fallait l'enlever. Je vais voir pour le "margin-left"

HTML:

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>USA actuality</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />

</head>

<body>
<div id="all">

<div id="header">
</div>

<div id="menu">
</div>

<div id="corps">
<div id="contenu">
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
</div>

</div>

<div id="footer">
</div>

</div>

</body>
</html>

CSS:

Code:: body
{
padding: 20px 0 30px 0;
}

div#all
{
border: 2px dashed yellow;
width: 800px;
height: 750px;
margin: auto;
margin-bottom: 5px;
}

div#header
{
border: 2px dashed yellow;
background-image: url("../images/usa1.jpg");
width: 750px;
height: 320px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div#menu
{
width: 200px;
height: 300px;
border: 2px dashed yellow;
float: left;
background-color: black;
margin-left: 20px;
margin-right: 20px;
}

div#corps
{
padding-left: 10px;
color: white;
width: 490px;
height: 300px;
background-color: black;
border: 2px dashed yellow;
margin: auto;
margin-top: 20px;
margin-left: 270px;
}

div#footer
{
width: 750px;
height: 40px;
margin-bottom: 15px;
margin: auto;
border: 2px dashed yellow;
background-color: black;
margin-top: 20px;
}

En t'attendant, j'ai essayé le 1er mais j'ai un problème lol, le bloc corps prend toute la largeur jusqu'au bloc all et puis le bord du menu est décalé. Je vois pas d'ou ça vient, d'abord je voudrais mettre le bloc bloc aligné avec le bloc header et footer et bien la bordure du menu.
CSS:

Code:: body
{
padding: 20px 0 30px 0;
}

div#all
{
border: 2px dashed yellow;
width: 800px;
height: 750px;
margin: auto;
margin-bottom: 5px;
}

div#header
{
border: 2px dashed yellow;
background-image: url("../images/usa1.jpg");
width: 750px;
height: 320px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div#menu
{
margin-top: 20px;
width: 200px;
min-height: 300px;
border: 2px dashed yellow;
background-color: black;
float: right;
}

div#corps
{
color: white;
width: 100%;
min-height: 300px;
background-color: black;
border: 2px dashed yellow;
margin-top: 20px;
margin-left: 20px;
}

div#footer
{
width: 750px;
height: 40px;
margin-bottom: 15px;
margin: auto;
border: 2px dashed yellow;
background-color: black;
margin-top: 20px;
}

HTML:

Code:: <!DOCTYPE html
PUBLIC "-//W3C//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>USA actuality</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="Design" type="text/css" rel="stylesheet" href="style/css/design.css" media="screen" />
</head>

<body>
<div id="all">

<div id="header">
</div>

<div id="menu">
</div>

<div id="corps">
<div id="contenu">
<p>Bonjour, je vous souhaite la bienvenue sur mon site</p>
<p><em>Je débute tout juste la construction de site web, soyez patient s'il vous plait merci!</em></p>
</div>

</div>

<div id="footer">
</div>

</div>

</body>
</html>

Oups ! J'ai relus ce que j'avais écris et j'ai remarqué qu'en faite le problème venait de moi :s j'ai écris que le bloc prenait 100% de la place libre restante avec width: 100%; mais il prend 100% de la place en largeur du bloc qui le contient (donc du bloc all) et pas la place libre restante après qu'on ait mit le bloc menu.

Donc pour le problème, vus que ton bloc all fait 800px et que ton header fait 750px; il y a donc un espace de 25px à gauche et de 25px à droite.
Pour aligner le bloc corps et menu avec le header et footer, il faut alors mettre à ton bloc corps margin-left: 25px; et à ton bloc menu, margin-right: 25px;.

Ensuite, on compte la place restante : 800px - 25px -25px, il reste 750px.
Comme ton menu fait 200px, il reste 750px - 200px soit 550 px restant pour le bloc corps.
Alors pour le bloc corps, faudra mettre un width de 550px ou moins (mais pas plus).

Désolé de mon erreur Embarassed

D'accord, mais si je met width: 100px; et ben il fait donc plus 800px et pour la suite on se bas sur 800px, je ne comprends pas. Puis du coup quand j'ai mis 100% le bloc "all" a pris toute la largeur. Le bloc Header et Footer est resté à la même place mais pas le bloc corps et menu.

Je te met mon code:

CSS:

Code:: body
{
padding: 20px 0 30px 0;
}

div#all
{
border: 2px dashed yellow;
width: 100%;
height: 750px;
margin: auto;
margin-bottom: 20px;
}

div#header
{
border: 2px dashed yellow;
background-image: url("../images/usa1.jpg");
width: 750px;
height: 320px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

div#menu
{
margin-top: 20px;
margin-right: 25px;
width: 200px;
min-height: 300px;
border: 2px dashed yellow;
background-color: black;
float: right;
}

div#corps
{
color: white;
width: 550px;
min-height: 300px;
background-color: black;
border: 2px dashed yellow;
margin-top: 20px;
margin-left: 25px;
}

div#footer
{
width: 750px;
height: 40px;
margin-bottom: 15px;
margin: auto;
border: 2px dashed yellow;
background-color: black;
margin-top: 20px;
}

Aie, je pense que j'ai tout embrouillé x), en faîte, le bloc all, il sert à définir la largeur du design, et tu avais mis 800px de largeur. Donc faut que tout ce qu'on met dedans ne dépasse pas 800px de largeur.
Là faut que tu remplaces :

Code:: div#all
{
border: 2px dashed yellow;
width: 100%;
height: 750px;
margin: auto;
margin-bottom: 20px;
}

Par (Si tu veux que le design ne dépasse pas 800px de largeur):

Code:: div#all
{
border: 2px dashed yellow;
width: 800px;
height: 750px;
margin: auto;
margin-bottom: 20px;
}

Ensuite faut que tu supprimes le : "margin-bottom: 20px;" qui est dans le div#header car sinon il y aura un margin en trop et le bloc corps et menu ne seront pas à la même hauteur.

Désolé désolé désolé si j'ai mal expliqué :s j'espère que j'arriverai mieux à expliquer les autres jours Smile

Ok là c'est parfait! donc on laisse tombé le 100%?

» Classe de Xx-lOvedesign974-xX
» Classe de Fraise Tagada [Fermeture de la classe]
» classe de Just-me
» Classe de Mia