[CSS] Aligner horizontalement des blocs

marsien

Grand Maître
Salut à tous,

Je m'excuse d'avance de ma nullité, je débute dans la création de feuilles de style :)

Voilà mon souci : je voudrais aligner 3 blocs horizontalement à l'intérieur d'un autre bloc. Et je n'y arrive pas, le troisième se situant irrémédiablement en dessous des 2 autres...

Je vous donne le code html et celui de la css.

html :

[cpp]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
<head>
<meta content="text/html; charset=ISO-8859-15" http-equiv="content-type" />
<title>essai</title>
<link href="essai.css" rel="stylesheet" type="text/css" />
</head>
<body style="direction: ltr;">
<div id="header"></div>
<div id="menu">
<div class="submenu">
<h3><a href="index.html">Accueil</a></h3>
</div>
<div class="submenu">
<h3>Formation</h3>
<ul>
<li><a href="dea.html">DEA</a></li>
<li><a href="these.html">Doctorat</a></li>
<li><a href="postdoc.html">Post-Doc</a></li>
</ul>
</div>
<div class="submenu">
<h3><a href="cv.html">CV</a></h3>
</div>
<div class="submenu">
<h3>Outils</h3>
<ul>
<li><a href="oligo.html">OligoCalc</a></li>
<li><a href="tabper.html">Tableau p&eacute;riodique</a></li>
<li><a href="tuto_01.html">Emulation Mac</a></li>
<li><a href="de.html">T&eacute;l&eacute;chargement</a>
<ul>
<li><a href="dl1.html">Logiciels bio</a></li>
<li><a href="de2.html">Logiciels libres</a></li>
<li><a href="dl3.html">Emulation Mac</a></li>
<li><a href="dl4.html">Documents personnels</a></li>
</ul>
</li>
<li><a href="links.html">Liens</a>
<ul>
<li><a href="links1.html">ADN</a></li>
<li><a href="links2.html">Prot&eacute;ines</a></li>
<li><a href="links3.html">Logiciels libres</a></li>
<li><a href="links4.html">Divers</a></li>
</ul>
</li>
</ul>
</div>
<div class="submenu">
<h3><a href="mail.html">Contact</a></h3>
</div>
<div class="submenu">
<h3><a href="index_en.html">Anglais</a></h3>
</div>
</div>
<div id="body">
<h2>Bienvenue sur la page pro de Ludovic Champier<br>Docteur en Biochimie et Microbiologie</h2>
<div id="subbody1">
<h3>Mon parcours</h3>
<p>Premier &amp; second cycles universitaires &agrave; l'Universit&eacute; Claude Bernard, Lyon 1</p>
<p>DEA National de Toxicolgie &agrave; l'Universit&eacute; Ren&eacute; Descartes, Paris 5 et au CEA Grenoble</p>
<p>Th&egrave;se au Laboratoire de Chimie et Biochimie du CEA Grenoble</p>
<p>Post-doc au Laboratoire d'Ecologie Microbienne de l'Universit&eacute; Claude
Bernard, Lyon 1</p>
</div>
<div id="subbody2">
<h3>Actualit&eacute;</h3>
<p>Les 6, 7 et 8 d&eacute;cembre se tiendra &agrave; Paris, France, le s&eacute;minaire annuel du Programme National de ToxicologieNucl&eacute;aire. Mes travaux sur les bTPMT effectu&eacute;s pour ce programme seront pr&eacute;sent&eacute;s sur un poster.</p>
</div>
<div id="subbody3">
<h3>Ev&eacute;nements</h3>
<p>D&eacute;cembre 2005 : s&eacute;minaire annuel du Programme National de Toxicologie Nucl&eacute;aire, Paris, France - Poster</p>
<p>Juin 2005 : congr&egrave;s BAGECO, Villeurbanne, France - Poster</p>
<p>Mai 2005 : congr&egrave;s d'Ecologie Microbienne, Aubernai, France - Communication orale</p>
<p>2005-2006 : participation au Programme National de Toxicologie Nucl&eacute;aire
Environnementale, groupe Toxicit&eacute; du S&eacute;l&eacute;nium</p>
</div>
</div>
<div id="footer">
<a href="http://www.nvu.com"><img alt="Document made with Nvu" src="http://www.nvu.com/images/madewithNvu80x15clear.png" border="0" /></a>
&nbsp;Derni&egrave;re mise &agrave; jour : t&ocirc;t ou tard...&nbsp;
<img src="http://perso0.free.fr/cgi-bin/wwwcount.cgi?df=lchampier.dat&amp;ft=0&amp;dd=B" />
</div>
</body>
</html>
[/cpp]

