Aide sur mise en place d'un design avec css et xhtml (wordpress)

Bonjour,
Je suis entrain de réaliser le design pour un serveur de jeu. J'ai déjà fait la planche sous Photoshop, et je suis actuellement entrain de coder le tout en css et xhtml. Le site sera propulsé sous Wordpress.

Ci-dessous le lien vers la planche du site.
http://radicalcorp.info/upload/fenrir/07.jpg

Je n'y connais pas grand chose en css, je me suis d'abord basé sur un thème assez simple de Wordpress, puis m'y suis mis du début avec l'aide de conseil de départ. J'obtiens l'effet voulu, mais en contournant les problèmes, et c'est pas ce que je veux. Le design tel qu'il est est correctement agencé, le problème est que je suis dans l'obligation de mettre une hauteur fixe au wrapper central, sinon le site est totalement dispatché.

Je vous met le lien vers le design en ligne.
http://radicalcorp.info/fenrir-design/

Je vous liste aussi les problèmes que je rencontre pour l'instant:
-obligation d'avoir une hauteur fixe pour le wrapper de contenu, sinon le site est totalement dispatché.
[Résolu = utilisation de span plutot que de div. ^^']-pour le div du statut des serveurs, je suis obligé de bidouiller avec un margin-top négatif pour que ce soit aligné, ça donne un code assez malpropre et compliqué, alors que je suis certain que je pourrais faire simple...

Ci-dessous, le css et la page.

/*

Theme Name: Fenrir Colorful

Theme URI:  http://serveur-fenrir.net/
 

Description: Design réservé au site du serveur Fenrir

Version: 1.0

Author: Fenrir

Author URI:  http://serveur-fenrir.net/
 

Aucune reproduction n'est autorisée */

/* DEBUT DU DESIGN GENERAL DU SITE -------------------------------------------- */
body
{
	background-color:#C7B29A;
	font-family:Tahoma;
	font-size:12px;
	line-height:20px;
	margin:0 auto;
}
#bigwrapper
{
	position:absolute;
	width:750px;
	left:50%;
	margin-left:-375px;
	color:#fff;
	padding:0;
}
#header
{
	position:relative;
	width:750px;
	height:111px;
	background-image:url(header-750x111.gif);
}
#wrapper
{
	position:relative;
        width:750px;
        height: 2000px;
        background-color:#000000;
}
#middle01
{
	position:relative;
        width:82px;
        height: 100%;
	float:left;
	background-image:url(middle-01-82x1.gif)
}
#middle02
{
	position:relative;
        width:155px;
        height: 100%;
	float:left;
	background-position: top left;
	background-repeat: no-repeat;
	background-image:url(middle-02-155x960.gif);
	background-color: #F1EFE2;

}
#middle03
{
	position:relative;
        width:5px;
        height: 100%;
	float:left;
	background-position: top left;
	background-repeat: no-repeat;
	background-image:url(middle-03-5x959.gif);
	background-color: #F1EFE2;
}
#middle04
{
	position:relative;
        width:429px;
        height: 100%;
	float:left;
	background-position: top left;
	background-repeat: no-repeat;
	background-image:url(middle-04-429x959.gif);
	background-color: #D7DDDF;
}
#middle05
{
	position:relative;
        width:79px;
        height: 100%;
	float:left;
	background-image:url(middle-05-79x1.gif)
}
#footer
{
	position:relative;
	width:750px;
	height:38px;
	background-image:url(footer-750x38.gif);
}
/* FIN DU DESIGN GENERAL DU SITE ---------------------------------------------- */

/* DEBUT DU DESIGN DES COLONNES DU SITE --------------------------------------- */
.navigation
{
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 49px;
        height: 209px;
        width: 146px;
        color: #9AB40B;
        font-weight: bold;
        font-size: 16px;
        text-align: center;
}
.navigation a:link, a:visited
{
        text-decoration: none;
        color: #9AB40B;
}
.navigation a:hover
{
        text-decoration: none;
        color: #D36024;
}
.watch
{
        margin-left: 5px;
        margin-right: 5px;
        margin-top: 30px;
        height: 71px;
        width: 146px;
        color: #9E8B75;
        font-weight: bold;
        font-size: 12px;
        line-height: 15px;
}
.statuts
{
        width: 130px;
        height: 71px;
}
.serveurs
{
        width: 90px;
        position:relative;
        float: left;
        text-align: right;
}
.online
{
        width: 37px;
        color: #9AB40B;
        position:relative;
        float: right;
        text-align: left;
        margin-left: 3px;
}
.offline
{
        width: 37px;
        color: #CC0000;
        position:relative;
        float: right;
        text-align: left;
        margin-left:3px;
}
.post
{
        padding-left: 10px;
        padding-right: 10px;
        color: #9E8B75;
        text-align: justify;
}
.post a:link, a:visited
{
        color: #766455;
        text-decoration: none;
}
.post a:hover
{
        color: #CBB99C;
        text-decoration: none;
}
.post h3
{
        color: #D36024;
        text-transform:uppercase;
        font-size:20px;
        text-align: right;
        font-style:italic;
        margin:0px 0 -2px;
}
.post h2
{
        color: #D36024;
        font-size:12px;
        text-align: right;
        font-style:italic;
        margin:0px 0 -2px;
}
.quote
{
        border-top: 1px solid #ffffff;
        border-bottom: 1px solid #ffffff;
	font-style:italic;
	padding-top: 3px;
	padding-left: 3px;
	padding-bottom: 3px;
	padding-right: 25px;
	text-transform:uppercase;
	font-size:10px;
	line-height:12px;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 5px;
	background-image:url(quote.gif);
	background-position:top right;
	background-repeat:no-repeat;
}
.quote a:link, a:visited
{
        color: #766455;
        text-decoration: none;
}
.quote a:hover
{
        color: #CBB99C;
        text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Serveur Fenrir - test de design</title>
<meta name="description" content="This is the WordPress theme playground for the undersigned / Webdesign reference book.">
<meta name="keywords" content="Ragnarok, Online, mmorpg, rpg, multijoueur, serveur, gratuit, pk, player, killable, fenrir, jeu, petite, config, long, profond, agreable, beau, riche">
<meta name="generator" content="WordPress 2.0.2"><!-- leave this for stats -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<link rel="alternate" type="application/rss+xml" title="Serveur Fenrir RSS Feed" href="http://serveur-fenrir.net/page/feed/">
<link rel="pingback" href="http://serveur-fenrir.net/page/xmlrpc.php">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://serveur-fenrir.net/page/xmlrpc.php?rsd">
</head><body>
<? function status_check( $ip, $port )
{
       $up = @fsockopen( $ip, $port, $errno, $errstr, 1 );
       if( $up == false )
       {
               return "<span class='offline'>Offline</span><br />";
       }
       else
       {
               return "<span class='online'>Online</span><br />";
       }
       @fclose( $up );
}
?>
<div id="bigwrapper">
<div id="header"></div>
<div id="wrapper">
<div id="middle01"></div>
<div id="middle02">
<div class="navigation">
<a href="#">News</a><br />
<a href="#">Serveur</a><br />
<a href="#">Histoire</a><br />
<a href="#">Regles</a><br />
<a href="#">Installation</a><br />
<a href="#">Inscription</a><br />
<a href="#">Divers</a><br />
</div>
<div class="watch"><div class="statuts"><?
include("func_watch.php");

$ip="**.***.***.***";
   echo "<span class='serveurs'>Login server : </span>".status_check( $ip, 6900 );
   echo "<span class='serveurs'>Char server : </span>".status_check( $ip, 5121 );
   echo "<span class='serveurs'>Map server : </span>".status_check( $ip, 6120 );
?></div></div>
</div>
<div id="middle03"></div>
<div id="middle04"><div class="post"><h3>Lorem ipsum ratatinus Malabinus</h3><h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2> Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. <a href="#">Nunc egestas magna et turpis.</a> Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <div class="quote">C'est la danse des canards !!! Coin Coin Coin. Juste un petit test pour voir ce que donne les bloques de citations.</div> Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. <div class="quote">Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Proin vulputate mauris sit amet elit.</a> Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis.</div> Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vulputate mauris sit amet elit. Pellentesque nec metus. Nunc egestas magna et turpis. Phasellus sed eros.</div></div>
<div id="middle05"></div>
</div>
<div id="footer"></div>
</div>
</body></html>

Donc voilà, j'aurais voulu un peu d'aide, et savoir si je ne m'embarqué pas dans la mauvaise direction avec le code actuel.
Merci par avance.
Modifié par Radical Edward (22 Jul 2006 - 14:55)

Bonjour,

Pourquoi tu n'imbriques pas tes blocs plutôt que d'utiliser toutes ces positions relative et absolute ?

Du style
<body>
<div id="conteneur">
<div id="header"></div>
<div id="colonne gauche"></div>
<div id="colonne droite"></div>
<div id="footer"></div>
</div>
</body>

Avec colonne gauche et droite en float et min-height et le footer collé à la colonne la plus longue par un clear: both

C'est juste une idée

Bah je n'y connais absolument rien en design avec div sans tableaux. Je suis un peu parti comme ça, à l'aveugle, et apparemment je suis mal parti. ^^

Jete un oeil là http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS
Modifié par ghost (22 Jul 2006 - 22:39)

J'ai regardé, mais est-ce que je pourrais garder l'intégrité de ma planche avec ce genre de mise en page ? Si oui, je ne vois pas du tout comment faire à cause de l'image dans la partie contenu du site.
Sinon, merci pour le both: clear, ça résoud le problème du footer, mais je n'arrive pas à faire que les colonnes suivent toutes la hauteur du contenu, avec min-height elles s'arrêtent à la valeur définie et ne s'agrandissent pas avec le calque de contenu.
Merci pour l'aide apporté déjà. ^^

Bonjour,

Juste pour essayer ce bout de code :

body
{
	background-color:#C7B29A;
	font-family:Tahoma;
	font-size:12px;
	line-height:20px;
    margin: 0;
    padding: 0;

}

#conteneur
{
	width:750px;
    margin: 0; padding: 0;
    margin: auto; 
	color:#000;
   border: 1px solid #000;
   background-color:#f1ede1;
}

#header
{
	width:750px;
	height:111px;
    background-color: #e2dff2;
   border: 1px solid #ff3403;
   /*    background-image: url("ton_image.jpg");*/
}
#gauche 
{  	
   float:left;
   width: 170px;
   height: 400px;
   border:1px solid #262a6d;
   margin: 0; padding: 0;
   background-color:#f1ede1;
}

html>body #gauche {
height: auto;
min-height: 400px;
}

#droite 
{  
   float: left;	
   width: 526px;
   border: 1px solid #e91e00;
   margin-top: 0px;
   margin-bottom: 0px;
   padding-left: 25px;
   padding-right: 25px;
   color: #ae846c;
   background-color:#d7dddf;
   /*    background-image: url("ton_image.jpg");
         background-repeat: no-repeat;*/
}
html>body #droite {
height: auto;
min-height: 400px;
}