css :
[cpp]body
{
width: 900px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: #BFFFC9;
}

#header
{
width: 714px;
height: 58px;
background-image: url("img_top.png");
background-repeat: no-repeat;
margin: auto;
margin-bottom: 10px;
}

#menu
{
float: left;
width: 140px;
}

.submenu
{
background-color: #99FF99;
border: 1px dashed #1B871B;
margin-bottom: 10px;
}

.submenu h3
{
color: #666666;
font-family: verdana, arial, serif;
text-align: center;
font-size: 14px;
}

.submenu ul
{
list-style: none;
padding: 5px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 12px;
font-weight: bold;
}

.submenu li ul
{
list-style: none;
padding: 0px;
margin: 0px;
margin-bottom: 5px;
font-family: verdana, arial, serif;
font-size: 10px;
font-weight: normal;
font-style: italic;
}

.submenu a
{
text-align: left;
text-decoration: none;
color: #666666;
}

.submenu a:hover
{
background-color: #FFFF99;
color: #3366FF;
display: block;
width: 130px;
}

#body
{
margin-left: 150px;
margin-bottom: 20px;
padding: 10px;
padding-top: 20px;
color: #000000;
border: 1px dashed #1B871B;
background-color: #E6FFEF;
}

#body h2
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #FFCCFF;
width: 350px;
border: 1px solid #FF6CF0;
text-align: center;
padding: 10px;
margin: auto;
}

#subbody1
{
float: left;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}

#subbody2
{
margin-left: 200px;
width: 300px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}

#subbody3
{
margin-left: 535px;
width: 170px;
margin-top: 20px;
padding : 10px;
font-family: verdana, arial, serif;
font-size: 12px;
color: #000000;
background-color: #FFFFFF;
border : 1px solid #000000;
}

#footer
{
font-family: verdana, arial, serif;
font-size: 12px;
color: #666666;
background-color: #E6FFEF;
border: 1px dashed #1B871B;
text-align: center;
padding: 5px;
}
[/cpp]

Merci d'avance de l'éclairageprécieux que vous pourrez m'apporter :merci:

edit : un lien pour voir ce que donne ma page actuellement =>
 

Johan_et_Pirlouit

Grand Maître
Un grand classique, tu verras à l'usage :D...

Effectivement, d'après la règle des flux HTML, ton bloc subbody1 est quasi-hors du flux puisque placé en 'float: left' (équivaut presque à un placement en 'position: absolute'), alors que tes deux autres blocs subbody2 et subbody3 restent dans le flux (sous-entendu 'position: relative')..

Il se passe que subbody2 et subbody3 n'ont pas de définition de disposition et ont donc par défaut le 'display: block', ce qui met à la ligne le bloc suivant.. Tu peux essayer de les mettre "en ligne" par un 'display: inline'.. Valable aussi pour ton subbody1..

Autre méthode : placer chaque bloc en 'float: left' avec des marges latérales.. Il te faudra peut-être un espace insécable dans le code HTML juste à la suite de tes trois blocs, codé '&nbsp;' en HTML, pour "tenir" l'ensemble....

Attention toutefois avec le positionnement absolu ('position: absolute') : le bloc ainsi placé sort totalement du flux et son agrandissement ne provoquera pas l'agrandissement de son bloc conteneur (celui dans lequel il est), à la différence d'un bloc en 'float: machin'..

Autre chose : évite tout nommage de bloc ou autre élément avec des noms trop proches ou identiques à des mots réservés tels que 'html', 'body' et j'en passe.. C'est un coup à se mélanger les pinceaux et les navigateurs avec..

Pour le reste, veille à bien tester ton site avec différentes familles de navigateurs.. J'entends par là des navigateurs qui n'ont pas le même moteur.. Sur Windows, trois principaux : IE, Firefox et Opera.. Sur Linux avec KDE : Konqueror et son dérivé (plus évolué) sur Mac : Safari.. Si sur Mac tu fais un essai avec Firefox et avec Camino, c'est inutile : ils ont le même moteur de rendu : Gecko.... K-meleon sur Windows aussi utilise Gecko.. Je ne parle pas de Netscape qui depuis la v6 tourne aussi avec Gecko et s'est même "offert le luxe" depuis la v8 de tourner avec 2 moteurs : Gecko et Trident (IE).. Sur Mac, tu peux aussi t'amuser avec IE...... C'est parfois tordant de rire :D.. Il n'est plus développé par MS depuis 2003 (de mémoire) et reste en version 5.2, désormais totalement obsolète.. Par contre, ce n'était pas du tout le même moteur que IE sur Windows : Trident pour IE Win et Tasman pour IE Mac.. Quelques différences notables dans les respects ou pas des normes CSS..

Concernant le HTML choisi : fais l'effort de tout faire en XHTML 1.0 Strict et pas Transitional comme tu le fais et comme nous l'imposent nombre de logiciels de création Web (Nvu dans ton cas, manifestement).. C'est un excellent pas vers le futur.. La norme XHTML 1.1 actuellement en évolution a purement et simplement banni toutes les balises et paramètres déjà dépréciés dans le XHTML 1.0.. Toi qui commences, prends dors et déjà de bonnes habitudes ;)... Ca t'évitera de devoir reprogrammer plus tard (perso, je peux t'en parler : je suis en train de passer mon site de HTML 4.01 avec Frameset à XHTML 1.0 Strict et par la même occasion j'en profite pour lui faire une "toilette" avec une nouvelle maquette, en plus de basculer sur un moteur PHP et peut-être avec base MySQL).. Par exemple : je vois que ta balise <body> contient un descripteur de style : c'est dans la CSS que tu définis le style de <body> ('body { blablabla; }'), comme tout le reste (<html> aussi, au besoin)..

Tu verras que tu seras parfois obligé d'intervenir directement "à la main" dans le code, pour des cas particuliers pour lesquels ton logiciel de création ne pourra rien..

Déclaration XHTML 1.0 Strict :
[cpp]<!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" lang="fr">[/cpp]
Pour le reste, un topic qui t'aidera déjà bien >> que, je pense, tu as certainement déjà fureté ;)...

Bienvenu chez les codeurs fous :hello:..

EDIT : j'aime bien : "Dernière mise à jour : tôt ou tard..." :D.. Ca, au moins, c'est précis :lol:..

:merci:
 

marsien

Grand Maître
Je te remercie pour toutes ces infos et tous ces conseils. :)

Tout d'abord, j'ai suivi tes conseils en renommant mes éléments aux noms équivoques. C'est encore une preuve de mon débutantisme :D

Je teste déjà mes sites sur 3 navigateurs "Windows" (IE, Firefox et Opera), 2 navigateurs "Linux" (Konqueror et Firefox) et un navigateur Mac (dans la mesure du possible ; Safari). Si seulement IE n'existait pas...

J'ai été très intéressé par ta remarque sur le choix du codage ; en fait, pour moi, tout cela reste très abstrait, et je ne vois pas la différence entre "strict" et transitional" ? Peux-tu m'expliquer les différences entre ces 2 versions du langage ? Et comment savoir ce qui est autorisé dans chaque langage (html, xhtml), leurs différentes versions et leur type (transitional ou strict) ? Faut-il apprendre et connaitre toutes les balises autorisées et celles devenues interdites dans le langage que l'on utilise ? Car pour moi, mettre un "strict" à la place d'un "transitional" ne me dit rien sur ce que je dois mettre dans mon code, et je risque de mentir par méconnaissance sur ce que j'affiche comme langage utilisé par rapport à ce qu'il y aura dans mon code...