#footer
{  
   clear: both;
   height: 50px;
   margin-top: 0px; 
   text-align: center;
   background-color:#f1ede1;
   /*    background-image: url("ton_image.jpg");*/
} 

#item1
{  
   position: relative;
   top: -20px;
   left: 10px;
   width : 150px;
   height: 100px;
   background-color: #1bff26;

}

#item2
{  
   margin: auto;
   width : 150px;
   height: 100px;
   background-color: #684fff;

}
</style>
</head>

<body>
<div id="conteneur">
<div id="header"> Bla bla</div>
<div id="gauche">
<div id="item1"> bla bla</div>
<div id="item2"> bla bla</div>
</div>
<div id="droite"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.

Quisque pulvinar. Etiam adipiscing. Nulla leo. Duis imperdiet felis eu nulla. Aenean iaculis. Donec pulvinar luctus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt dapibus turpis. Aliquam urna velit, viverra eu, volutpat et, eleifend ut, quam. Fusce ut arcu. Vestibulum tincidunt tincidunt massa. Fusce rutrum.

Integer sit amet mi sit amet diam convallis ultricies. Praesent lectus. Suspendisse sem libero, auctor nec, accumsan sed, sollicitudin eget, mi. Phasellus risus. Morbi tristique elit sit amet justo. Nam rutrum tincidunt leo. Maecenas eget nisl sed risus fringilla auctor. Quisque volutpat lectus ut erat interdum pharetra. Sed posuere. Donec pretium augue at felis. Vestibulum varius nunc at lorem. Aenean adipiscing ultrices magna. Aliquam non nunc. Sed urna. Curabitur sagittis turpis nec nisi. Nullam sed magna. Curabitur tempus congue urna.	
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris in lacus. Aenean magna nunc, porta a, suscipit ac, posuere eu, leo. Maecenas sapien odio, tristique eget, consequat ut, consequat a, turpis. Sed mollis egestas nisl. Morbi dapibus, tellus eu tincidunt semper, mi metus euismod odio, in hendrerit nisl tortor quis risus. Donec fermentum, diam ac vestibulum venenatis, mi nisi volutpat leo, in ultricies orci eros id nisi. Nam viverra consequat urna. Sed dapibus magna a ante. Nullam in augue. Nam nec est mollis quam pretium congue. Pellentesque molestie, sem in scelerisque consequat, mauris tellus molestie lacus, et vehicula velit tellus id ipsum. Vestibulum aliquet convallis orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nunc.