Par ailleurs, je me suis bien aperçu des limites des soft "éditeurs html", notamment lorsque l'on manipule des css, javascript et autre... Depuis, je suis passé sur un éditeur de texte à reconnaissance syntaxique. C'est plus efficace, et m'oblige à faire du code "propre". Mais c'est dur, car j'ai du mal à connaitre toutes les balises dont j'ai besoin et les propiétés que je peux leur appliquer. Mais je m'accroche, et les défis, ça me plait :)

Seulement, voilà, je n'ai toujours pas résolu mon problème d'alignement des mes 3 blocs... J'ai essayé de suivre tes conseils, mais je ne suis pas arrivé au résultat que je désirais.
- Si je mets un "float: left" à chacun mes 3 blocs "submain", il sont sortis du flux et mon bloc de fond perd tout son intérêt. Et j'y tiens un peu, peut-être à tord, mais c'est mon choix :D ; au moins d'un point de vue théorique pour arriver à résoudre ce problème ;) Ex : Comme tu peux le voir, ça fout aussi le bordel dans mon pied de page...
- Si je mets "bloc: inline" à chacun de mes 3 "submain", je n'ai plus de bloc du tout, le texte entre les balises définissant chacun des "submain" reste hors de chaque bloc, les blocs apparaissent seulement sous la forme de 2 petits rectangles, un avant le texte et l'autre après... Ex :
- les espaces insécables dans le code html entre les balises des "submain" n'améliorent pas les choses...

J'ai essayé de voir sur google si une réponse à ma question existait, mais soit je ne l'ai pas trouvée, soit je ne l'ai pas comprise, mais rien de ce que j'ai essayé n'a marché... Par ailleurs je connaissais les liens que tu m'as donné ; le xhtml/css, j'en ai appris les bases (plus ça va, plus j'en doute :) )sur le "site du Zéro", et je me suis inspiré de "alsa création" pour plusieurs mises en page. :merci:

Si tu as la moindre piste pour m'aider, j'avoue ne plus savoir quoi faire avec mes compétences pour le moins limitées... Merci

:merci:
 

Johan_et_Pirlouit

Grand Maître
Cette nuit, je n'avançais pas avec mon site.... Il y a des jours comme ça... Alors je me suis penché sur ta question.. Instructif ;).. C'est bien pour ça que j'ai choisi de la travailler cette question..

Je ne mets pas le résultat directement dans le post, ça ferait un peu rallonge.. Cependant, tu peux récupérer le ZIP sur mon site >> .. Ce ZIP contient la page HTML et les deux CSS.. La principale CSS est ré-organisée et commentée, mais je te laisserai faire de même avec celle du menu : tu sais mieux que moi qui fait quoi dedans ;).. Tu compareras ce que j'ai fait avec ton travail et tu ne garderas que ce qui peut te servir, je suis encore un peu loin d'être parfait en prog Web :D.. Je n'ai testé que sur Win avec IE 5.5 & 6, FF 1.0 & 1.5 et Opera 8.5 (flemme de démarrer mon Linux cette nuit).. Au passage, mon site actuellement publié reste encore principalement HTML 4.01 avec Frameset.. La mouture XHTML est en cours de ré-écriture (1.0 Strict, mais en ayant déjà un petit oeil sur XHTML 1.1..), avec une maquette améliorée et un plus large emploi de PHP....

Petites précisions sur les CSS : préfère toujours les minuscules aux majuscules : c'est plus lisible.. Préfère aussi le plus souvent les formes courtes de déclaration de propriétés.. Exemple :[cpp]background-image: url(mon_image.png); background-position: left top; background-repeat: no-repeat;[/cpp]donnera simplement :[cpp]background: url(mon_image.png) left top no-repeat;[/cpp]
Autre subtilité : les déclarations de paramètres communs à plusieurs éléments :
[cpp]#bloc1 { position: absolute; left: 10px; top: 10px; }
#bloc2 { position: absolute; left: 10px; top: 70px; }
#bloc3 { position: absolute; left: 10px; top: 120px; }[/cpp]donnera :
[cpp]#bloc1, #bloc2, #bloc3 { position: absolute; left: 10px; }
#bloc1 { top: 10px; }
#bloc2 { top: 70px; }
#bloc3 { top: 120px; }[/cpp]Quand on a des paquets en commun, ça allège.. Mais c'est aussi un coup à se paumer dans on code ;)..

Sinon, il y a le principe d'héritage des propriétés : de bloc père en bloc fils, sauf nouvelle déclaration de propriétés..

Pour finir, je te laisse découvrir comment IE 5.x ne respecte pas les dimensions des "boîtes", avec sa gestion si particulières des padding, margin, border..... L'explication et la soluce ici >> .. Chez moi, j'ai conservé un IE 5.5 sur mon PC de travail (Win2k).. Tous les PCs Win2k et Win9x (et des NT4 qui tournent encore) ne sont pas forcément tous passés à IE 6.. Par contre, sur mon PC "à tout faire", c'est WinXP, donc IE 6..


Pour le côté XHTML :

HTML : Hyper-Text Markup Language
XHTML : eXtensible Hyper-Text Markup Language..

Le XHTML est l'évolution du HTML, arrivé à bout de souffle face aux besoins actuels.. Il reprend les principes du XML (eXtensible Markup Language) dont le principal : dissocier le contenu du contenant.. En clair : le contenu d'un côté (fichier html) et mise en page de l'autre (fichier css).. De plus, la syntaxe devient précise : toute balise ouverte doit avoir une fermeture.. Fermeture inclue dans les balises simples et balise de fermeture pour les balises doubles.. Exemple de balises simples : <img src="mon_image.png" alt="image" />, <br />.. Pour les doubles, c'est déjà mieux connu : <div>mon contenu</div>..

Des attributs sont devenus obligatoires : 'alt' (texte alternatif) dans les images, par exemple.. Cependant, il peut être vide : ' alt="" '.. Attention à IE : si 'alt' n'est pas vide et que l'attribut 'title' (titre de l'image) n'est pas présent, il prendra le contenu de 'alt' et l'affichera comme info-bulle au survol de l'image par la souris.. Pour éviter cet effet non désiré, il suffit d'ajouter un ' title="" ' dans les attributs d'image.. Si tu veux une info-bulle au survol, 'title' est précisément là pour ça.. Par contre, abandonne le 'border'.. Préfère la déclaration CSS 'img { border: none; }'.. De la même manière, 'width' et 'height' peuvent céder leur place par la CSS, en attribuant un id ou des class à ton image..

Exemple :
[cpp]<img class="photo" id="chateau" src="photo_de_mon_palais.jpg" title="c'est chez moi" alt="photo de mon palais" />[/cpp]
Autre chose : dans les descripteurs d'objets, les classes sont cumulatives :
[cpp]<div class="rectangle rouge centre" id="avertissement">texte</div>[/cpp]

Différence entre Transitional et Strict : l'acceptation ou non des balises et attributs dépréciés ou obsolètes.. Le mode Transitional n'est utilisé que pour faciliter la migration d'un site d'une version du langage à une plus récente.. Toi qui débute : passe directement au Strict ;).. Exemples de balises dépriéciées : <i> (italique) et <b> (caractères gras).. Désormais remplacées par <em> (emphase) et <strong>, plus compatibles avec des navigateurs utilisant un autre artifice d'affichage que l'italique et le gras : les navigateurs en mode texte (Lynx sur Linux, par exemple..) ou les navigateurs audios..

Pour info, le XHTML 1.1 a purement banni toutes les balises et les attributs obsolètes.. Leur support s'arrêtera donc avec le XHTML 1.0 Transitional.. Par contre, je n'ai pas encore bien trouvé d'article clair sur les balises abandonnées.. Mais les recommendations XHTML 1.1 du W3C listent celles conservées et idem pour les attributs >> ..

Tu trouveras plus d'infos sur les quelques sites que j'ai ajouté au TU de Kangol >> ..

Voili..

:merci:
 

marsien

Grand Maître
Salut mon maitre à penser du xhtml/css :)