Quisque pulvinar. Etiam adipiscing. Nulla leo. Duis imperdiet felis eu nulla. Aenean iaculis. Donec pulvinar luctus nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tincidunt dapibus turpis. Aliquam urna velit, viverra eu, volutpat et, eleifend ut, quam. Fusce ut arcu. Vestibulum tincidunt tincidunt massa. Fusce rutrum.

Integer sit amet mi sit amet diam convallis ultricies. Praesent lectus. Suspendisse sem libero, auctor nec, accumsan sed, sollicitudin eget, mi. Phasellus risus. Morbi tristique elit sit amet justo. Nam rutrum tincidunt leo. Maecenas eget nisl sed risus fringilla auctor. Quisque volutpat lectus ut erat interdum pharetra. Sed posuere. Donec pretium augue at felis. Vestibulum varius nunc at lorem. Aenean adipiscing ultrices magna. Aliquam non nunc. Sed urna. Curabitur sagittis turpis nec nisi. Nullam sed magna. Curabitur tempus congue urna.
</p>
 </div>
<div id="footer"> bla bla </div>
</body>

Il faut juste faire attention aux bordures des blocs qui sont intégrées dans les dimensions (et de manière variable en fonction du navigateur !) car si les blocs sont trop larges (bordures y compris) pour être cote à cote un passe sous l'autre. Normalement comme tu n'as pas de bordures pour ton désign cela devrait aller au niveau de la compatibilité.