Avant toute chose, j'ai été jeter un oeil à ton magnifique site. Outre le fait que tu sois un bon codeur, tu as aussi une chose de plus que je n'ai pas forcément : un certain talent artisitque ! Franchement il est super ton site, et je vais y retourner, car je suis loin d'en avoir fait le tour ! :love:

Je viens de regarder ce que tu m'avais concocté, et ben franchement, tu es génial ! C'est exactement ce que je voulais faire, et avec tous tes commentaires, c'est limpide. Apprendre et comprendre, les 2 mamelles de la réussite [:amphipolis:1] :)

Je te remercie à nouveau pour tous tes précieux conseils ; il ne me reste plus maintenant qu'à trouver le temps de tout lire, tout assimiler et tout retrancrire correctement pour aboutir à un site potable, sinon plus ! Et je n'ose même pas penser au php, ni à l'intérêt évidemment que celà pourrait avoir dans certaines de mes pages. Ca va me faire encore un autre truc à ingurgiter de travers [:bap2703] On va dire que ce sera la V3 de mon site, la V2 devant se contenter du couple magique xhtml/css [:matthiews]

Encore un grand merci de t'être penché sur mon petit problème et d'y avoir apporter une réponse parfaite.

A+, en espérant avoir un jour la possibilité de te renvoyer l'ascenseur dans quelque domaine que ce soit
...
A moins que ce ne soit pour t'exposer un nouveau problème auquel je ne saurais faire face :D
 

Johan_et_Pirlouit

Grand Maître
Petit "oubli" :ange: :

Dans la CSS principale que j'ai commentée, j'ai oublié de préciser pourquoi je ne passe pas par les tailles de polices fixes en pixels (px) ou en points (pt).. J'ai fini par apprendre (vieux motard que jamais :o) qu'il est préférable de laisser des tailles variables pour mieux adapter son site aux mal-voyants qui, par exemple, paramètrent leur navigateur pour afficher des polices plus grandes.. Lorsqu'on détermine des tailles fixes, FF permet toujours d'augmenter ou réduire les tailles à l'affichage [CTRL]-[+], [CTRL]-[-] et [CTRL]-[0] pour revenir à la taille "normale", mais IE (par exemple) ne le permet pas..

On trouve les raisons et les solutions un peu partout sur la Toile, mais voici l'article qui m'avait servi (en français et bien expliqué) >>

:merci:
 

Johan_et_Pirlouit

Grand Maître
faut spécifier les tailles en em pour ca :o
Oups... Dans mon envolée, j'en ai oublié un bout pour celles et ceux qui ne sont pas dans les "secrets des dieux" de ce topic :ange:..

Les tailles variables sont surtout définies par des valeurs fixées par les recommendations W3C : ces valeurs vont de xx-small à xx-large.. La valeur par défaut est medium, équivalente à une taille de 12 points (pas pixels..)..

Les autres tailles variables sont fonction des valeurs de tailles définies par défaut et sont exprimées soit en % soit en variation de la hauteur de ligne par défaut (em).. Pour les mesures en % (em aussi, peut-être, je n'ai pas encore été vérifier), il faut faire attention au fait que le % s'applique à la taille définie pour l'objet conteneur et les % se cumulent de conteneur en sous-conteneur (héritage des propriétés d'objet père en objet fils).. Pour plus de précisions sur ce sujet et d'autres mesures de tailles de polices je renvoie aux recommendations CSS du W3C (entre autres), dont le lien est dans le TU ..

Parmi les utilisations de ces polices variables, on trouve aussi l'impression sur papier dont la résolution en nombre de pixels par pouce n'est pas du tout égal à celle de l'écran.. En moyenne 300 dpi réels pour les imprimantes, entre 72 dpi pour les affichages sur Mac et 96 dpi pour les affichages sur PC.. Une police définie en mesure fixe (pixels 'px' ou points 'pt') sera donc affichée différemment selon le média de sortie : de "normale" sur PC, elle sera affichée plus grande sur Mac et risque d'être fort petite sur papier..
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 098
Messages
6 717 055
Membres
1 586 282
Dernier membre
Yannick3553
Partager cette page
Haut