Pour le bloc suivant la taille du contenu, j'utise nin-height mais il existe d'autres méthodes entre autre overflow; hidden que je n'ai pas encore testé mais qui semblerait plus conforme.

Voilou

a écrit :
Modérateur
4628 Posts
Bonjour,

Mais laissez-donc les hauteurs se calculer toutes seules, nom d'une pipe en bois ! cligne

Pour qu'un conteneur prenne en compte ses descendants flottants dans le calcul de sa hauteur, il faut donner à sa propriété overflow une autre valeur que "visible"; Par exemple :

#contenu {

overflow: hidden

}



IE ne le sait pas, et a besoin qu'on lui fasse faire la même chose avec ses propres moyens. Dans une CSS en commentaires conditionnels (CF fAQ DU FORUM, rétablir l'overflow:visible et utiliser l'une des propriétés conférant le haslayout au conteneur. Par exemple:

#contenu {

overflow: visible;

height: 1%;

}



Sinon, il reste la bonne vieille solution du clear en fin de contenu. Cf article openweb sur les flottants.

Modifié par ghost (23 Jul 2006 - 16:57)

Bonjour Ghost,

Une parenthèse très rapide dans le sujet de Radical Edward :

ghost a écrit :
Pour le bloc suivant la taille du contenu, j'utise nin-height mais il existe d'autres méthodes entre autre overflow; hidden que je n'ai pas encore testé mais qui semblerait plus conforme.

Ce n'est pas une question de "conformité", mais de rôle:
- min-height permet de forcer un conteneur à s'étendre verticalement au moins jusqu'à une valeur arbitrairement fixée, quelque-soit son contenu.
- overflow permet à un conteneur de s'étendre en hauteur de manière à "englober" ses éléments descendants flottants.

Laurent Denis a écrit :
- overflow permet à un conteneur de s'étendre en hauteur de manière à "englober" ses éléments descendants flottants.

Merci grâce à cela mon warper suit la hauteur du contenu le plus haut.
Autre chose, est-il possible de faire que les div contenus dans un même bloc soit liés par la taille ?

Exemple:
Le divcontenu contient 3 div, div1, div2 et div3. Div3 du fait de son contenu s'aggrandit d'une hauteur de 1000px, et div1 et div2 s'aggrandissent aussi de 1000px car ils sont liés.
Ou alors lier div1 et div2 à la hauteur de divcontenu, qui lui sera en overflow:hidden pour suivre la hauteur de div3.

Merci par avance.

Pour Ghost: Merci beaucoup pour ce que tu m'as fourni, mais ça ne peut pas s'adapter à mon design actuel du fait de l'image de fond.

Bonjour,

Biensur que les images de fond s'adaptent pour chaque div, la manière de procéder est différente si tes div de la colonne de gauche sont de hauteur fixe ou pas.

Fixe, il suffit de mettre tes images en background
Ajustable: adapter la technique des "portes coulissantes" en utilisant les propriétés de background-position http://www.ultra-fluide.com/ressources/css/menu-onglets.htm[/url]

Pour la colonne de droite c'est plus simple: background; ton image no-repeat avec en background-color la couleur de fond de ton image qui sera "visible" quand ton div sera plus haut que la hauteur de ton image.

De toute manière pour rendre adaptable en hauteur un désign à base d'image tu n'y couperas pas sinon il faut se limiter aux propriétés border et background-color des blocs.

(@)Laurent Denis
J'avais bien compris la nuance mais je me suis mal exprimé et justement pour éviter de rendre un peu flou ce que je n'ai pas encore essayé, je me suis permis d'y rajouter votre post, en tout cas merci de partager vos connaissances.