https://fr.wiki.insitu.education//api.php?action=feedcontributions&feedformat=atom&user=Marion
WikInSituFr - Contributions [fr]
2026-04-28T15:54:29Z
Contributions
MediaWiki 1.38.4
https://fr.wiki.insitu.education//index.php?title=Liste_et_tarif_des_catalogues&diff=9186
Liste et tarif des catalogues
2026-01-08T13:01:20Z
<p>Marion : </p>
<hr />
<div><div id="top"></div><br />
<table width="100%"><br />
<tr><br />
<td><br />
<h1 class="title_page no_print">Liste et tarifs des catalogues</h1><br />
<br />
<!-- contenu --><br />
<br />
<div class="one_page"><br />
<br />
<div class="flex mb-20" style="position:relative;overflow:hidden;padding:0.5rem 0.5rem 1rem 1rem;min-height:15rem;"><br />
<div style="position:absolute;z-index:1;top:30%;left:50%;transform:translate(-50%,-50%);width:100%;" class="img-full">[[Image:Image_list_cat.jpg|link=]]</div><br />
<div class="w-full" style="z-index:2;"><br />
<div class="img-full" style="max-width:100px;margin-left:auto;">[[Image:Logo InSitu.png|link=]]</div><br />
<div class="w-full flex x_center y_center wrap" style="position:absolute;top:0;left:0;height:100%;"><br />
<div class="txt-center" style="background-color:rgba(255,255,255,0.8);padding:1rem;border-radius:20px;"><br />
<p class="important">+ de 150 références de fabricants</p><br />
<p class="big bold txt-center">Tarif 2026</p><br />
<div class="flex"><br />
<div class="big bold txt-center" style="padding:10px"><br />
<p>Paiement mensuel :<br><br />
32,00 € HT / mois</p><br />
</div><br />
<div class="big bold txt-center" style="padding:10px"><br />
<p>Paiement comptant :<br><br />
29,90 € HT / mois</p><br />
</div><br />
</div><br />
<p class="big bold txt-center">Prix indiqué par catalogue et par point de vente</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
<p class="txt-center"><span class="info chiffre">i</span><i>L'attribution des catalogues est soumise à l'accord des fabricants et aux accords de votre réseau.</i></p><br />
<br />
<div class="flex wrap"><p class="encadre_alt_title">CATALOGUE PAYANT SELON LE TARIF EN VIGUEUR</p></div><br />
<br />
<div class="col-w-10 encadre_alt" style="margin-bottom:5px;"><br />
<p class="txt-is bold big">CUISINE</p><br />
<ul><br />
<li>ALVIC CENTER</li><br />
<li>ARAN MODERN</li><br />
<li>AR DUE</li><br />
<li>AR DUE EASY</li><br />
<li>ARMONY</li><br />
<li>ARREDO3</li><br />
<li>ARREX</li><br />
<li>ARTEGO</li><br />
<li>AXIS CUCINE</li><br />
<li>BALLERINA</li><br />
<li>BAUFORMAT CUBE</li><br />
<li>BECKERMANN</li><br />
<li>BRIGITTE KÜCHEN</li><br />
<li>BURGER</li><br />
<li>CHABERT DUVAL</li><br />
<li>CHARLES REMA</li><br />
<li>CONCRETA</li><br />
<li>CUISINES MOREL</li><br />
<li>CUISINHOME</li><br />
<li>CUISINHOME KIT</li><br />
<li>DELTA COCINAS</li><br />
<li>DISCAC</li><br />
<li>FARO BY ALVIC</li><br />
<li>GEDIMAT</li><br />
<li>GM CUCINE</li><br />
<li>GODIN</li><br />
<li>HÄCKER CONCEPT</li><br />
<li>HÄCKER SYSTEMAT</li><br />
<li>HOFEMEIER</li><br />
<li>IMPULS</li><br />
<li>INOVA</li><br />
<li>INSTINCT</li><br />
<li>LOGISIETE</li><br />
<li>MOBILTURI</li><br />
<li>NOBILIA</li><br />
<li>NOBLESSA</li><br />
<li>NOLTE</li><br />
<li>NOLTE ECO</li><br />
<li>NOLTE EXPRESS</li><br />
<li>NOVACUCINA</li><br />
<li>OB COCINAS</li><br />
<li>PHILIPPE</li><br />
<li>PINO</li><br />
<li>PRONTO</li><br />
<li>PYRAM</li><br />
<li>ROTPUNKT</li><br />
<li>SACHSEN KÜCHEN</li><br />
<li>SAGNE</li><br />
<li>SCHRÖDER S126</li><br />
<li>SCHRÖDER S140</li><br />
<li>SCHÜLLER</li><br />
<li>SCHÜLLER NEXT</li><br />
<li>SELECT</li><br />
<li>STORI CONTRACT</li><br />
<li>STORI CUISINE</li><br />
<li>STOSA</li><br />
<li>STUDIO DESIGN</li><br />
<li>TEISSEIRE</li><br />
<li>TLK</li><br />
<li>YOU</li><br />
<li>YOU Kit</li><br />
<li>ZELIG</li><br />
</ul><br />
<br />
<p class="txt-is bold big">ACCESSOIRES</p><br />
<ul><br />
<li>YOU Tables & chaises (3D)</li></ul><br />
<br />
<p class="txt-is bold big">SDB</p><br />
<ul><br />
<li>BADEA</li><br />
<li>CEDAM</li><br />
<li>CHARLES REMA</li><br />
<li>CUISINHOME</li><br />
<li>DISCAC</li><br />
<li>EKIMOB</li><br />
<li>FARO</li><br />
<li>MOREL SDB</li><br />
<li>STORI BAIN</li><br />
<li>YOU</li><br />
</ul><br />
<br />
<p class="txt-is bold big">RANGEMENT</p><br />
<ul><br />
<li>AMBIANCE DRESSING</li><br />
<li>ARASANZ</li><br />
<li>MOREL RANGEMENT</li><br />
<li>EKIMOB</li><br />
<li>IN-IPSO</li><br />
<li>PORTÉA</li><br />
<li>PROSTYL</li><br />
<li>SOPAM</li><br />
</ul><br />
<br />
<p class="txt-is bold big">PLAN</p><br />
<ul><li>BELGRANI</li><br />
<li>JETSTONE</li><br />
<li>LECHNER</li><br />
</ul><br />
</div><br />
<br />
<div class="flex wrap"><p class="encadre_alt_title">CATALOGUE GRATUIT</p></div><br />
<br />
<div class="encadre_alt col-w-10" style="margin-bottom:5px;"><br />
<p class="txt-is bold big">CUISINE</p><br />
<ul><br />
<li>ACTUA</li><br />
<li>ATLANTIC INOX</li><br />
<li>BATIMAN</li> <br />
<li>CESAR</li><br />
<li>CUISINES D’ETE BY ACS</li><br />
<li>DOIMO CUCINE</li><br />
<li>LINÉAPRO</li><br />
<li>PLEBANI</li><br />
</ul><br />
<br />
<p class="txt-is bold big">ACCESSOIRES</p><br />
<ul><br />
<li>ADRIA ART (3D)</li><br />
<li>AMR CONCEPT</li><br />
<li>APPROSINE (chiffrage)</li><br />
<li>BLANCO (3D)</li><br />
<li>BRADANO (3D)</li><br />
<li>CASASEDIA (3D)</li><br />
<li>CRÉALIGNE (3D)</li><br />
<li>FRANKE (3D)</li><br />
<li>GROHE (chiffrage)</li><br />
<li>INTERBAT (chiffrage)</li><br />
<li>IPUM (3D)</li><br />
<li>KALICERAM (3D)</li><br />
<li>KUIZI (3D)</li><br />
<li>KVR DISTRIBUTION (chiffrage)</li><br />
<li>LEGRAND (accessoires PT)</li><br />
<li>LUISINA (chiffrage)</li><br />
<li>MAUSSI (3D)</li><br />
<li>MSA (3D)</li><br />
<li>PIXPANO (3D)</li><br />
<li>PLANET OUTDOOR (3D)</li><br />
<li>PXI (chiffrage)</li><br />
<li>SAMAC (chiffrage)</li><br />
<li>SCHUTTE (chiffrage)</li><br />
<li>SINAHIA (3D)</li><br />
<li>VULLOW & FACTO </li><br />
</ul><br />
<br />
<p class="txt-is bold big">SDB</p><br />
<ul><br />
<li>AZZURRA</li><br />
<li>BAXAR</li><br />
</ul><br />
<br />
<p class="txt-is bold big">PLAN</p><br />
<ul><br />
<li>ACS</li><br />
<li>CERESER</li><br />
<li>CONSENTINO</li><br />
<li>FIDELEM</li><br />
<li>FLIP DESIGN</li><br />
<li>GRANICO</li><br />
<li>INTEGRA</li><br />
<li>LAISNÉ</li><br />
<li>LAMINAM</li><br />
<li>LEVANTINA</li><br />
<li>LUISINA</li><br />
<li>OUEST POSTFORMING</li><br />
<li>PIERREDEPLAN</li><br />
<li>SIMPLYCERAM</li><br />
<li>SOFEMA</li><br />
<li>STRATAGEM</li><br />
<li>TOPSTAR</li><br />
</ul><br />
<br />
<p class="txt-is bold big">SITES INTEGRES</p><br />
<ul><br />
<li>AGENSIA</li><br />
<li>DER KREIS</li><br />
<li>GPDIS</li><br />
<li>SISCA</li><br />
</ul><br />
</div><br />
<br />
<div class="flex wrap" style="justify-content:space-between;"><p class="encadre_alt_title">ELECTROMENAGER</p><p class="bold">Chiffrage gratuit, 3D payante sauf catalogues<sup class="txt-is"> gratuit</sup></p></div><br />
<br />
<div class="encadre_alt col-w-10 mb-20"><br />
<ul><br />
<li>AEG</li><br />
<li>AIRLUX</li><br />
<li>AMICA</li><br />
<li>ASKO</li><br />
<li>AVINTAGE</li><br />
<li>BEKO</li><br />
<li>BORA</li><br />
<li>BOSCH</li><br />
<li>BRANDT</li><br />
<li>CANDY</li><br />
<li>DE DIETRICH</li><br />
<li>DELONGHI</li><br />
<li>ELECTROLUX</li><br />
<li>ELICA<sup class="txt-is"> gratuit</sup></li><br />
<li>ESISTYLE</li><br />
<li>FABER</li><br />
<li>FALMEC</li><br />
<li>FAURE</li><br />
<li>FRANKE<sup class="txt-is"> gratuit</sup></li><br />
<li>GAGGENAU</li><br />
<li>GENERAL ELECTRIC</li><br />
<li>GLEM</li><br />
<li>GORENJE</li><br />
<li>GRUNDIG</li><br />
<li>HOTPOINT</li><br />
<li>INDESIT</li><br />
<li>KITCHENAID</li><br />
<li>KUPPERSBUSCH</li><br />
<li>LE CHAI</li><br />
<li>LEISURE</li><br />
<li>LIEBHERR</li><br />
<li>MIELE</li><br />
<li>NEFF</li><br />
<li>NOVY</li><br />
<li>PANDO</li><br />
<li>ROBLIN</li><br />
<li>ROSIÈRES</li><br />
<li>SAMSUNG</li><br />
<li>SAUTER</li><br />
<li>SCHNEIDER</li><br />
<li>SIEMENS</li><br />
<li>SMEG</li><br />
<li>TEKA</li><br />
<li>URBAN CUISINE<sup class="txt-is"> gratuit</sup></li><br />
<li>VINOBOX</li><br />
<li>VIVA</li><br />
<li>V-ZUG</li><br />
<li>WHIRLPOOL</li><br />
</ul><br />
</div><br />
<br />
<p class="print_only txt-center">Demandez votre catalogue auprés de notre service commercial : commercial@transtechnology.fr</p><br />
<p class="txt-center print_only">Transtechnology • S.A.S. au capital de 200 000 € • SIREN 400 220 687 • RCS Versailles • APE 4651Z 12, Avenue des Prés • 78180 MONTIGNY-LE BRETONNEUX • Tél. : +33&nbsp;(0)1&nbsp;47&nbsp;41&nbsp;89&nbsp;90 • www.transtechnology.fr • commercial@transtechnology.fr • À jour du {{LOCALDAY}}/{{LOCALMONTH}}/{{LOCALYEAR}} {{LOCALTIME}}</p><br />
<br />
</div><br />
<br />
</td><br />
<br />
<td valign="top"><br />
<br />
{{:Menu_Installer}}<br />
<br />
</td><br />
</tr><br />
</table><br />
<br />
<span class="btnretour">[[#top|Retour haut de page]]</span>&nbsp; <span class="btnhome">[[Installer le logiciel InSitu|Etape suivante]]</span></div>
Marion
https://fr.wiki.insitu.education//index.php?title=Der_Kreis_Passage_de_Commande&diff=9048
Der Kreis Passage de Commande
2025-07-03T08:49:11Z
<p>Marion : </p>
<hr />
<div><div id="top"></div><br />
<table width="100%"><br />
<tr><br />
<td width="95%"><br />
<!-- contenu --><br />
<h1 class="title_page">Passage de Commande EDI DER KREIS</h1><br />
<br />
<br />
===Qu'est-ce que l’Extension DER KREIS pour InSitu ?===<br />
<br />
L’extension DER KREIS est une solution innovante conçue pour vous faciliter la vie ! Il permet une gestion simplifiée des commandes directement depuis votre logiciel de conception InSitu, offrant ainsi une expérience plus fluide et efficace.<br />
<br />
===Fonctionnalités clés===<br />
<br />
====Processus de Commande Simplifié:====<br />
Grâce à l’extension DER KREIS, vous pouvez désormais passer vos commandes en quelques clics, éliminant ainsi les tracas liés aux processus de commande traditionnels.<br />
<br />
====Assuré un suivi des commandes passées:====<br />
Votre logiciel de dessin vous permet de suivre quelle commande vous avez envoyé et quand grâce à un système d’historisation de vos passages de commandes.<br />
<br />
====Intégration Transparente:====<br />
Le module est entièrement intégré à votre logiciel de conception InSitu, garantissant une compatibilité totale et une expérience utilisateur homogène.<br />
<br />
===Avantages===<br />
<br />
====Gain de Temps:====<br />
En utilisant l’extension DER KREIS, vous gagnez un temps précieux en évitant les processus de commande fastidieux, vous permettant de vous concentrer sur ce qui compte vraiment pour votre entreprise.<br />
<br />
====Simplicité:====<br />
Plus besoin de jongler avec des e-mails pour passer vos commandes. Notre module vous offre une solution simple et efficace, adaptée à vos besoins.<br />
<br />
====Fiabilité:====<br />
Avec notre module, vous pouvez avoir confiance en la transmission sûre et sécurisée de vos commandes, assurant ainsi la continuité de vos activités sans tracas ni soucis.<br />
<br />
<br />
===Conclusion===<br />
<br />
L’extension DER KREIS révolutionne la manière dont vous passez vos commandes, en vous offrant une solution moderne, pratique et efficace. Profitez dès maintenant de l'expérience client ultime, passer sa commande en quelques clics.<br />
<br />
<br />
<br />
=Comment configurer l’extension DER KREIS EANCOM ?=<br />
<br />
<br />
<div class="flex x_center y_center mt-20"><br />
<br />
<div><br />
[[Fichier:DerKreis01_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Ensuite, vérifier vos informations de site “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">Sites…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_center y_center"><br />
<br />
<p class="mr-20">Il est <span class="bold" style="color:red">impératif</span> d’avoir un <span class="bold">site</span> avec au <span class="bold">minimum</span> les informations d’ “<span class="txt-is bold">adresse</span>” avec un nom de “<span class="txt-is bold">société</span>” ainsi que les informations lié à l’ “<span class="txt-is bold">adresse de livraison</span>” par défaut (votre dépôt)</p><br />
<br />
<div><br />
[[Fichier:DerKreis02_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Vous avez désormais un <span class="bold">Site</span> avec les informations liés à votre magasin de renseigner, il ne reste plus qu’à renseigner vos informations <span class="bold">DER KREIS</span> et le passage de commande sera à vous !</p><br />
<br />
<br />
<div class="flex x_center y_center"><br />
<br />
<div><br />
[[Fichier:DerKreis03_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Dans “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">DER KREIS: Configure EANCOM…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<br />
<div><br />
<br />
===Inscrivez vos informations EDI :===<br />
<br />
Disponible dans sur votre compte <span class="bold">La Plateforme DER KREIS</span> (avec un compte administrateur de magasin) dans l’espace “<span class="txt-is bold">Mon Magasin</span>”<br />
<br />
Vous retrouverez votre “<span class="txt-is bold">N° Adhérent</span>” au sein du groupement DER KREIS ainsi que votre “<span class="txt-is bold">Mot de passe EDI</span>” (''affichez le mot de passe avant de copier-coller dans InSitu'')<br />
<br />
Une fois les informations saisies → <span class="txt-is bold">Valider</span><br />
<br />
</div><br />
<br />
<div class="ml-20"><br />
[[Fichier:DerKreis04_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Votre logiciel InSitu est désormais configurer pour l’envoi de commande EDI vers DER KREIS !</p><br />
<br />
<br />
<br />
==Les fonctionnalités==<br />
<br />
<br />
<div class="flex wrap x_center y_center mt-20"><br />
<br />
<div style="width:30%;" class="img-full"><br />
[[Fichier:DerKreis05_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
Toutes les fonctionnalités de l’extension DER KREIS se retrouve à cet endroit :<br />
<br />
“<span class="txt-is bold">Fichier</span>”->”<span class="txt-is bold">Commandes fournisseurs</span>”<br />
</div><br />
<br />
</div><br />
<br />
<br />
===Envoi Commande DER KREIS===<br />
<br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<div class="mr-20"><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#fef7c8;">La '<span class="bold">Contremarque</span>' envoyée à DER KREIS équivaut au <span class="bold">N° de devis</span> + <span class="bold">contremarque</span>.</p><br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#e9f2fe;>Tous les champs de texte encadrés en <span style="color:#e50707;" class="bold">rouge</span> sont <span style="color:#e50707;" class="bold">obligatoires</span>, tandis que les champs de texte encadrés en <span style="color:#12e400;" class="bold">vert</span> sont <span style="color:#12e400;" class="bold">facultatifs</span>.</p><br />
<br />
<br />
====Instructions détaillées sur le fonctionnement :====<br />
<br />
L'adresse de livraison sera '<span class="bold">L'Adresse Dépôt</span>' par défaut, visible sur votre espace magasin sur <span class="bold">La Plateforme DER KREIS</span> (au même endroit que vos identifiants EDI).<br />
<br />
Si vous souhaitez définir l'adresse de livraison sur une adresse spécifique, veuillez indiquer l’adresse complète dans ‘<span class="bold">Commentaire</span>'<br />
<br />
Le champs '<span class="bold">Commentaire</span>', vous laisse libre choix d'écrire un <span class="bold">commentaire</span> lié à votre commande afin d’informer le <span class="bold">fournisseur</span> ''et/ou'' <span class="bold">DER KREIS</span> sur des détails spécifiques.<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis06_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
En <span style="color:#ff77ff;" class="bold">rose</span> vous retrouvez une liste de tout vos articles provenant du catalogue <span class="bold">DER KREIS</span> <span style="text-decoration:underline;">uniquement</span>.<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#ffeceb;">Si un appareil <span class="bold">n’apparait pas</span> dans cette liste alors il ne sera pas commandé.</p><br />
<br />
Une petite coche est présente dans la colonne ‘<span class="bold">Commandé ?</span>’, elle vous permet de commander ou non la ligne d’article.<br />
<br />
(Ex: si vous avez du stock dans votre magasin / dépôt ; besoin de repasser une commande partiellement etc.)<br />
</div><br />
<br />
</div><br />
<br />
<br />
<div class="flex x_center y_center"><br />
<br />
<div class="mr-20"><br />
<br />
Lors de l’envoi de la commande, un PDF vous sera restitué.<br />
<br />
<br />
<div style="padding:20px;border-radius:20px;background-color:#fef7c8;"><br />
<br />
<span class="bold bold">ATTENTION :</span> Ce PDF ne constitue en aucun cas un justificatif officiel de commande.<br />
<br />
Il vous sert simplement a visualiser / archiver vos commandes<br />
<br />
</div><br />
<br />
<br />
Vous avez la possibilité de : <br />
<br />
- Enregistrer le PDF sur votre poste<br />
<br />
- Envoyer la commande<br />
<br />
- Tout annuler<br />
<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis07_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<br />
<div class="flex wrap x_evenly y_center"><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis08_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">Lors de l’envoi de la commande, une fenêtre s’ouvre vous permettant de suivre l’avancement de l’envoi de votre commande.</p><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis09_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">Si la commande a correctement été envoyé, alors vous retrouverez une coche verte, ainsi qu’un message vous rappelant le bon envoi de votre commande.</p><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis10_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">En revanche, si la commande n’a pu être transféré, vous retrouverez une croix rouge avec un message d’erreur.</p><br />
<br />
</div><br />
<br />
<br />
===Historique Commandes DER KREIS===<br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<br />
<div class="mr-20"><br />
<br />
L’historique de commande vous permet de visualiser vos envois de commande via l’extension DER KREIS.<br />
<br />
<br />
Les lignes <span style="color:#0078d7;" class="bold">BLEU</span> correspondent à un projet, en cliquant dessus, vous pouvez voir le détail des différents envoi et tentative d’envoi.<br />
<br />
<br />
En <span style="color:#90ee90;" class="bold">VERT</span> vous trouverez les envois qui ont abouti (avec la coche verte). Sinon la ligne reste blanche.<br />
<br />
<br />
En cliquant sur un envoi (vert ou blanc) vous verrez le détail des articles que vous avez transféré.<br />
<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis11_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
<br />
Vous avez la possibilité à droite, de filtrer sur une période : <br />
<br />
- Aujourd’hui<br />
<br />
- Semaine<br />
<br />
- Mois<br />
<br />
- Année<br />
<br />
- Tous<br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#fef7c8;">Attention, plus la plage de temps est grande plus le temps de chargement peut s’allonger.</p><br />
<br />
</div><br />
<br />
</div><br />
<br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Félicitations vous savez utiliser l’extension DER KREIS !</p><br />
<br />
<!-- fin contenu --><br />
<br />
</td><br />
<br />
<td valign="top" width="5%"><br />
<br />
<br />
</td><br />
</tr><br />
</table><br />
<br />
<span class="btnretour">[[#top|Retour haut de page]]</span>&nbsp; <span class="btnhome">[[Configurer InSitu en réseau|Etape suivante]]</span></div>
Marion
https://fr.wiki.insitu.education//index.php?title=Der_Kreis_Passage_de_Commande&diff=9047
Der Kreis Passage de Commande
2025-07-03T08:48:10Z
<p>Marion : </p>
<hr />
<div><div id="top"></div><br />
<table width="100%"><br />
<tr><br />
<td width="95%"><br />
<!-- contenu --><br />
<h1 class="title_page">Passage de Commande EDI DER KREIS</h1><br />
<br />
<br />
===Qu'est-ce que l’Extension DER KREIS pour InSitu ?===<br />
<br />
L’extension DER KREIS est une solution innovante conçue pour vous faciliter la vie ! Il permet une gestion simplifiée des commandes directement depuis votre logiciel de conception InSitu, offrant ainsi une expérience plus fluide et efficace.<br />
<br />
===Fonctionnalités clés===<br />
<br />
====Processus de Commande Simplifié:====<br />
Grâce à l’extension DER KREIS, vous pouvez désormais passer vos commandes en quelques clics, éliminant ainsi les tracas liés aux processus de commande traditionnels.<br />
<br />
====Assuré un suivi des commandes passées:====<br />
Votre logiciel de dessin vous permet de suivre quelle commande vous avez envoyé et quand grâce à un système d’historisation de vos passages de commandes.<br />
<br />
====Intégration Transparente:====<br />
Le module est entièrement intégré à votre logiciel de conception InSitu, garantissant une compatibilité totale et une expérience utilisateur homogène.<br />
<br />
===Avantages===<br />
<br />
====Gain de Temps:====<br />
En utilisant l’extension DER KREIS, vous gagnez un temps précieux en évitant les processus de commande fastidieux, vous permettant de vous concentrer sur ce qui compte vraiment pour votre entreprise.<br />
<br />
====Simplicité:====<br />
Plus besoin de jongler avec des e-mails pour passer vos commandes. Notre module vous offre une solution simple et efficace, adaptée à vos besoins.<br />
<br />
====Fiabilité:====<br />
Avec notre module, vous pouvez avoir confiance en la transmission sûre et sécurisée de vos commandes, assurant ainsi la continuité de vos activités sans tracas ni soucis.<br />
<br />
<br />
===Conclusion===<br />
<br />
L’extension DER KREIS révolutionne la manière dont vous passez vos commandes, en vous offrant une solution moderne, pratique et efficace. Profitez dès maintenant de l'expérience client ultime, passer sa commande en quelques clics.<br />
<br />
<br />
<br />
=Comment configurer l’extension DER KREIS EANCOM ?=<br />
<br />
<br />
<div class="flex x_center y_center mt-20"><br />
<br />
<div><br />
[[Fichier:DerKreis01_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Ensuite, vérifier vos informations de site “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">Sites…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_center y_center"><br />
<br />
<p class="mr-20">Il est <span class="bold" style="color:red">impératif</span> d’avoir un <span class="bold">site</span> avec au <span class="bold">minimum</span> les informations d’ “<span class="txt-is bold">adresse</span>” avec un nom de “<span class="txt-is bold">société</span>” ainsi que les informations lié à l’ “<span class="txt-is bold">adresse de livraison</span>” par défaut (votre dépôt)</p><br />
<br />
<div><br />
[[Fichier:DerKreis02_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Vous avez désormais un <span class="bold">Site</span> avec les informations liés à votre magasin de renseigner, il ne reste plus qu’à renseigner vos informations <span class="bold">DER KREIS</span> et le passage de commande sera à vous !</p><br />
<br />
<br />
<div class="flex x_center y_center"><br />
<br />
<div><br />
[[Fichier:DerKreis03_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Dans “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">DER KREIS: Configure EANCOM…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<br />
<div><br />
<br />
===Inscrivez vos informations EDI :===<br />
<br />
Disponible dans sur votre compte <span class="bold">La Plateforme DER KREIS</span> (avec un compte administrateur de magasin) dans l’espace “<span class="txt-is bold">Mon Magasin</span>”<br />
<br />
Vous retrouverez votre “<span class="txt-is bold">N° Adhérent</span>” au sein du groupement DER KREIS ainsi que votre “<span class="txt-is bold">Mot de passe EDI</span>” (''affichez le mot de passe avant de copier-coller dans InSitu'')<br />
<br />
Une fois les informations saisies → <span class="txt-is bold">Valider</span><br />
<br />
</div><br />
<br />
<div class="ml-20"><br />
[[Fichier:DerKreis04_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Votre logiciel InSitu est désormais configurer pour l’envoi de commande EDI vers DER KREIS !</p><br />
<br />
<br />
<br />
==Les fonctionnalités==<br />
<br />
<br />
<div class="flex wrap x_center y_center mt-20"><br />
<br />
<div style="width:30%;" class="img-full"><br />
[[Fichier:DerKreis05_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
Toutes les fonctionnalités de l’extension DER KREIS se retrouve à cet endroit :<br />
<br />
“<span class="txt-is bold">Fichier</span>”->”<span class="txt-is bold">Commandes fournisseurs</span>”<br />
</div><br />
<br />
</div><br />
<br />
<br />
===Envoi Commande DER KREIS===<br />
<br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<div class="mr-20"><br />
<p style="padding:20px;border-radius:20px;background-color:#fef7c8;">La '<span class="bold">Contremarque</span>' envoyée à DER KREIS équivaut au <span class="bold">N° de devis</span> + <span class="bold">contremarque</span>.</p><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#e9f2fe;>Tous les champs de texte encadrés en <span style="color:#e50707;" class="bold">rouge</span> sont <span style="color:#e50707;" class="bold">obligatoires</span>, tandis que les champs de texte encadrés en <span style="color:#12e400;" class="bold">vert</span> sont <span style="color:#12e400;" class="bold">facultatifs</span>.</p><br />
<br />
<br />
====Instructions détaillées sur le fonctionnement :====<br />
<br />
L'adresse de livraison sera '<span class="bold">L'Adresse Dépôt</span>' par défaut, visible sur votre espace magasin sur <span class="bold">La Plateforme DER KREIS</span> (au même endroit que vos identifiants EDI).<br />
<br />
Si vous souhaitez définir l'adresse de livraison sur une adresse spécifique, veuillez indiquer l’adresse complète dans ‘<span class="bold">Commentaire</span>'<br />
<br />
Le champs '<span class="bold">Commentaire</span>', vous laisse libre choix d'écrire un <span class="bold">commentaire</span> lié à votre commande afin d’informer le <span class="bold">fournisseur</span> ''et/ou'' <span class="bold">DER KREIS</span> sur des détails spécifiques.<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis06_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
En <span style="color:#ff77ff;" class="bold">rose</span> vous retrouvez une liste de tout vos articles provenant du catalogue <span class="bold">DER KREIS</span> <span style="text-decoration:underline;">uniquement</span>.<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#ffeceb;">Si un appareil <span class="bold">n’apparait pas</span> dans cette liste alors il ne sera pas commandé.</p><br />
<br />
Une petite coche est présente dans la colonne ‘<span class="bold">Commandé ?</span>’, elle vous permet de commander ou non la ligne d’article.<br />
<br />
(Ex: si vous avez du stock dans votre magasin / dépôt ; besoin de repasser une commande partiellement etc.)<br />
</div><br />
<br />
</div><br />
<br />
<br />
<div class="flex x_center y_center"><br />
<br />
<div class="mr-20"><br />
<br />
Lors de l’envoi de la commande, un PDF vous sera restitué.<br />
<br />
<br />
<div style="padding:20px;border-radius:20px;background-color:#fef7c8;"><br />
<span class="bold bold">ATTENTION :</span> Ce PDF ne constitue en aucun cas un justificatif officiel de commande.<br />
<br />
Il vous sert simplement a visualiser / archiver vos commandes<br />
<br />
</div><br />
<br />
<br />
Vous avez la possibilité de : <br />
<br />
- Enregistrer le PDF sur votre poste<br />
<br />
- Envoyer la commande<br />
<br />
- Tout annuler<br />
<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis07_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<br />
<div class="flex wrap x_evenly y_center"><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis08_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">Lors de l’envoi de la commande, une fenêtre s’ouvre vous permettant de suivre l’avancement de l’envoi de votre commande.</p><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis09_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">Si la commande a correctement été envoyé, alors vous retrouverez une coche verte, ainsi qu’un message vous rappelant le bon envoi de votre commande.</p><br />
<br />
<div style="width:20%;" class="img-full"><br />
[[Fichier:DerKreis10_FR.png|link=]]<br />
</div><br />
<br />
<p style="width:10%;">En revanche, si la commande n’a pu être transféré, vous retrouverez une croix rouge avec un message d’erreur.</p><br />
<br />
</div><br />
<br />
<br />
===Historique Commandes DER KREIS===<br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<br />
<div class="mr-20"><br />
<br />
L’historique de commande vous permet de visualiser vos envois de commande via l’extension DER KREIS.<br />
<br />
<br />
Les lignes <span style="color:#0078d7;" class="bold">BLEU</span> correspondent à un projet, en cliquant dessus, vous pouvez voir le détail des différents envoi et tentative d’envoi.<br />
<br />
<br />
En <span style="color:#90ee90;" class="bold">VERT</span> vous trouverez les envois qui ont abouti (avec la coche verte). Sinon la ligne reste blanche.<br />
<br />
<br />
En cliquant sur un envoi (vert ou blanc) vous verrez le détail des articles que vous avez transféré.<br />
<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis11_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
<br />
Vous avez la possibilité à droite, de filtrer sur une période : <br />
<br />
- Aujourd’hui<br />
<br />
- Semaine<br />
<br />
- Mois<br />
<br />
- Année<br />
<br />
- Tous<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#fef7c8;">Attention, plus la plage de temps est grande plus le temps de chargement peut s’allonger.</p><br />
<br />
</div><br />
<br />
</div><br />
<br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Félicitations vous savez utiliser l’extension DER KREIS !</p><br />
<br />
<!-- fin contenu --><br />
<br />
</td><br />
<br />
<td valign="top" width="5%"><br />
<br />
<br />
</td><br />
</tr><br />
</table><br />
<br />
<span class="btnretour">[[#top|Retour haut de page]]</span>&nbsp; <span class="btnhome">[[Configurer InSitu en réseau|Etape suivante]]</span></div>
Marion
https://fr.wiki.insitu.education//index.php?title=Der_Kreis_Passage_de_Commande&diff=9046
Der Kreis Passage de Commande
2025-07-03T08:26:28Z
<p>Marion : </p>
<hr />
<div><div id="top"></div><br />
<table width="100%"><br />
<tr><br />
<td width="95%"><br />
<!-- contenu --><br />
<h1 class="title_page">Passage de Commande EDI DER KREIS</h1><br />
<br />
<br />
===Qu'est-ce que l’Extension DER KREIS pour InSitu ?===<br />
<br />
L’extension DER KREIS est une solution innovante conçue pour vous faciliter la vie ! Il permet une gestion simplifiée des commandes directement depuis votre logiciel de conception InSitu, offrant ainsi une expérience plus fluide et efficace.<br />
<br />
===Fonctionnalités clés===<br />
<br />
====Processus de Commande Simplifié:====<br />
Grâce à l’extension DER KREIS, vous pouvez désormais passer vos commandes en quelques clics, éliminant ainsi les tracas liés aux processus de commande traditionnels.<br />
<br />
====Assuré un suivi des commandes passées:====<br />
Votre logiciel de dessin vous permet de suivre quelle commande vous avez envoyé et quand grâce à un système d’historisation de vos passages de commandes.<br />
<br />
====Intégration Transparente:====<br />
Le module est entièrement intégré à votre logiciel de conception InSitu, garantissant une compatibilité totale et une expérience utilisateur homogène.<br />
<br />
===Avantages===<br />
<br />
====Gain de Temps:====<br />
En utilisant l’extension DER KREIS, vous gagnez un temps précieux en évitant les processus de commande fastidieux, vous permettant de vous concentrer sur ce qui compte vraiment pour votre entreprise.<br />
<br />
====Simplicité:====<br />
Plus besoin de jongler avec des e-mails pour passer vos commandes. Notre module vous offre une solution simple et efficace, adaptée à vos besoins.<br />
<br />
====Fiabilité:====<br />
Avec notre module, vous pouvez avoir confiance en la transmission sûre et sécurisée de vos commandes, assurant ainsi la continuité de vos activités sans tracas ni soucis.<br />
<br />
<br />
===Conclusion===<br />
<br />
L’extension DER KREIS révolutionne la manière dont vous passez vos commandes, en vous offrant une solution moderne, pratique et efficace. Profitez dès maintenant de l'expérience client ultime, passer sa commande en quelques clics.<br />
<br />
<br />
<br />
=Comment configurer l’extension DER KREIS EANCOM ?=<br />
<br />
<br />
<div class="flex x_center y_center mt-20"><br />
<br />
<div><br />
[[Fichier:DerKreis01_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Ensuite, vérifier vos informations de site “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">Sites…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_center y_center"><br />
<br />
<p class="mr-20">Il est <span class="bold" style="color:red">impératif</span> d’avoir un <span class="bold">site</span> avec au <span class="bold">minimum</span> les informations d’ “<span class="txt-is bold">adresse</span>” avec un nom de “<span class="txt-is bold">société</span>” ainsi que les informations lié à l’ “<span class="txt-is bold">adresse de livraison</span>” par défaut (votre dépôt)</p><br />
<br />
<div><br />
[[Fichier:DerKreis02_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Vous avez désormais un <span class="bold">Site</span> avec les informations liés à votre magasin de renseigner, il ne reste plus qu’à renseigner vos informations <span class="bold">DER KREIS</span> et le passage de commande sera à vous !</p><br />
<br />
<br />
<div class="flex x_center y_center"><br />
<br />
<div><br />
[[Fichier:DerKreis03_FR.png|link=]]<br />
</div><br />
<br />
<p class="ml-20">Dans “<span class="txt-is bold">Configuration</span>”->”<span class="txt-is bold">DER KREIS: Configure EANCOM…</span>”</p><br />
<br />
</div><br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<br />
<div><br />
<br />
===Inscrivez vos informations EDI :===<br />
<br />
Disponible dans sur votre compte <span class="bold">La Plateforme DER KREIS</span> (avec un compte administrateur de magasin) dans l’espace “<span class="txt-is bold">Mon Magasin</span>”<br />
<br />
Vous retrouverez votre “<span class="txt-is bold">N° Adhérent</span>” au sein du groupement DER KREIS ainsi que votre “<span class="txt-is bold">Mot de passe EDI</span>” (''affichez le mot de passe avant de copier-coller dans InSitu'')<br />
<br />
Une fois les informations saisies → <span class="txt-is bold">Valider</span><br />
<br />
</div><br />
<br />
<div class="ml-20"><br />
[[Fichier:DerKreis04_FR.png|link=]]<br />
</div><br />
<br />
</div><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#dcfff1;text-align:center;">Votre logiciel InSitu est désormais configurer pour l’envoi de commande EDI vers DER KREIS !</p><br />
<br />
<br />
<br />
==Les fonctionnalités==<br />
<br />
<br />
<div class="flex wrap x_center y_center mt-20"><br />
<br />
<div style="width:30%;" class="img-full"><br />
[[Fichier:DerKreis05_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
Toutes les fonctionnalités de l’extension DER KREIS se retrouve à cet endroit :<br />
<br />
“<span class="txt-is bold">Fichier</span>”->”<span class="txt-is bold">Commandes fournisseurs</span>”<br />
</div><br />
<br />
</div><br />
<br />
<br />
===Envoi Commande DER KREIS===<br />
<br />
<br />
<div class="flex x_evenly y_center"><br />
<br />
<div class="mr-20"><br />
<p style="padding:20px;border-radius:20px;background-color:#fef7c8;">La '<span class="bold">Contremarque</span>' envoyée à DER KREIS équivaut au <span class="bold">N° de devis</span> + <span class="bold">contremarque</span>.</p><br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#e9f2fe;>Tous les champs de texte encadrés en <span style="color:#e50707;" class="bold">rouge</span> sont <span style="color:#e50707;" class="bold">obligatoires</span>, tandis que les champs de texte encadrés en <span style="color:#12e400;" class="bold">vert</span> sont <span style="color:#12e400;" class="bold">facultatifs</span>.</p><br />
<br />
<br />
====Instructions détaillées sur le fonctionnement :====<br />
<br />
L'adresse de livraison sera '<span class="bold">L'Adresse Dépôt</span>' par défaut, visible sur votre espace magasin sur <span class="bold">La Plateforme DER KREIS</span> (au même endroit que vos identifiants EDI).<br />
<br />
Si vous souhaitez définir l'adresse de livraison sur une adresse spécifique, veuillez indiquer l’adresse complète dans ‘<span class="bold">Commentaire</span>'<br />
<br />
Le champs '<span class="bold">Commentaire</span>', vous laisse libre choix d'écrire un <span class="bold">commentaire</span> lié à votre commande afin d’informer le <span class="bold">fournisseur</span> ''et/ou'' <span class="bold">DER KREIS</span> sur des détails spécifiques.<br />
</div><br />
<br />
<div><br />
[[Fichier:DerKreis06_FR.png|link=]]<br />
</div><br />
<br />
<div class="ml-20"><br />
En <span style="color:#ff77ff;" class="bold">rose</span> vous retrouvez une liste de tout vos articles provenant du catalogue <span class="bold">DER KREIS</span> <span style="text-decoration:underline;">uniquement</span>.<br />
<br />
<p style="padding:20px;border-radius:20px;background-color:#ffeceb;">Si un appareil <span class="bold">n’apparait pas</span> dans cette liste alors il ne sera pas commandé.</p><br />
<br />
Une petite coche est présente dans la colonne ‘<span class="bold">Commandé ?</span>’, elle vous permet de commander ou non la ligne d’article.<br />
<br />
(Ex: si vous avez du stock dans votre magasin / dépôt ; besoin de repasser une commande partiellement etc.)<br />
</div><br />
<br />
</div><br />
<br />
<br />
<br />
<div align="center"><br />
<p class="cadreimg"><br />
[[Fichier:DerKreis07_FR.png|link=]]<br />
</p></div><br />
<br />
Lors de l’envoi de la commande, un PDF vous sera restitué.<br />
<br />
<div align="center"><br />
<p class="cadreimg"><br />
[[Fichier:DerKreis08_FR.png|link=]]<br />
</p></div><br />
<br />
ATTENTION : Ce PDF ne constitue en aucun cas un justificatif officiel de commande.<br />
<br />
<div align="center"><br />
<p class="cadreimg"><br />
[[Fichier:DerKreis09_FR.png|link=]]<br />
</p></div><br />
<br />
Il vous sert simplement a visualiser / archiver vos commandes<br />
<br />
<div align="center"><br />
<p class="cadreimg"><br />
[[Fichier:DerKreis10_FR.png|link=]]<br />
</p></div><br />
<br />
<br />
Vous avez la possibilité de : <br />
<br />
Enregistrer le PDF sur votre poste<br />
<br />
Envoyer la commande<br />
<br />
Tout annuler<br />
<br />
Lors de l’envoi de la commande, une fenêtre s’ouvre vous permettant de suivre l’avancement de l’envoi de votre commande.<br />
<br />
Si la commande a correctement été envoyé, alors vous retrouverez une coche verte.<br />
<br />
Ainsi qu’un message vous rappelant le bon envoi de votre commande<br />
<br />
En revanche, si la commande n’a pu être transféré, vous retrouverez une croix rouge avec un message d’erreur.<br />
<br />
<br />
'''Historique Commandes DER KREIS'''<br />
<br />
<div align="center"><br />
<p class="cadreimg"><br />
[[Fichier:DerKreis11_FR.png|link=]]<br />
</p></div><br />
<br />
L’historique de commande vous permet de visualiser vos envois de commande via l’extension DER KREIS.<br />
<br />
Les lignes BLEU correspondent à un projet, en cliquant dessus, vous pouvez voir le détail des différents envoi et tentative d’envoi.<br />
<br />
En VERT vous trouverez les envois qui ont abouti (avec la coche verte). Sinon la ligne reste blanche.<br />
<br />
En cliquant sur un envoi (vert ou blanc) vous verrez le détail des articles que vous avez transféré.<br />
<br />
Vous avez la possibilité à droite, de filtrer sur une période : <br />
<br />
Aujourd’hui<br />
<br />
Semaine<br />
<br />
Mois<br />
<br />
Année<br />
<br />
Tous<br />
<br />
Attention, plus la plage de temps est grande plus le temps de chargement peut s’allonger.<br />
<br />
<br />
<br />
Félicitations vous savez utiliser l’extension DER KREIS !<br />
<br />
<!-- fin contenu --><br />
<br />
</td><br />
<br />
<td valign="top" width="5%"><br />
<br />
<br />
</td><br />
</tr><br />
</table><br />
<br />
<span class="btnretour">[[#top|Retour haut de page]]</span>&nbsp; <span class="btnhome">[[Configurer InSitu en réseau|Etape suivante]]</span></div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8967
MediaWiki:Print.css
2024-10-30T08:17:17Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2, h2 * {<br />
font-size: 20px;<br />
}<br />
<br />
h3, h3 * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8966
MediaWiki:Print.css
2024-10-30T08:13:23Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2, h2 * {<br />
font-size: 24px;<br />
}<br />
<br />
h3, h3 * {<br />
font-size: 20px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8965
MediaWiki:Print.css
2024-10-30T08:12:49Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2, h2 * {<br />
font-size: 30px;<br />
}<br />
<br />
h3, h3 * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8964
MediaWiki:Print.css
2024-10-29T15:42:46Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2 {<br />
font-size: 30px;<br />
}<br />
<br />
h3 {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8963
MediaWiki:Print.css
2024-10-29T15:41:33Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2 {<br />
font-size: 28px;<br />
}<br />
<br />
h3 {<br />
font-size: 24px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8962
MediaWiki:Print.css
2024-10-29T15:01:11Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
h2 {<br />
font-size: 24px;<br />
}<br />
<br />
h3 {<br />
font-size: 20px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=DocModif&diff=8795
DocModif
2024-08-05T15:09:40Z
<p>Marion : /* Navigation */</p>
<hr />
<div><div class="docModif"><br />
<br />
<br />
<br />
<br />
== Liens utiles ==<br />
<br />
<li>[[test_julien]]</li><br />
<br />
<br />
Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) :<br />
[[Spécial:Pages spéciales]]<br />
<br />
Pour uploader des images :<br />
[[Spécial:Téléverser]]<br />
<br />
Lien direct vers la css :<br />
[[MediaWiki:Global.css]]<br />
<br />
Lien direct vers le js :<br />
[[MediaWiki:Global.js]]<br />
<br />
<br />
<br />
== Menus latéraux ==<br />
<br />
<br />
<br />
Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.<br />
<pre>{{:nom_de_l'article}}</pre><br />
<br />
Noms et lien des articles contenant les menus<br />
===Menus du wiki fr===<br />
<ul><br />
<li>[[Menu_Installer]]</li><br />
<li>[[Menu_Configurer]]</li><br />
<li>[[Menu_Concevoir]]</li><br />
<li>[[Menu_Décorer]]</li><br />
<li>[[Menu_Visualiser]]</li><br />
<li>[[Menu_Vendre]]</li><br />
<li>[[Menu_Gabarits]]</li><br />
<li>[[Menu_Avancé]]</li><br />
</ul><br />
===Menus du wiki en===<br />
<ul><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Installer En_Installer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Configurer En_Configurer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Concevoir En_Concevoir]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_D%C3%A9corer En_Décorer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Gabarits En_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=Other_Functions En_Avancé]</li><br />
<br />
</ul><br />
===Menus du wiki es===<br />
<ul><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Installer Es_Installer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Configurer Es_Configurer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Concevoir Es_Concevoir]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Décorer Es_Décorer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Visualiser Es_Visualiser]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Vendre Es_Vendre]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Gabarit Es_Gabarits]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Avancé Es_Avancé]</li><br />
</ul><br />
===Menus du wiki nl===<br />
<ul><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Installer Nl_Installer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Configurer Nl_Configurer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Concevoir Nl_Concevoir]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_D%C3%A9corer Nl_Décorer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Sjablonen_beheren Nl_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<br />
===Menus du wiki de===<br />
https://de.wiki.insitu.education/index.php?title=Hauptseite<br />
<ul><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
== Syntaxe ==<br />
<br />
=== Liens ===<br />
<br />
==== Liens internes ====<br />
<br />
===== Navigation =====<br />
<br />
Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.<br />
<pre>[[nom_de_l'article|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
Il est également possible de donner le lien d'un endroit spécifique dans une page. Pour ce faire, préparez d'abord la section de la page sur laquelle vous voulez arriver, soit en l'indiquant comme titre, soit en lui adjoignant un id :<br />
<pre>===Titre===</pre><br />
<pre><span id="mon_id">Ancre</span></pre><br />
Le lien se fait ensuite de la même façon que n'importe quel autre lien, entre [[]].<br />
<br />
Si le lien est dans la page même :<br />
<pre>[[#Titre|Texte que l'utilisateur voit]]</pre><br />
<pre>[[#mon_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[#Ajouter de l'espace autour d'un élément|Ajouter de l'espace autour d'un élément]]<br />
<br />
Si le lien est vers une section spécifique d'une autre page :<br />
<pre>[[nom_de_l'article#nom_du_titre_ou_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu#Exemple_en_cours|Page très utile]]<br />
<br />
===== Inclusion =====<br />
<br />
====== D'un article ======<br />
<br />
L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.<br />
<pre>{{:nom_de_l'article}}</pre><br />
Exemple:<br />
{{:Menu_Installer}}<br />
<br />
====== D'une image ======<br />
<br />
Pour inclure une image dans un article, il faut d'abord commencer par l'[[Spécial:Téléverser|uploader]].<br />
Une image uploadée est inclue grâce à la syntaxe suivante<br />
<pre>[[File:nom_de_l_image]]</pre><br />
ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même<br />
<pre>[[Image:nom_de_l_image]]</pre><br />
Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien<br />
<pre>[[File:nom_de_l_image|link=]]<br />
[[Image:nom_de_l_image|link=]]</pre><br />
<br />
Exemple :<br />
Sans "|link=" : <br />
[[File:Exemple_img.jpg]]<br />
Avec "|link=" : <br />
[[File:Exemple_img.jpg|link=]]<br />
(cliquez sur chacune des images pour voir la différence)<br />
<br />
==== Liens externes ====<br />
<br />
Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante<br />
<pre>[https//www.adresse_du_site.fr texte visible du lien(optionnel)]</pre><br />
<br />
Exemple :<br />
[https://fr.wikipedia.org/wiki/Tintin Lien très très cool]<br />
<br />
=== Commentaire ===<br />
<br />
Le commentaire permet de retirer de la vue du contenu sur la page, mais de le garder visible lors de l'édition de celle-ci. Peut contenir du texte comme du balisage html.<br />
<pre><!--Ceci est un commentaire--></pre><br />
<br />
Exemple :<br />
<!--Passe une bonne journée !--><br />
<br />
<br />
<br />
== Classes de mise en page ==<br />
<br />
<br />
<br />
=== Classes générales (couleur, gras, etc.) ===<br />
<br />
<br />
==== big ====<br />
<br />
Cette classe permet de mettre un texte en plus grand.<br />
<pre><p class="big">Je suis grand</p></pre><br />
<br />
Exemple :<br />
<p class="big">Je suis grand</p><br />
<br />
==== bold ====<br />
<br />
Cette classe permet de mettre un texte en gras.<br />
<pre><p class="bold">Je suis gras</p></pre><br />
<br />
Exemple :<br />
<p class="bold">Je suis gras</p><br />
<br />
Mettre un bold dans une balise portant une classe bold le mettra en très gras.<br />
<pre><p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p></pre><br />
<br />
Exemple :<br />
<p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p><br />
<br />
==== sup ====<br />
<br />
Cette balise permet de mettre un texte en exposant.<br />
<pre><p>Texte ordinaire<sup>Texte en exposant</sup></p></pre><br />
<br />
Exemple :<br />
<p>Texte ordinaire<sup>Texte en exposant</sup></p><br />
<br />
==== txt-is ====<br />
<br />
Cette classe sert à mettre un texte en orange, "couleur InSitu".<br />
<pre><p class="txt-is">InSitu</p></pre><br />
<br />
Exemple :<br />
<p class="txt-is">InSitu</p><br />
<br />
==== txt-gris ====<br />
<br />
Cette classe sert à mettre un texte en gris.<br />
<pre><p class="txt-gris">Texte gris</p></pre><br />
<br />
Exemple :<br />
<p class="txt-gris">Texte gris</p><br />
<br />
<br />
=== Présentation particulière d'un élément ===<br />
<br />
<br />
==== title_page ====<br />
<br />
Cette classe ne fonctionne uniquement lorsqu'elle est mise sur une balise h1. Elle sert à mettre en avant le titre d'une page.<br />
<pre><h1 class="title_page">Ceci est un titre de page</h1></pre><br />
<br />
===== bg-blue =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond bleu.<br />
<pre><h1 class="title_page bg-blue">Ceci est un titre de page bleu</h1></pre><br />
<br />
===== bg-green =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond vert.<br />
<pre><h1 class="title_page bg-green">Ceci est un titre de page vert</h1></pre><br />
<br />
==== chiffre ====<br />
<br />
Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.<br />
<pre><span class="chiffre">0</span></pre><br />
<br />
Exemple :<br />
<br />
<span class="chiffre">0</span><br />
<br />
==== encadre ====<br />
<br />
Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.<br />
<br />
Pour un paragraphe :<br />
<pre><p class="encadre">Contenu textuel</p></pre><br />
Pour plusieurs paragraphes :<br />
<pre><div class="encadre"><br />
Contenu textuel 1<br />
<br />
Contenu textuel 2<br />
</div></pre><br />
<br />
Exemple : <br />
<p class="encadre mb-20">You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.</p><br />
<div class="encadre"><br />
The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<br />
<br />
Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.<br />
</div><br />
<br />
<br />
<pre><p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p></pre><br />
<p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px"> blabla blabla blabla.</p><br />
<br />
==== info ====<br />
<br />
Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.<br />
<pre><span class="info">i</span></pre><br />
<pre><span class="chiffre info">i</span></pre><br />
<br />
Exemple :<br />
<br />
<p>Info seul : <br />
<span class="info">i</span></p><br />
<p>Info avec la classe "chiffre" :<br />
<span class="chiffre info">i</span></p><br />
<br />
==== important ====<br />
<br />
Cette classe sert à mettre en évidence une information.<br />
<pre><p class="important">Ceci est absolument crucial !</p></pre><br />
<br />
Exemple :<br />
<p class="important">Ceci est absolument crucial !</p><br />
<br />
==== shadow ====<br />
<br />
Cette classe ajoute une ombre autour d'un élément, lui donnant un effet de relief.<br />
<pre><div class="shadow">[[Image]], texte, etc.</div></pre><br />
<br />
Exemple :<br />
<div class="shadow" style="display:inline-block">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Placer les éléments sur la page ===<br />
<br />
<br />
==== flex ====<br />
<br />
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.<br />
<br />
ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !<br />
<br />
ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.<br />
<br />
ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.<br />
<br />
<pre><div class="flex"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
</div></pre><br />
<br />
Exemple :<br />
<div class="flex"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.</p><br />
</div><br />
<br />
<br />
==== Classes relatives au flex ====<br />
<br />
ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.<br />
<br />
===== col =====<br />
<br />
Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.<br />
<pre><div class="flex col"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex col"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.</p><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
==== wrap ====<br />
<br />
Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.<br />
<pre><div class="flex wrap"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex wrap"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_center =====<br />
<br />
Cette classe permet de centrer horizontalement des éléments d'un flex.<br />
<pre><div class="flex x_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_evenly =====<br />
<br />
Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.<br />
<pre><div class="flex x_evenly"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_evenly"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== y_center =====<br />
<br />
Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.<br />
<pre><div class="flex y_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex y_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth ð•„ð”¼ð•†ð•Ž but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.</p><br />
</div><br />
<br />
<br />
==== txt-center ====<br />
<br />
Cette classe permet de centrer des éléments.<br />
<pre><div class="txt-center">Contenu divers</div></pre><br />
<pre><p class="txt-center">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-center">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
==== txt-right ====<br />
<br />
Cette classe permet d'aligner les éléments sur la droite.<br />
<pre><div class="txt-right">Contenu divers</div></pre><br />
<pre><p class="txt-right">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-right">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Ajouter de l'espace autour d'un élément ===<br />
<br />
<br />
==== m-20 ====<br />
<br />
Cette classe ajoute un peu d'espace autour d'un élément (20 px).<br />
<pre><div class="m-20"></div></pre><br />
<pre><p class="m-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.</p><br />
<div class="flex"><br />
<p>Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.</p><br />
<div class="m-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?</p><br />
</div><br />
<p>Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.</p><br />
<br />
<br />
==== mb-20 ====<br />
<br />
Cette classe ajoute un peu d'espace sous un élément (20px).<br />
<pre><div class="mb-20"></div></pre><br />
<pre><p class="mb-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="mb-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.</p><br />
<br />
<br />
==== ml-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à gauche d'un élément (20px).<br />
<pre><div class="ml-20"></div></pre><br />
<pre><p class="ml-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<p>Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.</p><br />
<div class="ml-20">[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
<br />
==== mr-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à droite d'un élément (20px).<br />
<pre><div class="mr-20"></div></pre><br />
<pre><p class="mr-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<div class="mr-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.</p><br />
</div><br />
<br />
<br />
==== mt-20 ====<br />
<br />
Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).<br />
<pre><div class="mt-20"></div></pre><br />
<pre><p class="mt-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p><br />
<div class="mt-20">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
<br />
=== Changer la taille d'un élément ===<br />
<br />
<br />
<br />
==== w-full ====<br />
<br />
Fixe la largeur d'un élément à 100%.<br />
<pre><div class="w-full">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-full"style="background-color:pink">Bouh</div><br />
<br />
<br />
==== w-half ====<br />
<br />
Fixe la largeur d'un élément à 50%.<br />
<pre><div class="w-half">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-half">Reaches under door into adjacent room trip owner up in kitchen i want food meow meow you are my owner so here is a dead rat for where is it? i saw that bird i need to bring it home to mommy squirrel! cattt catt cattty cat being a cat. Human give me attention meow sees bird in air, breaks into cage and attacks creature eat a plant, kill a hand or intrigued by the shower, or howl on top of tall thing. Sees bird in air, breaks into cage and attacks creature climb into cupboard and lick the salt off rice cakes kitty kitty pussy cat doll hate dog, but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count. Chase mice nyaa nyaa so get poop stuck in paws jumping out of litter box and run around the house scream meowing and smearing hot cat mud all over for plan steps for world domination cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Lick the plastic bag miaow then turn around and show you my bum shred all toilet paper and spread around the house check cat door for ambush 10 times before coming in i love cuddles so purr. Crash against wall but walk away like nothing happened get scared by sudden appearance of cucumber. Don't nosh on the birds while happily ignoring when being called, yet claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Stare at owner accusingly then wink. Plays league of legends. Slap the dog because cats rule good morning sunshine toy mouse squeak roll over, or eats owners hair then claws head walk on car leaving trail of paw prints on hood and windshield but mesmerizing birds mess up all the toilet paper. Headbutt owner's knee. Behind the couch lick butt and make a weird face floof tum, tickle bum, jellybean footies curly toes sleep everywhere, but not in my bed so flee in terror at cucumber discovered on floor trip owner up in kitchen i want food so stick butt in face. Sniff all the things. I shredded your linens for you lick the curtain just to be annoying but a nice warm laptop for me to sit on chew the plant. Scratch me there, elevator butt purr like an angel for chase after silly colored fish toys around the house scratch the postman wake up lick paw wake up owner meow meow. Step on your keyboard while you're gaming and then turn in a circle why must they do that cats making all the muffins fooled again thinking the dog likes me or claw drapes snuggles up to shoulders or knees and purrs you to sleep. Meow all night having their mate disturbing sleeping humans when owners are asleep, cry for no apparent reason. Give me attention or face the wrath of my claws touch my tail, i shred your hand purrrr and lick master's hand at first then bite because im moody rub face on everything no, you can't close the door, i haven't decided whether or not i wanna go out and meow purrr purr littel cat, little cat purr purr. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly spit up on light gray carpet instead of adjacent linoleum but human give me attention meow. Bury the poop bury it deep let me in let me out let me in let me out let me in let me out who broke this door anyway.</div><br />
<br />
<br />
==== style et width ====<br />
<br />
La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.<br />
<br />
Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).<br />
<br />
ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.<br />
<br />
<pre><div style="width:00px;">Contenu divers</div></pre><br />
<pre><p style="width:00%;">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div><br />
<p style="width:50%">Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?</p><br />
<p style="width:80%">I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.</p><br />
<p style="width:400px">Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.</p><br />
</div><br />
<br />
<br />
==== img-full ====<br />
<br />
Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).<br />
<pre><div class="img-full">[[Lien de l'image]]</div></pre><br />
<br />
Exemple : <br />
<br />
<div class="flex wrap img-full"><br />
<br />
<div><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:50px;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:20%;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
</div><br />
<br />
== Classes relatives à l'impression ==<br />
<br />
<br />
<br />
=== barre_menu ===<br />
<br />
Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.<br />
<br />
<br />
=== no_print ===<br />
<br />
Classe servant à faire disparaître un élément de l'impression.<br />
<pre><p class="no_print">Element invisible dans la version imprimable</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="no_print">Je disparaît.</p><br />
<br />
<br />
=== print_only ===<br />
<br />
Classe servant à ne montrer un élément qu'au moment de l'impression.<br />
<pre><p class="print_only">Element invisible sur le web, visible en impression</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="print_only">Je suis visible à l'impression</p><br />
<br />
<br />
=== div.one_page ===<br />
<br />
Classe à mettre UNIQUEMENT sur une balise div. Cette div fera au maximum la taille d'une page pour l'impression. Cette div n'est effective que pour les grandes largeurs d'écrans afin de ne pas "casser" la page aux yeux des utilisateur dont l'écran est plus petit.<br />
<br />
ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre.<br />
CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.<br />
<pre><div class="one_page"></div></pre><br />
<br />
Exemple : <br />
<br />
<div class="one_page txt-center flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait au maximum la longueur d'une page imprimée.</p><p>La bordure noire n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div><br />
<br />
==== col-w-10 ====<br />
<br />
Classe ne fonctionnant QUE dans div.one_page. Mettre cette classe sur une div répartira son contenu au besoin sur des colonnes de 10 caractères max.<br />
<pre><div class="one_page"><div class="col-w-10"></div></div></pre><br />
<br />
Exemple :<br />
<br />
<div class="one_page"><br />
<p class="txt-center">Je ne rentre pas dans des colonnes.</p><br />
<div class="col-w-10"><br />
Dismember a mouse and then regurgitate parts of it on the family room floor ears back wide eyed and licks paws for destroy house in 5 seconds pee in the shoe. Chew the plant. Play time dismember a mouse and then regurgitate parts of it on the family room floor eat an easter feather as if it were a bird then burp victoriously, but tender cats making all the muffins, cat playing a fiddle in hey diddle diddle? so toy mouse squeak roll over. Yowling nonstop the whole night. Poop in the plant pot ask to be pet then attack owners hand chase dog then run away cat sit like bread and be superior for lick the curtain just to be annoying. Oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap sleep on keyboard. Sleep everywhere, but not in my bed crash against wall but walk away like nothing happened yet meowsiers so rub whiskers on bare skin act innocent. Mew. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip the fat cat sat on the mat bat away with paws and poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat yet if human is on laptop sit on the keyboard try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard or licks your face. Is good you understand your place in my world. Knock over christmas tree find empty spot in cupboard and sleep all day, where is my slave? I'm getting hungry, but take a deep sniff of sock then walk around with mouth half open so rub my belly hiss or cat fur is the new black scream for no reason at 4 am.<br />
<br />
Spend six hours per day washing, but still have a crusty butthole find something else more interesting, but put toy mouse in food bowl run out of litter box at full speed bite off human's toes but under the bed, or knock dish off table head butt cant eat out of my own dish but scratch the furniture. Paw at your fat belly there's a forty year old lady there let us feast but inspect anything brought into the house, so cat not kitten around humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean yet do not try to mix old food with new one to fool me! kitty loves pigs. Give me attention or face the wrath of my claws ask to go outside and ask to come inside and ask to go outside and ask to come inside and really likes hummus, dead stare with ears cocked purr for no reason for always hungry your pillow is now my pet bed. Find empty spot in cupboard and sleep all day why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout push your water glass on the floor. Paw your face to wake you up in the morning bring your owner a dead bird yet hit you unexpectedly pose purrfectly to show my beauty more napping, more napping all the napping is exhausting so ignore the squirrels, you'll never catch them anyway or find something else more interesting. Poop on floor and watch human clean up love me! yet man running from cops stops to pet cats, goes to jail kitty poochy run up and down stairs so mesmerizing birds. Sit on the laptop. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip find empty spot in cupboard and sleep all day or bawl under human beds and attack dog, run away and pretend to be victim. There's a forty year old lady there let us feast lick the plastic bag kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment. Stare at the wall, play with food and get confused by dust purr groom forever, stretch tongue and leave it slightly out, blep, good morning sunshine. Cats making all the muffins funny little cat chirrup noise shaking upright tail when standing next to you and walk on a keyboard, and love you, then bite you i heard this rumor where the humans are our owners, pfft, what do they know?!, so intently sniff hand, yet furrier and even more furrier hairball. Scratch my tummy actually i hate you now fight me fight an alligator and win pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Destroy couch if it fits i sits so purr while eating yet hiss at vacuum cleaner but mewl for food at 4am if it fits, i sits. Walk on keyboard hack, plan steps for world domination chase after silly colored fish toys around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat good now the other hand, too. Kitty power intrigued by the shower spread kitty litter all over house. Walk on a keyboard claws in your leg so cat dog hate mouse eat string barf pillow no baths hate everything or reaches under door into adjacent room. Take a deep sniff of sock then walk around with mouth half open sit in window and stare oooh, a bird, yum and ð•„ð”¼ð•†ð•Ž sitting in a box so prance along on top of the garden fence, annoy the neighbor's dog and make it bark eat an easter feather as if it were a bird then burp victoriously, but tender. Meeeeouw eats owners hair then claws head so whatever licks your face. Then cats take over the world really likes hummus so chase imaginary bugs, so scratch the furniture. Curl up and sleep on the freshly laundered towels play time hey! you there, with the hands so lie on your belly and purr when you are asleep crash against wall but walk away like nothing happened, yet behind the couch. My water bowl is clean and freshly replenished, so i'll drink from the toilet put toy mouse in food bowl run out of litter box at full speed or pretend not to be evil paw at your fat belly. Hiding behind the couch until lured out by a feathery toy climb leg, so ignore the squirrels, you'll never catch them anyway. Wack the mini furry mouse intrigued by the shower Gate keepers of hell wack the mini furry mouse and fart in owners food . With tail in the air meow to be let out.<br />
<br />
Lie in the sink all day kitten is playing with dead mouse, and carrying out surveillance on the neighbour's dog lasers are tiny mice, meowzer. Love me! crash against wall but walk away like nothing happened and mewl for food at 4am drink from the toilet. Headbutt owner's knee ooh, are those your $250 dollar sandals? lemme use that as my litter box so pelt around the house and up and down stairs chasing phantoms asdflkjaertvlkjasntvkjn (sits on keyboard) or leave fur on owners clothes litter box is life. Whatever bite off human's toes. Always ensure to lay down in such a manner that tail can lightly brush human's nose flop over run in circles pee in human's bed until he cleans the litter box. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? make plans to dominate world and then take a nap, for what the heck just happened, something feels fishy for demand to be let outside at once, and expect owner to wait for me as i think about it scratch lick butt and make a weird face eat owner's food. I cry and cry and cry unless you pet me, and then maybe i cry just for fun mess up all the toilet paper it's 3am, time to create some chaos , hunt anything that moves intrigued by the shower. Sleep all day whilst slave is at work, play all night whilst slave is sleeping cats are the world and swat at dog, or cat not kitten around so cattt catt cattty cat being a cat, so fall asleep on the washing machine. Let me in let me out let me in let me out let me in let me out who broke this door anyway snuggles up to shoulders or knees and purrs you to sleep, so caticus cuteicus but why use post when this sofa is here. Catch mouse and gave it as a present has closed eyes but still sees you. Scoot butt on the rug be superior for lick butt and make a weird face cats are the world so lick left leg for ninety minutes, still dirty open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow! human is behind a closed door, emergency! abandoned! meeooowwww!!!. The door is opening! how exciting oh, it's you, meh cat ass trophy touch water with paw then recoil in horror. Throwup on your pillow where is my slave?<br />
</div><br />
</div><br />
<br />
=== gif ===<br />
<br />
Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.<br />
<pre><div class="cadreimg gif">[[lien du gif]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg gif">[[lien du gif]]</p></pre><br />
<br />
Exemple : <br />
<br />
Gif invisible à l'impression.<br />
<div class="gif"><br />
[[Fichier:Exemple_gif.gif]]<br />
</div><br />
<br />
<br />
=== replace_gif ===<br />
<br />
Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.<br />
<pre><div class="cadreimg replace_gif">[[lien de l'image]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg replace_gif">[[lien de l'image]]</p></pre><br />
<br />
Exemple : <br />
<br />
Image visible seulement à l'impression<br />
<div class="replace_gif"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
<br />
</div></div>
Marion
https://fr.wiki.insitu.education//index.php?title=DocModif&diff=8794
DocModif
2024-08-05T15:09:09Z
<p>Marion : /* Navigation */</p>
<hr />
<div><div class="docModif"><br />
<br />
<br />
<br />
<br />
== Liens utiles ==<br />
<br />
<li>[[test_julien]]</li><br />
<br />
<br />
Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) :<br />
[[Spécial:Pages spéciales]]<br />
<br />
Pour uploader des images :<br />
[[Spécial:Téléverser]]<br />
<br />
Lien direct vers la css :<br />
[[MediaWiki:Global.css]]<br />
<br />
Lien direct vers le js :<br />
[[MediaWiki:Global.js]]<br />
<br />
<br />
<br />
== Menus latéraux ==<br />
<br />
<br />
<br />
Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.<br />
<pre>{{:nom_de_l'article}}</pre><br />
<br />
Noms et lien des articles contenant les menus<br />
===Menus du wiki fr===<br />
<ul><br />
<li>[[Menu_Installer]]</li><br />
<li>[[Menu_Configurer]]</li><br />
<li>[[Menu_Concevoir]]</li><br />
<li>[[Menu_Décorer]]</li><br />
<li>[[Menu_Visualiser]]</li><br />
<li>[[Menu_Vendre]]</li><br />
<li>[[Menu_Gabarits]]</li><br />
<li>[[Menu_Avancé]]</li><br />
</ul><br />
===Menus du wiki en===<br />
<ul><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Installer En_Installer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Configurer En_Configurer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Concevoir En_Concevoir]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_D%C3%A9corer En_Décorer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Gabarits En_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=Other_Functions En_Avancé]</li><br />
<br />
</ul><br />
===Menus du wiki es===<br />
<ul><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Installer Es_Installer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Configurer Es_Configurer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Concevoir Es_Concevoir]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Décorer Es_Décorer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Visualiser Es_Visualiser]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Vendre Es_Vendre]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Gabarit Es_Gabarits]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Avancé Es_Avancé]</li><br />
</ul><br />
===Menus du wiki nl===<br />
<ul><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Installer Nl_Installer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Configurer Nl_Configurer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Concevoir Nl_Concevoir]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_D%C3%A9corer Nl_Décorer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Sjablonen_beheren Nl_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<br />
===Menus du wiki de===<br />
https://de.wiki.insitu.education/index.php?title=Hauptseite<br />
<ul><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
== Syntaxe ==<br />
<br />
=== Liens ===<br />
<br />
==== Liens internes ====<br />
<br />
===== Navigation =====<br />
<br />
Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.<br />
<pre>[[nom_de_l'article|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
Il est également possible de donner le lien d'un endroit spécifique dans une page. Pour ce faire, préparez d'abord la section de la page sur laquelle vous voulez arriver, soit en l'indiquant comme titre, soit en lui adjoignant une id.<br />
<pre>===Titre===</pre><br />
<pre><span id="mon_id">Ancre</span></pre><br />
Le lien se fait ensuite de la même façon que n'importe quel autre lien, entre [[]].<br />
<br />
Si le lien est dans la page même :<br />
<pre>[[#Titre|Texte que l'utilisateur voit]]</pre><br />
<pre>[[#mon_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[#Ajouter de l'espace autour d'un élément|Ajouter de l'espace autour d'un élément]]<br />
<br />
Si le lien est vers une section spécifique d'une autre page :<br />
<pre>[[nom_de_l'article#nom_du_titre_ou_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu#Exemple_en_cours|Page très utile]]<br />
<br />
===== Inclusion =====<br />
<br />
====== D'un article ======<br />
<br />
L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.<br />
<pre>{{:nom_de_l'article}}</pre><br />
Exemple:<br />
{{:Menu_Installer}}<br />
<br />
====== D'une image ======<br />
<br />
Pour inclure une image dans un article, il faut d'abord commencer par l'[[Spécial:Téléverser|uploader]].<br />
Une image uploadée est inclue grâce à la syntaxe suivante<br />
<pre>[[File:nom_de_l_image]]</pre><br />
ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même<br />
<pre>[[Image:nom_de_l_image]]</pre><br />
Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien<br />
<pre>[[File:nom_de_l_image|link=]]<br />
[[Image:nom_de_l_image|link=]]</pre><br />
<br />
Exemple :<br />
Sans "|link=" : <br />
[[File:Exemple_img.jpg]]<br />
Avec "|link=" : <br />
[[File:Exemple_img.jpg|link=]]<br />
(cliquez sur chacune des images pour voir la différence)<br />
<br />
==== Liens externes ====<br />
<br />
Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante<br />
<pre>[https//www.adresse_du_site.fr texte visible du lien(optionnel)]</pre><br />
<br />
Exemple :<br />
[https://fr.wikipedia.org/wiki/Tintin Lien très très cool]<br />
<br />
=== Commentaire ===<br />
<br />
Le commentaire permet de retirer de la vue du contenu sur la page, mais de le garder visible lors de l'édition de celle-ci. Peut contenir du texte comme du balisage html.<br />
<pre><!--Ceci est un commentaire--></pre><br />
<br />
Exemple :<br />
<!--Passe une bonne journée !--><br />
<br />
<br />
<br />
== Classes de mise en page ==<br />
<br />
<br />
<br />
=== Classes générales (couleur, gras, etc.) ===<br />
<br />
<br />
==== big ====<br />
<br />
Cette classe permet de mettre un texte en plus grand.<br />
<pre><p class="big">Je suis grand</p></pre><br />
<br />
Exemple :<br />
<p class="big">Je suis grand</p><br />
<br />
==== bold ====<br />
<br />
Cette classe permet de mettre un texte en gras.<br />
<pre><p class="bold">Je suis gras</p></pre><br />
<br />
Exemple :<br />
<p class="bold">Je suis gras</p><br />
<br />
Mettre un bold dans une balise portant une classe bold le mettra en très gras.<br />
<pre><p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p></pre><br />
<br />
Exemple :<br />
<p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p><br />
<br />
==== sup ====<br />
<br />
Cette balise permet de mettre un texte en exposant.<br />
<pre><p>Texte ordinaire<sup>Texte en exposant</sup></p></pre><br />
<br />
Exemple :<br />
<p>Texte ordinaire<sup>Texte en exposant</sup></p><br />
<br />
==== txt-is ====<br />
<br />
Cette classe sert à mettre un texte en orange, "couleur InSitu".<br />
<pre><p class="txt-is">InSitu</p></pre><br />
<br />
Exemple :<br />
<p class="txt-is">InSitu</p><br />
<br />
==== txt-gris ====<br />
<br />
Cette classe sert à mettre un texte en gris.<br />
<pre><p class="txt-gris">Texte gris</p></pre><br />
<br />
Exemple :<br />
<p class="txt-gris">Texte gris</p><br />
<br />
<br />
=== Présentation particulière d'un élément ===<br />
<br />
<br />
==== title_page ====<br />
<br />
Cette classe ne fonctionne uniquement lorsqu'elle est mise sur une balise h1. Elle sert à mettre en avant le titre d'une page.<br />
<pre><h1 class="title_page">Ceci est un titre de page</h1></pre><br />
<br />
===== bg-blue =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond bleu.<br />
<pre><h1 class="title_page bg-blue">Ceci est un titre de page bleu</h1></pre><br />
<br />
===== bg-green =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond vert.<br />
<pre><h1 class="title_page bg-green">Ceci est un titre de page vert</h1></pre><br />
<br />
==== chiffre ====<br />
<br />
Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.<br />
<pre><span class="chiffre">0</span></pre><br />
<br />
Exemple :<br />
<br />
<span class="chiffre">0</span><br />
<br />
==== encadre ====<br />
<br />
Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.<br />
<br />
Pour un paragraphe :<br />
<pre><p class="encadre">Contenu textuel</p></pre><br />
Pour plusieurs paragraphes :<br />
<pre><div class="encadre"><br />
Contenu textuel 1<br />
<br />
Contenu textuel 2<br />
</div></pre><br />
<br />
Exemple : <br />
<p class="encadre mb-20">You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.</p><br />
<div class="encadre"><br />
The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<br />
<br />
Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.<br />
</div><br />
<br />
<br />
<pre><p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p></pre><br />
<p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px"> blabla blabla blabla.</p><br />
<br />
==== info ====<br />
<br />
Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.<br />
<pre><span class="info">i</span></pre><br />
<pre><span class="chiffre info">i</span></pre><br />
<br />
Exemple :<br />
<br />
<p>Info seul : <br />
<span class="info">i</span></p><br />
<p>Info avec la classe "chiffre" :<br />
<span class="chiffre info">i</span></p><br />
<br />
==== important ====<br />
<br />
Cette classe sert à mettre en évidence une information.<br />
<pre><p class="important">Ceci est absolument crucial !</p></pre><br />
<br />
Exemple :<br />
<p class="important">Ceci est absolument crucial !</p><br />
<br />
==== shadow ====<br />
<br />
Cette classe ajoute une ombre autour d'un élément, lui donnant un effet de relief.<br />
<pre><div class="shadow">[[Image]], texte, etc.</div></pre><br />
<br />
Exemple :<br />
<div class="shadow" style="display:inline-block">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Placer les éléments sur la page ===<br />
<br />
<br />
==== flex ====<br />
<br />
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.<br />
<br />
ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !<br />
<br />
ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.<br />
<br />
ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.<br />
<br />
<pre><div class="flex"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
</div></pre><br />
<br />
Exemple :<br />
<div class="flex"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.</p><br />
</div><br />
<br />
<br />
==== Classes relatives au flex ====<br />
<br />
ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.<br />
<br />
===== col =====<br />
<br />
Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.<br />
<pre><div class="flex col"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex col"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.</p><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
==== wrap ====<br />
<br />
Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.<br />
<pre><div class="flex wrap"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex wrap"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_center =====<br />
<br />
Cette classe permet de centrer horizontalement des éléments d'un flex.<br />
<pre><div class="flex x_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_evenly =====<br />
<br />
Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.<br />
<pre><div class="flex x_evenly"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_evenly"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== y_center =====<br />
<br />
Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.<br />
<pre><div class="flex y_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex y_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth ð•„ð”¼ð•†ð•Ž but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.</p><br />
</div><br />
<br />
<br />
==== txt-center ====<br />
<br />
Cette classe permet de centrer des éléments.<br />
<pre><div class="txt-center">Contenu divers</div></pre><br />
<pre><p class="txt-center">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-center">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
==== txt-right ====<br />
<br />
Cette classe permet d'aligner les éléments sur la droite.<br />
<pre><div class="txt-right">Contenu divers</div></pre><br />
<pre><p class="txt-right">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-right">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Ajouter de l'espace autour d'un élément ===<br />
<br />
<br />
==== m-20 ====<br />
<br />
Cette classe ajoute un peu d'espace autour d'un élément (20 px).<br />
<pre><div class="m-20"></div></pre><br />
<pre><p class="m-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.</p><br />
<div class="flex"><br />
<p>Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.</p><br />
<div class="m-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?</p><br />
</div><br />
<p>Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.</p><br />
<br />
<br />
==== mb-20 ====<br />
<br />
Cette classe ajoute un peu d'espace sous un élément (20px).<br />
<pre><div class="mb-20"></div></pre><br />
<pre><p class="mb-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="mb-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.</p><br />
<br />
<br />
==== ml-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à gauche d'un élément (20px).<br />
<pre><div class="ml-20"></div></pre><br />
<pre><p class="ml-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<p>Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.</p><br />
<div class="ml-20">[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
<br />
==== mr-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à droite d'un élément (20px).<br />
<pre><div class="mr-20"></div></pre><br />
<pre><p class="mr-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<div class="mr-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.</p><br />
</div><br />
<br />
<br />
==== mt-20 ====<br />
<br />
Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).<br />
<pre><div class="mt-20"></div></pre><br />
<pre><p class="mt-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p><br />
<div class="mt-20">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
<br />
=== Changer la taille d'un élément ===<br />
<br />
<br />
<br />
==== w-full ====<br />
<br />
Fixe la largeur d'un élément à 100%.<br />
<pre><div class="w-full">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-full"style="background-color:pink">Bouh</div><br />
<br />
<br />
==== w-half ====<br />
<br />
Fixe la largeur d'un élément à 50%.<br />
<pre><div class="w-half">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-half">Reaches under door into adjacent room trip owner up in kitchen i want food meow meow you are my owner so here is a dead rat for where is it? i saw that bird i need to bring it home to mommy squirrel! cattt catt cattty cat being a cat. Human give me attention meow sees bird in air, breaks into cage and attacks creature eat a plant, kill a hand or intrigued by the shower, or howl on top of tall thing. Sees bird in air, breaks into cage and attacks creature climb into cupboard and lick the salt off rice cakes kitty kitty pussy cat doll hate dog, but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count. Chase mice nyaa nyaa so get poop stuck in paws jumping out of litter box and run around the house scream meowing and smearing hot cat mud all over for plan steps for world domination cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Lick the plastic bag miaow then turn around and show you my bum shred all toilet paper and spread around the house check cat door for ambush 10 times before coming in i love cuddles so purr. Crash against wall but walk away like nothing happened get scared by sudden appearance of cucumber. Don't nosh on the birds while happily ignoring when being called, yet claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Stare at owner accusingly then wink. Plays league of legends. Slap the dog because cats rule good morning sunshine toy mouse squeak roll over, or eats owners hair then claws head walk on car leaving trail of paw prints on hood and windshield but mesmerizing birds mess up all the toilet paper. Headbutt owner's knee. Behind the couch lick butt and make a weird face floof tum, tickle bum, jellybean footies curly toes sleep everywhere, but not in my bed so flee in terror at cucumber discovered on floor trip owner up in kitchen i want food so stick butt in face. Sniff all the things. I shredded your linens for you lick the curtain just to be annoying but a nice warm laptop for me to sit on chew the plant. Scratch me there, elevator butt purr like an angel for chase after silly colored fish toys around the house scratch the postman wake up lick paw wake up owner meow meow. Step on your keyboard while you're gaming and then turn in a circle why must they do that cats making all the muffins fooled again thinking the dog likes me or claw drapes snuggles up to shoulders or knees and purrs you to sleep. Meow all night having their mate disturbing sleeping humans when owners are asleep, cry for no apparent reason. Give me attention or face the wrath of my claws touch my tail, i shred your hand purrrr and lick master's hand at first then bite because im moody rub face on everything no, you can't close the door, i haven't decided whether or not i wanna go out and meow purrr purr littel cat, little cat purr purr. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly spit up on light gray carpet instead of adjacent linoleum but human give me attention meow. Bury the poop bury it deep let me in let me out let me in let me out let me in let me out who broke this door anyway.</div><br />
<br />
<br />
==== style et width ====<br />
<br />
La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.<br />
<br />
Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).<br />
<br />
ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.<br />
<br />
<pre><div style="width:00px;">Contenu divers</div></pre><br />
<pre><p style="width:00%;">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div><br />
<p style="width:50%">Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?</p><br />
<p style="width:80%">I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.</p><br />
<p style="width:400px">Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.</p><br />
</div><br />
<br />
<br />
==== img-full ====<br />
<br />
Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).<br />
<pre><div class="img-full">[[Lien de l'image]]</div></pre><br />
<br />
Exemple : <br />
<br />
<div class="flex wrap img-full"><br />
<br />
<div><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:50px;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:20%;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
</div><br />
<br />
== Classes relatives à l'impression ==<br />
<br />
<br />
<br />
=== barre_menu ===<br />
<br />
Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.<br />
<br />
<br />
=== no_print ===<br />
<br />
Classe servant à faire disparaître un élément de l'impression.<br />
<pre><p class="no_print">Element invisible dans la version imprimable</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="no_print">Je disparaît.</p><br />
<br />
<br />
=== print_only ===<br />
<br />
Classe servant à ne montrer un élément qu'au moment de l'impression.<br />
<pre><p class="print_only">Element invisible sur le web, visible en impression</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="print_only">Je suis visible à l'impression</p><br />
<br />
<br />
=== div.one_page ===<br />
<br />
Classe à mettre UNIQUEMENT sur une balise div. Cette div fera au maximum la taille d'une page pour l'impression. Cette div n'est effective que pour les grandes largeurs d'écrans afin de ne pas "casser" la page aux yeux des utilisateur dont l'écran est plus petit.<br />
<br />
ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre.<br />
CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.<br />
<pre><div class="one_page"></div></pre><br />
<br />
Exemple : <br />
<br />
<div class="one_page txt-center flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait au maximum la longueur d'une page imprimée.</p><p>La bordure noire n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div><br />
<br />
==== col-w-10 ====<br />
<br />
Classe ne fonctionnant QUE dans div.one_page. Mettre cette classe sur une div répartira son contenu au besoin sur des colonnes de 10 caractères max.<br />
<pre><div class="one_page"><div class="col-w-10"></div></div></pre><br />
<br />
Exemple :<br />
<br />
<div class="one_page"><br />
<p class="txt-center">Je ne rentre pas dans des colonnes.</p><br />
<div class="col-w-10"><br />
Dismember a mouse and then regurgitate parts of it on the family room floor ears back wide eyed and licks paws for destroy house in 5 seconds pee in the shoe. Chew the plant. Play time dismember a mouse and then regurgitate parts of it on the family room floor eat an easter feather as if it were a bird then burp victoriously, but tender cats making all the muffins, cat playing a fiddle in hey diddle diddle? so toy mouse squeak roll over. Yowling nonstop the whole night. Poop in the plant pot ask to be pet then attack owners hand chase dog then run away cat sit like bread and be superior for lick the curtain just to be annoying. Oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap sleep on keyboard. Sleep everywhere, but not in my bed crash against wall but walk away like nothing happened yet meowsiers so rub whiskers on bare skin act innocent. Mew. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip the fat cat sat on the mat bat away with paws and poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat yet if human is on laptop sit on the keyboard try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard or licks your face. Is good you understand your place in my world. Knock over christmas tree find empty spot in cupboard and sleep all day, where is my slave? I'm getting hungry, but take a deep sniff of sock then walk around with mouth half open so rub my belly hiss or cat fur is the new black scream for no reason at 4 am.<br />
<br />
Spend six hours per day washing, but still have a crusty butthole find something else more interesting, but put toy mouse in food bowl run out of litter box at full speed bite off human's toes but under the bed, or knock dish off table head butt cant eat out of my own dish but scratch the furniture. Paw at your fat belly there's a forty year old lady there let us feast but inspect anything brought into the house, so cat not kitten around humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean yet do not try to mix old food with new one to fool me! kitty loves pigs. Give me attention or face the wrath of my claws ask to go outside and ask to come inside and ask to go outside and ask to come inside and really likes hummus, dead stare with ears cocked purr for no reason for always hungry your pillow is now my pet bed. Find empty spot in cupboard and sleep all day why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout push your water glass on the floor. Paw your face to wake you up in the morning bring your owner a dead bird yet hit you unexpectedly pose purrfectly to show my beauty more napping, more napping all the napping is exhausting so ignore the squirrels, you'll never catch them anyway or find something else more interesting. Poop on floor and watch human clean up love me! yet man running from cops stops to pet cats, goes to jail kitty poochy run up and down stairs so mesmerizing birds. Sit on the laptop. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip find empty spot in cupboard and sleep all day or bawl under human beds and attack dog, run away and pretend to be victim. There's a forty year old lady there let us feast lick the plastic bag kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment. Stare at the wall, play with food and get confused by dust purr groom forever, stretch tongue and leave it slightly out, blep, good morning sunshine. Cats making all the muffins funny little cat chirrup noise shaking upright tail when standing next to you and walk on a keyboard, and love you, then bite you i heard this rumor where the humans are our owners, pfft, what do they know?!, so intently sniff hand, yet furrier and even more furrier hairball. Scratch my tummy actually i hate you now fight me fight an alligator and win pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Destroy couch if it fits i sits so purr while eating yet hiss at vacuum cleaner but mewl for food at 4am if it fits, i sits. Walk on keyboard hack, plan steps for world domination chase after silly colored fish toys around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat good now the other hand, too. Kitty power intrigued by the shower spread kitty litter all over house. Walk on a keyboard claws in your leg so cat dog hate mouse eat string barf pillow no baths hate everything or reaches under door into adjacent room. Take a deep sniff of sock then walk around with mouth half open sit in window and stare oooh, a bird, yum and ð•„ð”¼ð•†ð•Ž sitting in a box so prance along on top of the garden fence, annoy the neighbor's dog and make it bark eat an easter feather as if it were a bird then burp victoriously, but tender. Meeeeouw eats owners hair then claws head so whatever licks your face. Then cats take over the world really likes hummus so chase imaginary bugs, so scratch the furniture. Curl up and sleep on the freshly laundered towels play time hey! you there, with the hands so lie on your belly and purr when you are asleep crash against wall but walk away like nothing happened, yet behind the couch. My water bowl is clean and freshly replenished, so i'll drink from the toilet put toy mouse in food bowl run out of litter box at full speed or pretend not to be evil paw at your fat belly. Hiding behind the couch until lured out by a feathery toy climb leg, so ignore the squirrels, you'll never catch them anyway. Wack the mini furry mouse intrigued by the shower Gate keepers of hell wack the mini furry mouse and fart in owners food . With tail in the air meow to be let out.<br />
<br />
Lie in the sink all day kitten is playing with dead mouse, and carrying out surveillance on the neighbour's dog lasers are tiny mice, meowzer. Love me! crash against wall but walk away like nothing happened and mewl for food at 4am drink from the toilet. Headbutt owner's knee ooh, are those your $250 dollar sandals? lemme use that as my litter box so pelt around the house and up and down stairs chasing phantoms asdflkjaertvlkjasntvkjn (sits on keyboard) or leave fur on owners clothes litter box is life. Whatever bite off human's toes. Always ensure to lay down in such a manner that tail can lightly brush human's nose flop over run in circles pee in human's bed until he cleans the litter box. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? make plans to dominate world and then take a nap, for what the heck just happened, something feels fishy for demand to be let outside at once, and expect owner to wait for me as i think about it scratch lick butt and make a weird face eat owner's food. I cry and cry and cry unless you pet me, and then maybe i cry just for fun mess up all the toilet paper it's 3am, time to create some chaos , hunt anything that moves intrigued by the shower. Sleep all day whilst slave is at work, play all night whilst slave is sleeping cats are the world and swat at dog, or cat not kitten around so cattt catt cattty cat being a cat, so fall asleep on the washing machine. Let me in let me out let me in let me out let me in let me out who broke this door anyway snuggles up to shoulders or knees and purrs you to sleep, so caticus cuteicus but why use post when this sofa is here. Catch mouse and gave it as a present has closed eyes but still sees you. Scoot butt on the rug be superior for lick butt and make a weird face cats are the world so lick left leg for ninety minutes, still dirty open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow! human is behind a closed door, emergency! abandoned! meeooowwww!!!. The door is opening! how exciting oh, it's you, meh cat ass trophy touch water with paw then recoil in horror. Throwup on your pillow where is my slave?<br />
</div><br />
</div><br />
<br />
=== gif ===<br />
<br />
Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.<br />
<pre><div class="cadreimg gif">[[lien du gif]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg gif">[[lien du gif]]</p></pre><br />
<br />
Exemple : <br />
<br />
Gif invisible à l'impression.<br />
<div class="gif"><br />
[[Fichier:Exemple_gif.gif]]<br />
</div><br />
<br />
<br />
=== replace_gif ===<br />
<br />
Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.<br />
<pre><div class="cadreimg replace_gif">[[lien de l'image]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg replace_gif">[[lien de l'image]]</p></pre><br />
<br />
Exemple : <br />
<br />
Image visible seulement à l'impression<br />
<div class="replace_gif"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
<br />
</div></div>
Marion
https://fr.wiki.insitu.education//index.php?title=DocModif&diff=8793
DocModif
2024-08-05T15:08:43Z
<p>Marion : /* Navigation */</p>
<hr />
<div><div class="docModif"><br />
<br />
<br />
<br />
<br />
== Liens utiles ==<br />
<br />
<li>[[test_julien]]</li><br />
<br />
<br />
Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) :<br />
[[Spécial:Pages spéciales]]<br />
<br />
Pour uploader des images :<br />
[[Spécial:Téléverser]]<br />
<br />
Lien direct vers la css :<br />
[[MediaWiki:Global.css]]<br />
<br />
Lien direct vers le js :<br />
[[MediaWiki:Global.js]]<br />
<br />
<br />
<br />
== Menus latéraux ==<br />
<br />
<br />
<br />
Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.<br />
<pre>{{:nom_de_l'article}}</pre><br />
<br />
Noms et lien des articles contenant les menus<br />
===Menus du wiki fr===<br />
<ul><br />
<li>[[Menu_Installer]]</li><br />
<li>[[Menu_Configurer]]</li><br />
<li>[[Menu_Concevoir]]</li><br />
<li>[[Menu_Décorer]]</li><br />
<li>[[Menu_Visualiser]]</li><br />
<li>[[Menu_Vendre]]</li><br />
<li>[[Menu_Gabarits]]</li><br />
<li>[[Menu_Avancé]]</li><br />
</ul><br />
===Menus du wiki en===<br />
<ul><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Installer En_Installer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Configurer En_Configurer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Concevoir En_Concevoir]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_D%C3%A9corer En_Décorer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Gabarits En_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=Other_Functions En_Avancé]</li><br />
<br />
</ul><br />
===Menus du wiki es===<br />
<ul><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Installer Es_Installer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Configurer Es_Configurer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Concevoir Es_Concevoir]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Décorer Es_Décorer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Visualiser Es_Visualiser]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Vendre Es_Vendre]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Gabarit Es_Gabarits]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Avancé Es_Avancé]</li><br />
</ul><br />
===Menus du wiki nl===<br />
<ul><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Installer Nl_Installer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Configurer Nl_Configurer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Concevoir Nl_Concevoir]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_D%C3%A9corer Nl_Décorer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Sjablonen_beheren Nl_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<br />
===Menus du wiki de===<br />
https://de.wiki.insitu.education/index.php?title=Hauptseite<br />
<ul><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
== Syntaxe ==<br />
<br />
=== Liens ===<br />
<br />
==== Liens internes ====<br />
<br />
===== Navigation =====<br />
<br />
Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.<br />
<pre>[[nom_de_l'article|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
Il est également possible de donner le lien d'un endroit spécifique dans une page. Pour ce faire, préparez d'abord la section de la page sur laquelle vous voulez arriver, soit en l'indiquant comme titre, soit en lui adjoignant une id.<br />
<pre>===Titre===</pre><br />
<pre><span id="mon_id">Ancre</span></pre><br />
Le lien se fait ensuite de la même façon que n'importe quel autre lien, entre [[]].<br />
<br />
Si le lien est dans la page même :<br />
<pre>[[#Titre|Texte que l'utilisateur voit]]</pre><br />
<pre>[[#mon_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[# Ajouter de l'espace autour d'un élément]]<br />
<br />
Si le lien est vers une section spécifique d'une autre page :<br />
<pre>[[nom_de_l'article#nom_du_titre_ou_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu#Exemple_en_cours|Page très utile]]<br />
<br />
===== Inclusion =====<br />
<br />
====== D'un article ======<br />
<br />
L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.<br />
<pre>{{:nom_de_l'article}}</pre><br />
Exemple:<br />
{{:Menu_Installer}}<br />
<br />
====== D'une image ======<br />
<br />
Pour inclure une image dans un article, il faut d'abord commencer par l'[[Spécial:Téléverser|uploader]].<br />
Une image uploadée est inclue grâce à la syntaxe suivante<br />
<pre>[[File:nom_de_l_image]]</pre><br />
ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même<br />
<pre>[[Image:nom_de_l_image]]</pre><br />
Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien<br />
<pre>[[File:nom_de_l_image|link=]]<br />
[[Image:nom_de_l_image|link=]]</pre><br />
<br />
Exemple :<br />
Sans "|link=" : <br />
[[File:Exemple_img.jpg]]<br />
Avec "|link=" : <br />
[[File:Exemple_img.jpg|link=]]<br />
(cliquez sur chacune des images pour voir la différence)<br />
<br />
==== Liens externes ====<br />
<br />
Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante<br />
<pre>[https//www.adresse_du_site.fr texte visible du lien(optionnel)]</pre><br />
<br />
Exemple :<br />
[https://fr.wikipedia.org/wiki/Tintin Lien très très cool]<br />
<br />
=== Commentaire ===<br />
<br />
Le commentaire permet de retirer de la vue du contenu sur la page, mais de le garder visible lors de l'édition de celle-ci. Peut contenir du texte comme du balisage html.<br />
<pre><!--Ceci est un commentaire--></pre><br />
<br />
Exemple :<br />
<!--Passe une bonne journée !--><br />
<br />
<br />
<br />
== Classes de mise en page ==<br />
<br />
<br />
<br />
=== Classes générales (couleur, gras, etc.) ===<br />
<br />
<br />
==== big ====<br />
<br />
Cette classe permet de mettre un texte en plus grand.<br />
<pre><p class="big">Je suis grand</p></pre><br />
<br />
Exemple :<br />
<p class="big">Je suis grand</p><br />
<br />
==== bold ====<br />
<br />
Cette classe permet de mettre un texte en gras.<br />
<pre><p class="bold">Je suis gras</p></pre><br />
<br />
Exemple :<br />
<p class="bold">Je suis gras</p><br />
<br />
Mettre un bold dans une balise portant une classe bold le mettra en très gras.<br />
<pre><p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p></pre><br />
<br />
Exemple :<br />
<p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p><br />
<br />
==== sup ====<br />
<br />
Cette balise permet de mettre un texte en exposant.<br />
<pre><p>Texte ordinaire<sup>Texte en exposant</sup></p></pre><br />
<br />
Exemple :<br />
<p>Texte ordinaire<sup>Texte en exposant</sup></p><br />
<br />
==== txt-is ====<br />
<br />
Cette classe sert à mettre un texte en orange, "couleur InSitu".<br />
<pre><p class="txt-is">InSitu</p></pre><br />
<br />
Exemple :<br />
<p class="txt-is">InSitu</p><br />
<br />
==== txt-gris ====<br />
<br />
Cette classe sert à mettre un texte en gris.<br />
<pre><p class="txt-gris">Texte gris</p></pre><br />
<br />
Exemple :<br />
<p class="txt-gris">Texte gris</p><br />
<br />
<br />
=== Présentation particulière d'un élément ===<br />
<br />
<br />
==== title_page ====<br />
<br />
Cette classe ne fonctionne uniquement lorsqu'elle est mise sur une balise h1. Elle sert à mettre en avant le titre d'une page.<br />
<pre><h1 class="title_page">Ceci est un titre de page</h1></pre><br />
<br />
===== bg-blue =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond bleu.<br />
<pre><h1 class="title_page bg-blue">Ceci est un titre de page bleu</h1></pre><br />
<br />
===== bg-green =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond vert.<br />
<pre><h1 class="title_page bg-green">Ceci est un titre de page vert</h1></pre><br />
<br />
==== chiffre ====<br />
<br />
Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.<br />
<pre><span class="chiffre">0</span></pre><br />
<br />
Exemple :<br />
<br />
<span class="chiffre">0</span><br />
<br />
==== encadre ====<br />
<br />
Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.<br />
<br />
Pour un paragraphe :<br />
<pre><p class="encadre">Contenu textuel</p></pre><br />
Pour plusieurs paragraphes :<br />
<pre><div class="encadre"><br />
Contenu textuel 1<br />
<br />
Contenu textuel 2<br />
</div></pre><br />
<br />
Exemple : <br />
<p class="encadre mb-20">You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.</p><br />
<div class="encadre"><br />
The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<br />
<br />
Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.<br />
</div><br />
<br />
<br />
<pre><p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p></pre><br />
<p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px"> blabla blabla blabla.</p><br />
<br />
==== info ====<br />
<br />
Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.<br />
<pre><span class="info">i</span></pre><br />
<pre><span class="chiffre info">i</span></pre><br />
<br />
Exemple :<br />
<br />
<p>Info seul : <br />
<span class="info">i</span></p><br />
<p>Info avec la classe "chiffre" :<br />
<span class="chiffre info">i</span></p><br />
<br />
==== important ====<br />
<br />
Cette classe sert à mettre en évidence une information.<br />
<pre><p class="important">Ceci est absolument crucial !</p></pre><br />
<br />
Exemple :<br />
<p class="important">Ceci est absolument crucial !</p><br />
<br />
==== shadow ====<br />
<br />
Cette classe ajoute une ombre autour d'un élément, lui donnant un effet de relief.<br />
<pre><div class="shadow">[[Image]], texte, etc.</div></pre><br />
<br />
Exemple :<br />
<div class="shadow" style="display:inline-block">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Placer les éléments sur la page ===<br />
<br />
<br />
==== flex ====<br />
<br />
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.<br />
<br />
ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !<br />
<br />
ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.<br />
<br />
ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.<br />
<br />
<pre><div class="flex"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
</div></pre><br />
<br />
Exemple :<br />
<div class="flex"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.</p><br />
</div><br />
<br />
<br />
==== Classes relatives au flex ====<br />
<br />
ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.<br />
<br />
===== col =====<br />
<br />
Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.<br />
<pre><div class="flex col"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex col"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.</p><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
==== wrap ====<br />
<br />
Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.<br />
<pre><div class="flex wrap"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex wrap"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_center =====<br />
<br />
Cette classe permet de centrer horizontalement des éléments d'un flex.<br />
<pre><div class="flex x_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_evenly =====<br />
<br />
Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.<br />
<pre><div class="flex x_evenly"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_evenly"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== y_center =====<br />
<br />
Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.<br />
<pre><div class="flex y_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex y_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth ð•„ð”¼ð•†ð•Ž but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.</p><br />
</div><br />
<br />
<br />
==== txt-center ====<br />
<br />
Cette classe permet de centrer des éléments.<br />
<pre><div class="txt-center">Contenu divers</div></pre><br />
<pre><p class="txt-center">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-center">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
==== txt-right ====<br />
<br />
Cette classe permet d'aligner les éléments sur la droite.<br />
<pre><div class="txt-right">Contenu divers</div></pre><br />
<pre><p class="txt-right">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-right">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Ajouter de l'espace autour d'un élément ===<br />
<br />
<br />
==== m-20 ====<br />
<br />
Cette classe ajoute un peu d'espace autour d'un élément (20 px).<br />
<pre><div class="m-20"></div></pre><br />
<pre><p class="m-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.</p><br />
<div class="flex"><br />
<p>Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.</p><br />
<div class="m-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?</p><br />
</div><br />
<p>Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.</p><br />
<br />
<br />
==== mb-20 ====<br />
<br />
Cette classe ajoute un peu d'espace sous un élément (20px).<br />
<pre><div class="mb-20"></div></pre><br />
<pre><p class="mb-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="mb-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.</p><br />
<br />
<br />
==== ml-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à gauche d'un élément (20px).<br />
<pre><div class="ml-20"></div></pre><br />
<pre><p class="ml-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<p>Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.</p><br />
<div class="ml-20">[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
<br />
==== mr-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à droite d'un élément (20px).<br />
<pre><div class="mr-20"></div></pre><br />
<pre><p class="mr-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<div class="mr-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.</p><br />
</div><br />
<br />
<br />
==== mt-20 ====<br />
<br />
Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).<br />
<pre><div class="mt-20"></div></pre><br />
<pre><p class="mt-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p><br />
<div class="mt-20">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
<br />
=== Changer la taille d'un élément ===<br />
<br />
<br />
<br />
==== w-full ====<br />
<br />
Fixe la largeur d'un élément à 100%.<br />
<pre><div class="w-full">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-full"style="background-color:pink">Bouh</div><br />
<br />
<br />
==== w-half ====<br />
<br />
Fixe la largeur d'un élément à 50%.<br />
<pre><div class="w-half">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-half">Reaches under door into adjacent room trip owner up in kitchen i want food meow meow you are my owner so here is a dead rat for where is it? i saw that bird i need to bring it home to mommy squirrel! cattt catt cattty cat being a cat. Human give me attention meow sees bird in air, breaks into cage and attacks creature eat a plant, kill a hand or intrigued by the shower, or howl on top of tall thing. Sees bird in air, breaks into cage and attacks creature climb into cupboard and lick the salt off rice cakes kitty kitty pussy cat doll hate dog, but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count. Chase mice nyaa nyaa so get poop stuck in paws jumping out of litter box and run around the house scream meowing and smearing hot cat mud all over for plan steps for world domination cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Lick the plastic bag miaow then turn around and show you my bum shred all toilet paper and spread around the house check cat door for ambush 10 times before coming in i love cuddles so purr. Crash against wall but walk away like nothing happened get scared by sudden appearance of cucumber. Don't nosh on the birds while happily ignoring when being called, yet claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Stare at owner accusingly then wink. Plays league of legends. Slap the dog because cats rule good morning sunshine toy mouse squeak roll over, or eats owners hair then claws head walk on car leaving trail of paw prints on hood and windshield but mesmerizing birds mess up all the toilet paper. Headbutt owner's knee. Behind the couch lick butt and make a weird face floof tum, tickle bum, jellybean footies curly toes sleep everywhere, but not in my bed so flee in terror at cucumber discovered on floor trip owner up in kitchen i want food so stick butt in face. Sniff all the things. I shredded your linens for you lick the curtain just to be annoying but a nice warm laptop for me to sit on chew the plant. Scratch me there, elevator butt purr like an angel for chase after silly colored fish toys around the house scratch the postman wake up lick paw wake up owner meow meow. Step on your keyboard while you're gaming and then turn in a circle why must they do that cats making all the muffins fooled again thinking the dog likes me or claw drapes snuggles up to shoulders or knees and purrs you to sleep. Meow all night having their mate disturbing sleeping humans when owners are asleep, cry for no apparent reason. Give me attention or face the wrath of my claws touch my tail, i shred your hand purrrr and lick master's hand at first then bite because im moody rub face on everything no, you can't close the door, i haven't decided whether or not i wanna go out and meow purrr purr littel cat, little cat purr purr. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly spit up on light gray carpet instead of adjacent linoleum but human give me attention meow. Bury the poop bury it deep let me in let me out let me in let me out let me in let me out who broke this door anyway.</div><br />
<br />
<br />
==== style et width ====<br />
<br />
La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.<br />
<br />
Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).<br />
<br />
ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.<br />
<br />
<pre><div style="width:00px;">Contenu divers</div></pre><br />
<pre><p style="width:00%;">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div><br />
<p style="width:50%">Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?</p><br />
<p style="width:80%">I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.</p><br />
<p style="width:400px">Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.</p><br />
</div><br />
<br />
<br />
==== img-full ====<br />
<br />
Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).<br />
<pre><div class="img-full">[[Lien de l'image]]</div></pre><br />
<br />
Exemple : <br />
<br />
<div class="flex wrap img-full"><br />
<br />
<div><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:50px;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:20%;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
</div><br />
<br />
== Classes relatives à l'impression ==<br />
<br />
<br />
<br />
=== barre_menu ===<br />
<br />
Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.<br />
<br />
<br />
=== no_print ===<br />
<br />
Classe servant à faire disparaître un élément de l'impression.<br />
<pre><p class="no_print">Element invisible dans la version imprimable</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="no_print">Je disparaît.</p><br />
<br />
<br />
=== print_only ===<br />
<br />
Classe servant à ne montrer un élément qu'au moment de l'impression.<br />
<pre><p class="print_only">Element invisible sur le web, visible en impression</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="print_only">Je suis visible à l'impression</p><br />
<br />
<br />
=== div.one_page ===<br />
<br />
Classe à mettre UNIQUEMENT sur une balise div. Cette div fera au maximum la taille d'une page pour l'impression. Cette div n'est effective que pour les grandes largeurs d'écrans afin de ne pas "casser" la page aux yeux des utilisateur dont l'écran est plus petit.<br />
<br />
ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre.<br />
CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.<br />
<pre><div class="one_page"></div></pre><br />
<br />
Exemple : <br />
<br />
<div class="one_page txt-center flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait au maximum la longueur d'une page imprimée.</p><p>La bordure noire n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div><br />
<br />
==== col-w-10 ====<br />
<br />
Classe ne fonctionnant QUE dans div.one_page. Mettre cette classe sur une div répartira son contenu au besoin sur des colonnes de 10 caractères max.<br />
<pre><div class="one_page"><div class="col-w-10"></div></div></pre><br />
<br />
Exemple :<br />
<br />
<div class="one_page"><br />
<p class="txt-center">Je ne rentre pas dans des colonnes.</p><br />
<div class="col-w-10"><br />
Dismember a mouse and then regurgitate parts of it on the family room floor ears back wide eyed and licks paws for destroy house in 5 seconds pee in the shoe. Chew the plant. Play time dismember a mouse and then regurgitate parts of it on the family room floor eat an easter feather as if it were a bird then burp victoriously, but tender cats making all the muffins, cat playing a fiddle in hey diddle diddle? so toy mouse squeak roll over. Yowling nonstop the whole night. Poop in the plant pot ask to be pet then attack owners hand chase dog then run away cat sit like bread and be superior for lick the curtain just to be annoying. Oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap sleep on keyboard. Sleep everywhere, but not in my bed crash against wall but walk away like nothing happened yet meowsiers so rub whiskers on bare skin act innocent. Mew. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip the fat cat sat on the mat bat away with paws and poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat yet if human is on laptop sit on the keyboard try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard or licks your face. Is good you understand your place in my world. Knock over christmas tree find empty spot in cupboard and sleep all day, where is my slave? I'm getting hungry, but take a deep sniff of sock then walk around with mouth half open so rub my belly hiss or cat fur is the new black scream for no reason at 4 am.<br />
<br />
Spend six hours per day washing, but still have a crusty butthole find something else more interesting, but put toy mouse in food bowl run out of litter box at full speed bite off human's toes but under the bed, or knock dish off table head butt cant eat out of my own dish but scratch the furniture. Paw at your fat belly there's a forty year old lady there let us feast but inspect anything brought into the house, so cat not kitten around humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean yet do not try to mix old food with new one to fool me! kitty loves pigs. Give me attention or face the wrath of my claws ask to go outside and ask to come inside and ask to go outside and ask to come inside and really likes hummus, dead stare with ears cocked purr for no reason for always hungry your pillow is now my pet bed. Find empty spot in cupboard and sleep all day why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout push your water glass on the floor. Paw your face to wake you up in the morning bring your owner a dead bird yet hit you unexpectedly pose purrfectly to show my beauty more napping, more napping all the napping is exhausting so ignore the squirrels, you'll never catch them anyway or find something else more interesting. Poop on floor and watch human clean up love me! yet man running from cops stops to pet cats, goes to jail kitty poochy run up and down stairs so mesmerizing birds. Sit on the laptop. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip find empty spot in cupboard and sleep all day or bawl under human beds and attack dog, run away and pretend to be victim. There's a forty year old lady there let us feast lick the plastic bag kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment. Stare at the wall, play with food and get confused by dust purr groom forever, stretch tongue and leave it slightly out, blep, good morning sunshine. Cats making all the muffins funny little cat chirrup noise shaking upright tail when standing next to you and walk on a keyboard, and love you, then bite you i heard this rumor where the humans are our owners, pfft, what do they know?!, so intently sniff hand, yet furrier and even more furrier hairball. Scratch my tummy actually i hate you now fight me fight an alligator and win pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Destroy couch if it fits i sits so purr while eating yet hiss at vacuum cleaner but mewl for food at 4am if it fits, i sits. Walk on keyboard hack, plan steps for world domination chase after silly colored fish toys around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat good now the other hand, too. Kitty power intrigued by the shower spread kitty litter all over house. Walk on a keyboard claws in your leg so cat dog hate mouse eat string barf pillow no baths hate everything or reaches under door into adjacent room. Take a deep sniff of sock then walk around with mouth half open sit in window and stare oooh, a bird, yum and ð•„ð”¼ð•†ð•Ž sitting in a box so prance along on top of the garden fence, annoy the neighbor's dog and make it bark eat an easter feather as if it were a bird then burp victoriously, but tender. Meeeeouw eats owners hair then claws head so whatever licks your face. Then cats take over the world really likes hummus so chase imaginary bugs, so scratch the furniture. Curl up and sleep on the freshly laundered towels play time hey! you there, with the hands so lie on your belly and purr when you are asleep crash against wall but walk away like nothing happened, yet behind the couch. My water bowl is clean and freshly replenished, so i'll drink from the toilet put toy mouse in food bowl run out of litter box at full speed or pretend not to be evil paw at your fat belly. Hiding behind the couch until lured out by a feathery toy climb leg, so ignore the squirrels, you'll never catch them anyway. Wack the mini furry mouse intrigued by the shower Gate keepers of hell wack the mini furry mouse and fart in owners food . With tail in the air meow to be let out.<br />
<br />
Lie in the sink all day kitten is playing with dead mouse, and carrying out surveillance on the neighbour's dog lasers are tiny mice, meowzer. Love me! crash against wall but walk away like nothing happened and mewl for food at 4am drink from the toilet. Headbutt owner's knee ooh, are those your $250 dollar sandals? lemme use that as my litter box so pelt around the house and up and down stairs chasing phantoms asdflkjaertvlkjasntvkjn (sits on keyboard) or leave fur on owners clothes litter box is life. Whatever bite off human's toes. Always ensure to lay down in such a manner that tail can lightly brush human's nose flop over run in circles pee in human's bed until he cleans the litter box. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? make plans to dominate world and then take a nap, for what the heck just happened, something feels fishy for demand to be let outside at once, and expect owner to wait for me as i think about it scratch lick butt and make a weird face eat owner's food. I cry and cry and cry unless you pet me, and then maybe i cry just for fun mess up all the toilet paper it's 3am, time to create some chaos , hunt anything that moves intrigued by the shower. Sleep all day whilst slave is at work, play all night whilst slave is sleeping cats are the world and swat at dog, or cat not kitten around so cattt catt cattty cat being a cat, so fall asleep on the washing machine. Let me in let me out let me in let me out let me in let me out who broke this door anyway snuggles up to shoulders or knees and purrs you to sleep, so caticus cuteicus but why use post when this sofa is here. Catch mouse and gave it as a present has closed eyes but still sees you. Scoot butt on the rug be superior for lick butt and make a weird face cats are the world so lick left leg for ninety minutes, still dirty open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow! human is behind a closed door, emergency! abandoned! meeooowwww!!!. The door is opening! how exciting oh, it's you, meh cat ass trophy touch water with paw then recoil in horror. Throwup on your pillow where is my slave?<br />
</div><br />
</div><br />
<br />
=== gif ===<br />
<br />
Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.<br />
<pre><div class="cadreimg gif">[[lien du gif]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg gif">[[lien du gif]]</p></pre><br />
<br />
Exemple : <br />
<br />
Gif invisible à l'impression.<br />
<div class="gif"><br />
[[Fichier:Exemple_gif.gif]]<br />
</div><br />
<br />
<br />
=== replace_gif ===<br />
<br />
Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.<br />
<pre><div class="cadreimg replace_gif">[[lien de l'image]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg replace_gif">[[lien de l'image]]</p></pre><br />
<br />
Exemple : <br />
<br />
Image visible seulement à l'impression<br />
<div class="replace_gif"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
<br />
</div></div>
Marion
https://fr.wiki.insitu.education//index.php?title=DocModif&diff=8792
DocModif
2024-08-05T15:07:57Z
<p>Marion : /* Navigation */</p>
<hr />
<div><div class="docModif"><br />
<br />
<br />
<br />
<br />
== Liens utiles ==<br />
<br />
<li>[[test_julien]]</li><br />
<br />
<br />
Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) :<br />
[[Spécial:Pages spéciales]]<br />
<br />
Pour uploader des images :<br />
[[Spécial:Téléverser]]<br />
<br />
Lien direct vers la css :<br />
[[MediaWiki:Global.css]]<br />
<br />
Lien direct vers le js :<br />
[[MediaWiki:Global.js]]<br />
<br />
<br />
<br />
== Menus latéraux ==<br />
<br />
<br />
<br />
Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.<br />
<pre>{{:nom_de_l'article}}</pre><br />
<br />
Noms et lien des articles contenant les menus<br />
===Menus du wiki fr===<br />
<ul><br />
<li>[[Menu_Installer]]</li><br />
<li>[[Menu_Configurer]]</li><br />
<li>[[Menu_Concevoir]]</li><br />
<li>[[Menu_Décorer]]</li><br />
<li>[[Menu_Visualiser]]</li><br />
<li>[[Menu_Vendre]]</li><br />
<li>[[Menu_Gabarits]]</li><br />
<li>[[Menu_Avancé]]</li><br />
</ul><br />
===Menus du wiki en===<br />
<ul><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Installer En_Installer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Configurer En_Configurer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Concevoir En_Concevoir]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_D%C3%A9corer En_Décorer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Gabarits En_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=Other_Functions En_Avancé]</li><br />
<br />
</ul><br />
===Menus du wiki es===<br />
<ul><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Installer Es_Installer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Configurer Es_Configurer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Concevoir Es_Concevoir]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Décorer Es_Décorer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Visualiser Es_Visualiser]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Vendre Es_Vendre]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Gabarit Es_Gabarits]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Avancé Es_Avancé]</li><br />
</ul><br />
===Menus du wiki nl===<br />
<ul><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Installer Nl_Installer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Configurer Nl_Configurer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Concevoir Nl_Concevoir]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_D%C3%A9corer Nl_Décorer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Sjablonen_beheren Nl_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<br />
===Menus du wiki de===<br />
https://de.wiki.insitu.education/index.php?title=Hauptseite<br />
<ul><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
== Syntaxe ==<br />
<br />
=== Liens ===<br />
<br />
==== Liens internes ====<br />
<br />
===== Navigation =====<br />
<br />
Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.<br />
<pre>[[nom_de_l'article|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
Il est également possible de donner le lien d'un endroit spécifique dans une page. Pour ce faire, préparez d'abord la section de la page sur laquelle vous voulez arriver, soit en l'indiquant comme titre, soit en lui adjoignant une id.<br />
<pre>===Titre===</pre><br />
<pre><span id="mon_id">Ancre</span></pre><br />
Le lien se fait ensuite de la même façon que n'importe quel autre lien, entre [[]].<br />
<br />
Si le lien est dans la page même :<br />
<pre>[[#Titre|Texte que l'utilisateur voit]]</pre><br />
<pre>[[#mon_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[#Ajouter de l'espace autour d'un élément]]<br />
<br />
Si le lien est vers une section spécifique d'une autre page :<br />
<pre>[[nom_de_l'article#nom_du_titre_ou_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu#Exemple_en_cours|Page très utile]]<br />
<br />
===== Inclusion =====<br />
<br />
====== D'un article ======<br />
<br />
L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.<br />
<pre>{{:nom_de_l'article}}</pre><br />
Exemple:<br />
{{:Menu_Installer}}<br />
<br />
====== D'une image ======<br />
<br />
Pour inclure une image dans un article, il faut d'abord commencer par l'[[Spécial:Téléverser|uploader]].<br />
Une image uploadée est inclue grâce à la syntaxe suivante<br />
<pre>[[File:nom_de_l_image]]</pre><br />
ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même<br />
<pre>[[Image:nom_de_l_image]]</pre><br />
Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien<br />
<pre>[[File:nom_de_l_image|link=]]<br />
[[Image:nom_de_l_image|link=]]</pre><br />
<br />
Exemple :<br />
Sans "|link=" : <br />
[[File:Exemple_img.jpg]]<br />
Avec "|link=" : <br />
[[File:Exemple_img.jpg|link=]]<br />
(cliquez sur chacune des images pour voir la différence)<br />
<br />
==== Liens externes ====<br />
<br />
Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante<br />
<pre>[https//www.adresse_du_site.fr texte visible du lien(optionnel)]</pre><br />
<br />
Exemple :<br />
[https://fr.wikipedia.org/wiki/Tintin Lien très très cool]<br />
<br />
=== Commentaire ===<br />
<br />
Le commentaire permet de retirer de la vue du contenu sur la page, mais de le garder visible lors de l'édition de celle-ci. Peut contenir du texte comme du balisage html.<br />
<pre><!--Ceci est un commentaire--></pre><br />
<br />
Exemple :<br />
<!--Passe une bonne journée !--><br />
<br />
<br />
<br />
== Classes de mise en page ==<br />
<br />
<br />
<br />
=== Classes générales (couleur, gras, etc.) ===<br />
<br />
<br />
==== big ====<br />
<br />
Cette classe permet de mettre un texte en plus grand.<br />
<pre><p class="big">Je suis grand</p></pre><br />
<br />
Exemple :<br />
<p class="big">Je suis grand</p><br />
<br />
==== bold ====<br />
<br />
Cette classe permet de mettre un texte en gras.<br />
<pre><p class="bold">Je suis gras</p></pre><br />
<br />
Exemple :<br />
<p class="bold">Je suis gras</p><br />
<br />
Mettre un bold dans une balise portant une classe bold le mettra en très gras.<br />
<pre><p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p></pre><br />
<br />
Exemple :<br />
<p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p><br />
<br />
==== sup ====<br />
<br />
Cette balise permet de mettre un texte en exposant.<br />
<pre><p>Texte ordinaire<sup>Texte en exposant</sup></p></pre><br />
<br />
Exemple :<br />
<p>Texte ordinaire<sup>Texte en exposant</sup></p><br />
<br />
==== txt-is ====<br />
<br />
Cette classe sert à mettre un texte en orange, "couleur InSitu".<br />
<pre><p class="txt-is">InSitu</p></pre><br />
<br />
Exemple :<br />
<p class="txt-is">InSitu</p><br />
<br />
==== txt-gris ====<br />
<br />
Cette classe sert à mettre un texte en gris.<br />
<pre><p class="txt-gris">Texte gris</p></pre><br />
<br />
Exemple :<br />
<p class="txt-gris">Texte gris</p><br />
<br />
<br />
=== Présentation particulière d'un élément ===<br />
<br />
<br />
==== title_page ====<br />
<br />
Cette classe ne fonctionne uniquement lorsqu'elle est mise sur une balise h1. Elle sert à mettre en avant le titre d'une page.<br />
<pre><h1 class="title_page">Ceci est un titre de page</h1></pre><br />
<br />
===== bg-blue =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond bleu.<br />
<pre><h1 class="title_page bg-blue">Ceci est un titre de page bleu</h1></pre><br />
<br />
===== bg-green =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond vert.<br />
<pre><h1 class="title_page bg-green">Ceci est un titre de page vert</h1></pre><br />
<br />
==== chiffre ====<br />
<br />
Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.<br />
<pre><span class="chiffre">0</span></pre><br />
<br />
Exemple :<br />
<br />
<span class="chiffre">0</span><br />
<br />
==== encadre ====<br />
<br />
Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.<br />
<br />
Pour un paragraphe :<br />
<pre><p class="encadre">Contenu textuel</p></pre><br />
Pour plusieurs paragraphes :<br />
<pre><div class="encadre"><br />
Contenu textuel 1<br />
<br />
Contenu textuel 2<br />
</div></pre><br />
<br />
Exemple : <br />
<p class="encadre mb-20">You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.</p><br />
<div class="encadre"><br />
The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<br />
<br />
Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.<br />
</div><br />
<br />
<br />
<pre><p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p></pre><br />
<p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px"> blabla blabla blabla.</p><br />
<br />
==== info ====<br />
<br />
Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.<br />
<pre><span class="info">i</span></pre><br />
<pre><span class="chiffre info">i</span></pre><br />
<br />
Exemple :<br />
<br />
<p>Info seul : <br />
<span class="info">i</span></p><br />
<p>Info avec la classe "chiffre" :<br />
<span class="chiffre info">i</span></p><br />
<br />
==== important ====<br />
<br />
Cette classe sert à mettre en évidence une information.<br />
<pre><p class="important">Ceci est absolument crucial !</p></pre><br />
<br />
Exemple :<br />
<p class="important">Ceci est absolument crucial !</p><br />
<br />
==== shadow ====<br />
<br />
Cette classe ajoute une ombre autour d'un élément, lui donnant un effet de relief.<br />
<pre><div class="shadow">[[Image]], texte, etc.</div></pre><br />
<br />
Exemple :<br />
<div class="shadow" style="display:inline-block">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Placer les éléments sur la page ===<br />
<br />
<br />
==== flex ====<br />
<br />
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.<br />
<br />
ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !<br />
<br />
ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.<br />
<br />
ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.<br />
<br />
<pre><div class="flex"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
</div></pre><br />
<br />
Exemple :<br />
<div class="flex"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.</p><br />
</div><br />
<br />
<br />
==== Classes relatives au flex ====<br />
<br />
ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.<br />
<br />
===== col =====<br />
<br />
Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.<br />
<pre><div class="flex col"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex col"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.</p><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
==== wrap ====<br />
<br />
Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.<br />
<pre><div class="flex wrap"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex wrap"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_center =====<br />
<br />
Cette classe permet de centrer horizontalement des éléments d'un flex.<br />
<pre><div class="flex x_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_evenly =====<br />
<br />
Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.<br />
<pre><div class="flex x_evenly"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_evenly"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== y_center =====<br />
<br />
Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.<br />
<pre><div class="flex y_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex y_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth ð•„ð”¼ð•†ð•Ž but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.</p><br />
</div><br />
<br />
<br />
==== txt-center ====<br />
<br />
Cette classe permet de centrer des éléments.<br />
<pre><div class="txt-center">Contenu divers</div></pre><br />
<pre><p class="txt-center">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-center">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
==== txt-right ====<br />
<br />
Cette classe permet d'aligner les éléments sur la droite.<br />
<pre><div class="txt-right">Contenu divers</div></pre><br />
<pre><p class="txt-right">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-right">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Ajouter de l'espace autour d'un élément ===<br />
<br />
<br />
==== m-20 ====<br />
<br />
Cette classe ajoute un peu d'espace autour d'un élément (20 px).<br />
<pre><div class="m-20"></div></pre><br />
<pre><p class="m-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.</p><br />
<div class="flex"><br />
<p>Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.</p><br />
<div class="m-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?</p><br />
</div><br />
<p>Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.</p><br />
<br />
<br />
==== mb-20 ====<br />
<br />
Cette classe ajoute un peu d'espace sous un élément (20px).<br />
<pre><div class="mb-20"></div></pre><br />
<pre><p class="mb-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="mb-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.</p><br />
<br />
<br />
==== ml-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à gauche d'un élément (20px).<br />
<pre><div class="ml-20"></div></pre><br />
<pre><p class="ml-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<p>Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.</p><br />
<div class="ml-20">[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
<br />
==== mr-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à droite d'un élément (20px).<br />
<pre><div class="mr-20"></div></pre><br />
<pre><p class="mr-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<div class="mr-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.</p><br />
</div><br />
<br />
<br />
==== mt-20 ====<br />
<br />
Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).<br />
<pre><div class="mt-20"></div></pre><br />
<pre><p class="mt-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p><br />
<div class="mt-20">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
<br />
=== Changer la taille d'un élément ===<br />
<br />
<br />
<br />
==== w-full ====<br />
<br />
Fixe la largeur d'un élément à 100%.<br />
<pre><div class="w-full">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-full"style="background-color:pink">Bouh</div><br />
<br />
<br />
==== w-half ====<br />
<br />
Fixe la largeur d'un élément à 50%.<br />
<pre><div class="w-half">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-half">Reaches under door into adjacent room trip owner up in kitchen i want food meow meow you are my owner so here is a dead rat for where is it? i saw that bird i need to bring it home to mommy squirrel! cattt catt cattty cat being a cat. Human give me attention meow sees bird in air, breaks into cage and attacks creature eat a plant, kill a hand or intrigued by the shower, or howl on top of tall thing. Sees bird in air, breaks into cage and attacks creature climb into cupboard and lick the salt off rice cakes kitty kitty pussy cat doll hate dog, but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count. Chase mice nyaa nyaa so get poop stuck in paws jumping out of litter box and run around the house scream meowing and smearing hot cat mud all over for plan steps for world domination cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Lick the plastic bag miaow then turn around and show you my bum shred all toilet paper and spread around the house check cat door for ambush 10 times before coming in i love cuddles so purr. Crash against wall but walk away like nothing happened get scared by sudden appearance of cucumber. Don't nosh on the birds while happily ignoring when being called, yet claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Stare at owner accusingly then wink. Plays league of legends. Slap the dog because cats rule good morning sunshine toy mouse squeak roll over, or eats owners hair then claws head walk on car leaving trail of paw prints on hood and windshield but mesmerizing birds mess up all the toilet paper. Headbutt owner's knee. Behind the couch lick butt and make a weird face floof tum, tickle bum, jellybean footies curly toes sleep everywhere, but not in my bed so flee in terror at cucumber discovered on floor trip owner up in kitchen i want food so stick butt in face. Sniff all the things. I shredded your linens for you lick the curtain just to be annoying but a nice warm laptop for me to sit on chew the plant. Scratch me there, elevator butt purr like an angel for chase after silly colored fish toys around the house scratch the postman wake up lick paw wake up owner meow meow. Step on your keyboard while you're gaming and then turn in a circle why must they do that cats making all the muffins fooled again thinking the dog likes me or claw drapes snuggles up to shoulders or knees and purrs you to sleep. Meow all night having their mate disturbing sleeping humans when owners are asleep, cry for no apparent reason. Give me attention or face the wrath of my claws touch my tail, i shred your hand purrrr and lick master's hand at first then bite because im moody rub face on everything no, you can't close the door, i haven't decided whether or not i wanna go out and meow purrr purr littel cat, little cat purr purr. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly spit up on light gray carpet instead of adjacent linoleum but human give me attention meow. Bury the poop bury it deep let me in let me out let me in let me out let me in let me out who broke this door anyway.</div><br />
<br />
<br />
==== style et width ====<br />
<br />
La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.<br />
<br />
Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).<br />
<br />
ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.<br />
<br />
<pre><div style="width:00px;">Contenu divers</div></pre><br />
<pre><p style="width:00%;">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div><br />
<p style="width:50%">Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?</p><br />
<p style="width:80%">I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.</p><br />
<p style="width:400px">Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.</p><br />
</div><br />
<br />
<br />
==== img-full ====<br />
<br />
Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).<br />
<pre><div class="img-full">[[Lien de l'image]]</div></pre><br />
<br />
Exemple : <br />
<br />
<div class="flex wrap img-full"><br />
<br />
<div><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:50px;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:20%;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
</div><br />
<br />
== Classes relatives à l'impression ==<br />
<br />
<br />
<br />
=== barre_menu ===<br />
<br />
Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.<br />
<br />
<br />
=== no_print ===<br />
<br />
Classe servant à faire disparaître un élément de l'impression.<br />
<pre><p class="no_print">Element invisible dans la version imprimable</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="no_print">Je disparaît.</p><br />
<br />
<br />
=== print_only ===<br />
<br />
Classe servant à ne montrer un élément qu'au moment de l'impression.<br />
<pre><p class="print_only">Element invisible sur le web, visible en impression</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="print_only">Je suis visible à l'impression</p><br />
<br />
<br />
=== div.one_page ===<br />
<br />
Classe à mettre UNIQUEMENT sur une balise div. Cette div fera au maximum la taille d'une page pour l'impression. Cette div n'est effective que pour les grandes largeurs d'écrans afin de ne pas "casser" la page aux yeux des utilisateur dont l'écran est plus petit.<br />
<br />
ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre.<br />
CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.<br />
<pre><div class="one_page"></div></pre><br />
<br />
Exemple : <br />
<br />
<div class="one_page txt-center flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait au maximum la longueur d'une page imprimée.</p><p>La bordure noire n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div><br />
<br />
==== col-w-10 ====<br />
<br />
Classe ne fonctionnant QUE dans div.one_page. Mettre cette classe sur une div répartira son contenu au besoin sur des colonnes de 10 caractères max.<br />
<pre><div class="one_page"><div class="col-w-10"></div></div></pre><br />
<br />
Exemple :<br />
<br />
<div class="one_page"><br />
<p class="txt-center">Je ne rentre pas dans des colonnes.</p><br />
<div class="col-w-10"><br />
Dismember a mouse and then regurgitate parts of it on the family room floor ears back wide eyed and licks paws for destroy house in 5 seconds pee in the shoe. Chew the plant. Play time dismember a mouse and then regurgitate parts of it on the family room floor eat an easter feather as if it were a bird then burp victoriously, but tender cats making all the muffins, cat playing a fiddle in hey diddle diddle? so toy mouse squeak roll over. Yowling nonstop the whole night. Poop in the plant pot ask to be pet then attack owners hand chase dog then run away cat sit like bread and be superior for lick the curtain just to be annoying. Oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap sleep on keyboard. Sleep everywhere, but not in my bed crash against wall but walk away like nothing happened yet meowsiers so rub whiskers on bare skin act innocent. Mew. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip the fat cat sat on the mat bat away with paws and poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat yet if human is on laptop sit on the keyboard try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard or licks your face. Is good you understand your place in my world. Knock over christmas tree find empty spot in cupboard and sleep all day, where is my slave? I'm getting hungry, but take a deep sniff of sock then walk around with mouth half open so rub my belly hiss or cat fur is the new black scream for no reason at 4 am.<br />
<br />
Spend six hours per day washing, but still have a crusty butthole find something else more interesting, but put toy mouse in food bowl run out of litter box at full speed bite off human's toes but under the bed, or knock dish off table head butt cant eat out of my own dish but scratch the furniture. Paw at your fat belly there's a forty year old lady there let us feast but inspect anything brought into the house, so cat not kitten around humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean yet do not try to mix old food with new one to fool me! kitty loves pigs. Give me attention or face the wrath of my claws ask to go outside and ask to come inside and ask to go outside and ask to come inside and really likes hummus, dead stare with ears cocked purr for no reason for always hungry your pillow is now my pet bed. Find empty spot in cupboard and sleep all day why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout push your water glass on the floor. Paw your face to wake you up in the morning bring your owner a dead bird yet hit you unexpectedly pose purrfectly to show my beauty more napping, more napping all the napping is exhausting so ignore the squirrels, you'll never catch them anyway or find something else more interesting. Poop on floor and watch human clean up love me! yet man running from cops stops to pet cats, goes to jail kitty poochy run up and down stairs so mesmerizing birds. Sit on the laptop. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip find empty spot in cupboard and sleep all day or bawl under human beds and attack dog, run away and pretend to be victim. There's a forty year old lady there let us feast lick the plastic bag kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment. Stare at the wall, play with food and get confused by dust purr groom forever, stretch tongue and leave it slightly out, blep, good morning sunshine. Cats making all the muffins funny little cat chirrup noise shaking upright tail when standing next to you and walk on a keyboard, and love you, then bite you i heard this rumor where the humans are our owners, pfft, what do they know?!, so intently sniff hand, yet furrier and even more furrier hairball. Scratch my tummy actually i hate you now fight me fight an alligator and win pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Destroy couch if it fits i sits so purr while eating yet hiss at vacuum cleaner but mewl for food at 4am if it fits, i sits. Walk on keyboard hack, plan steps for world domination chase after silly colored fish toys around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat good now the other hand, too. Kitty power intrigued by the shower spread kitty litter all over house. Walk on a keyboard claws in your leg so cat dog hate mouse eat string barf pillow no baths hate everything or reaches under door into adjacent room. Take a deep sniff of sock then walk around with mouth half open sit in window and stare oooh, a bird, yum and ð•„ð”¼ð•†ð•Ž sitting in a box so prance along on top of the garden fence, annoy the neighbor's dog and make it bark eat an easter feather as if it were a bird then burp victoriously, but tender. Meeeeouw eats owners hair then claws head so whatever licks your face. Then cats take over the world really likes hummus so chase imaginary bugs, so scratch the furniture. Curl up and sleep on the freshly laundered towels play time hey! you there, with the hands so lie on your belly and purr when you are asleep crash against wall but walk away like nothing happened, yet behind the couch. My water bowl is clean and freshly replenished, so i'll drink from the toilet put toy mouse in food bowl run out of litter box at full speed or pretend not to be evil paw at your fat belly. Hiding behind the couch until lured out by a feathery toy climb leg, so ignore the squirrels, you'll never catch them anyway. Wack the mini furry mouse intrigued by the shower Gate keepers of hell wack the mini furry mouse and fart in owners food . With tail in the air meow to be let out.<br />
<br />
Lie in the sink all day kitten is playing with dead mouse, and carrying out surveillance on the neighbour's dog lasers are tiny mice, meowzer. Love me! crash against wall but walk away like nothing happened and mewl for food at 4am drink from the toilet. Headbutt owner's knee ooh, are those your $250 dollar sandals? lemme use that as my litter box so pelt around the house and up and down stairs chasing phantoms asdflkjaertvlkjasntvkjn (sits on keyboard) or leave fur on owners clothes litter box is life. Whatever bite off human's toes. Always ensure to lay down in such a manner that tail can lightly brush human's nose flop over run in circles pee in human's bed until he cleans the litter box. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? make plans to dominate world and then take a nap, for what the heck just happened, something feels fishy for demand to be let outside at once, and expect owner to wait for me as i think about it scratch lick butt and make a weird face eat owner's food. I cry and cry and cry unless you pet me, and then maybe i cry just for fun mess up all the toilet paper it's 3am, time to create some chaos , hunt anything that moves intrigued by the shower. Sleep all day whilst slave is at work, play all night whilst slave is sleeping cats are the world and swat at dog, or cat not kitten around so cattt catt cattty cat being a cat, so fall asleep on the washing machine. Let me in let me out let me in let me out let me in let me out who broke this door anyway snuggles up to shoulders or knees and purrs you to sleep, so caticus cuteicus but why use post when this sofa is here. Catch mouse and gave it as a present has closed eyes but still sees you. Scoot butt on the rug be superior for lick butt and make a weird face cats are the world so lick left leg for ninety minutes, still dirty open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow! human is behind a closed door, emergency! abandoned! meeooowwww!!!. The door is opening! how exciting oh, it's you, meh cat ass trophy touch water with paw then recoil in horror. Throwup on your pillow where is my slave?<br />
</div><br />
</div><br />
<br />
=== gif ===<br />
<br />
Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.<br />
<pre><div class="cadreimg gif">[[lien du gif]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg gif">[[lien du gif]]</p></pre><br />
<br />
Exemple : <br />
<br />
Gif invisible à l'impression.<br />
<div class="gif"><br />
[[Fichier:Exemple_gif.gif]]<br />
</div><br />
<br />
<br />
=== replace_gif ===<br />
<br />
Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.<br />
<pre><div class="cadreimg replace_gif">[[lien de l'image]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg replace_gif">[[lien de l'image]]</p></pre><br />
<br />
Exemple : <br />
<br />
Image visible seulement à l'impression<br />
<div class="replace_gif"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
<br />
</div></div>
Marion
https://fr.wiki.insitu.education//index.php?title=DocModif&diff=8791
DocModif
2024-08-05T15:04:18Z
<p>Marion : /* Liens */</p>
<hr />
<div><div class="docModif"><br />
<br />
<br />
<br />
<br />
== Liens utiles ==<br />
<br />
<li>[[test_julien]]</li><br />
<br />
<br />
Lien vers l'ensemble de pages admin (= upload d'images, création d'identifiants, changement de droits utilisateurs, etc.) :<br />
[[Spécial:Pages spéciales]]<br />
<br />
Pour uploader des images :<br />
[[Spécial:Téléverser]]<br />
<br />
Lien direct vers la css :<br />
[[MediaWiki:Global.css]]<br />
<br />
Lien direct vers le js :<br />
[[MediaWiki:Global.js]]<br />
<br />
<br />
<br />
== Menus latéraux ==<br />
<br />
<br />
<br />
Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.<br />
<pre>{{:nom_de_l'article}}</pre><br />
<br />
Noms et lien des articles contenant les menus<br />
===Menus du wiki fr===<br />
<ul><br />
<li>[[Menu_Installer]]</li><br />
<li>[[Menu_Configurer]]</li><br />
<li>[[Menu_Concevoir]]</li><br />
<li>[[Menu_Décorer]]</li><br />
<li>[[Menu_Visualiser]]</li><br />
<li>[[Menu_Vendre]]</li><br />
<li>[[Menu_Gabarits]]</li><br />
<li>[[Menu_Avancé]]</li><br />
</ul><br />
===Menus du wiki en===<br />
<ul><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Installer En_Installer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Configurer En_Configurer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Concevoir En_Concevoir]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_D%C3%A9corer En_Décorer]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Gabarits En_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=Other_Functions En_Avancé]</li><br />
<br />
</ul><br />
===Menus du wiki es===<br />
<ul><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Installer Es_Installer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Configurer Es_Configurer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Concevoir Es_Concevoir]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Décorer Es_Décorer]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Visualiser Es_Visualiser]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Vendre Es_Vendre]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Gabarit Es_Gabarits]</li><br />
<li>[https://es.wiki.insitu.education/index.php?title=Es_Avancé Es_Avancé]</li><br />
</ul><br />
===Menus du wiki nl===<br />
<ul><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Installer Nl_Installer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Configurer Nl_Configurer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_Concevoir Nl_Concevoir]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Nl_D%C3%A9corer Nl_Décorer]</li><br />
<li>[https://nl.wiki.insitu.education/index.php?title=Sjablonen_beheren Nl_Gabarits]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Visualiser En_Visualiser]</li><br />
<li>[https://en.wiki.insitu.education/index.php?title=En_Vendre En_Vendre]</li><br />
<br />
===Menus du wiki de===<br />
https://de.wiki.insitu.education/index.php?title=Hauptseite<br />
<ul><br />
<br />
</ul><br />
<br />
<br />
<br />
<br />
== Syntaxe ==<br />
<br />
=== Liens ===<br />
<br />
==== Liens internes ====<br />
<br />
===== Navigation =====<br />
<br />
Les liens de navigation permettent de circuler d'une page à l'autre DANS LE WIKI.<br />
<pre>[[nom_de_l'article|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
Il est également possible de donner le lien d'un endroit spécifique dans une page. Pour ce faire, préparez d'abord la section de la page sur laquelle vous voulez arriver, soit en l'indiquant comme titre, soit en lui adjoignant une id.<br />
<pre>===Titre===</pre><br />
<pre><span id="mon_id">Ancre</span></pre><br />
Le lien se fait ensuite de la même façon que n'importe quel autre lien, entre [[]].<br />
Si le lien est dans la page même :<br />
<pre>[[#Titre|Texte que l'utilisateur voit]]</pre><br />
<pre>[[#mon_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Section]]<br />
Si le lien est vers une section spécifique d'une autre page :<br />
<pre>[[nom_de_l'article#nom_du_titre_ou_id|Texte que l'utilisateur voit]]</pre><br />
Exemple :<br />
[[Installer_le_logiciel_InSitu|Page très utile]]<br />
<br />
===== Inclusion =====<br />
<br />
====== D'un article ======<br />
<br />
L'article se trouvera affiché directement dans la page, comme si son contenu avait été écrit directement dans la page. Utile notamment pour les menus de navigation.<br />
<pre>{{:nom_de_l'article}}</pre><br />
Exemple:<br />
{{:Menu_Installer}}<br />
<br />
====== D'une image ======<br />
<br />
Pour inclure une image dans un article, il faut d'abord commencer par l'[[Spécial:Téléverser|uploader]].<br />
Une image uploadée est inclue grâce à la syntaxe suivante<br />
<pre>[[File:nom_de_l_image]]</pre><br />
ATTENTION : pour utiliser une image provenant du wiki fr dans un wiki d'une autre langue, la syntaxe n'est pas la même<br />
<pre>[[Image:nom_de_l_image]]</pre><br />
Pour éviter qu'une image soit cliquable par défaut et amène vers une autre page du wiki, ajoutez un "|link=" sans lien<br />
<pre>[[File:nom_de_l_image|link=]]<br />
[[Image:nom_de_l_image|link=]]</pre><br />
<br />
Exemple :<br />
Sans "|link=" : <br />
[[File:Exemple_img.jpg]]<br />
Avec "|link=" : <br />
[[File:Exemple_img.jpg|link=]]<br />
(cliquez sur chacune des images pour voir la différence)<br />
<br />
==== Liens externes ====<br />
<br />
Pour linker la page d'un site qui n'est pas le wiki fr, la syntaxe est la suivante<br />
<pre>[https//www.adresse_du_site.fr texte visible du lien(optionnel)]</pre><br />
<br />
Exemple :<br />
[https://fr.wikipedia.org/wiki/Tintin Lien très très cool]<br />
<br />
=== Commentaire ===<br />
<br />
Le commentaire permet de retirer de la vue du contenu sur la page, mais de le garder visible lors de l'édition de celle-ci. Peut contenir du texte comme du balisage html.<br />
<pre><!--Ceci est un commentaire--></pre><br />
<br />
Exemple :<br />
<!--Passe une bonne journée !--><br />
<br />
<br />
<br />
== Classes de mise en page ==<br />
<br />
<br />
<br />
=== Classes générales (couleur, gras, etc.) ===<br />
<br />
<br />
==== big ====<br />
<br />
Cette classe permet de mettre un texte en plus grand.<br />
<pre><p class="big">Je suis grand</p></pre><br />
<br />
Exemple :<br />
<p class="big">Je suis grand</p><br />
<br />
==== bold ====<br />
<br />
Cette classe permet de mettre un texte en gras.<br />
<pre><p class="bold">Je suis gras</p></pre><br />
<br />
Exemple :<br />
<p class="bold">Je suis gras</p><br />
<br />
Mettre un bold dans une balise portant une classe bold le mettra en très gras.<br />
<pre><p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p></pre><br />
<br />
Exemple :<br />
<p class="bold"><span>Je suis gras</span> <span class="bold">Je suis très gras</span></p><br />
<br />
==== sup ====<br />
<br />
Cette balise permet de mettre un texte en exposant.<br />
<pre><p>Texte ordinaire<sup>Texte en exposant</sup></p></pre><br />
<br />
Exemple :<br />
<p>Texte ordinaire<sup>Texte en exposant</sup></p><br />
<br />
==== txt-is ====<br />
<br />
Cette classe sert à mettre un texte en orange, "couleur InSitu".<br />
<pre><p class="txt-is">InSitu</p></pre><br />
<br />
Exemple :<br />
<p class="txt-is">InSitu</p><br />
<br />
==== txt-gris ====<br />
<br />
Cette classe sert à mettre un texte en gris.<br />
<pre><p class="txt-gris">Texte gris</p></pre><br />
<br />
Exemple :<br />
<p class="txt-gris">Texte gris</p><br />
<br />
<br />
=== Présentation particulière d'un élément ===<br />
<br />
<br />
==== title_page ====<br />
<br />
Cette classe ne fonctionne uniquement lorsqu'elle est mise sur une balise h1. Elle sert à mettre en avant le titre d'une page.<br />
<pre><h1 class="title_page">Ceci est un titre de page</h1></pre><br />
<br />
===== bg-blue =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond bleu.<br />
<pre><h1 class="title_page bg-blue">Ceci est un titre de page bleu</h1></pre><br />
<br />
===== bg-green =====<br />
Associée à title_page, cette classe change la présentation par défaut du titre pour le mettre en blanc sur fond vert.<br />
<pre><h1 class="title_page bg-green">Ceci est un titre de page vert</h1></pre><br />
<br />
==== chiffre ====<br />
<br />
Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.<br />
<pre><span class="chiffre">0</span></pre><br />
<br />
Exemple :<br />
<br />
<span class="chiffre">0</span><br />
<br />
==== encadre ====<br />
<br />
Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.<br />
<br />
Pour un paragraphe :<br />
<pre><p class="encadre">Contenu textuel</p></pre><br />
Pour plusieurs paragraphes :<br />
<pre><div class="encadre"><br />
Contenu textuel 1<br />
<br />
Contenu textuel 2<br />
</div></pre><br />
<br />
Exemple : <br />
<p class="encadre mb-20">You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.</p><br />
<div class="encadre"><br />
The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<br />
<br />
Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.<br />
</div><br />
<br />
<br />
<pre><p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px">contenu</p></pre><br />
<p style="border:solid 1px #ea560d;border-radius:5px;background-color:#f6f6f6;padding:10px"> blabla blabla blabla.</p><br />
<br />
==== info ====<br />
<br />
Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.<br />
<pre><span class="info">i</span></pre><br />
<pre><span class="chiffre info">i</span></pre><br />
<br />
Exemple :<br />
<br />
<p>Info seul : <br />
<span class="info">i</span></p><br />
<p>Info avec la classe "chiffre" :<br />
<span class="chiffre info">i</span></p><br />
<br />
==== important ====<br />
<br />
Cette classe sert à mettre en évidence une information.<br />
<pre><p class="important">Ceci est absolument crucial !</p></pre><br />
<br />
Exemple :<br />
<p class="important">Ceci est absolument crucial !</p><br />
<br />
==== shadow ====<br />
<br />
Cette classe ajoute une ombre autour d'un élément, lui donnant un effet de relief.<br />
<pre><div class="shadow">[[Image]], texte, etc.</div></pre><br />
<br />
Exemple :<br />
<div class="shadow" style="display:inline-block">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Placer les éléments sur la page ===<br />
<br />
<br />
==== flex ====<br />
<br />
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.<br />
<br />
ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !<br />
<br />
ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.<br />
<br />
ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.<br />
<br />
<pre><div class="flex"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
</div></pre><br />
<br />
Exemple :<br />
<div class="flex"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.</p><br />
</div><br />
<br />
<br />
==== Classes relatives au flex ====<br />
<br />
ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.<br />
<br />
===== col =====<br />
<br />
Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.<br />
<pre><div class="flex col"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex col"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.</p><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
==== wrap ====<br />
<br />
Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.<br />
<pre><div class="flex wrap"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex wrap"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_center =====<br />
<br />
Cette classe permet de centrer horizontalement des éléments d'un flex.<br />
<pre><div class="flex x_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== x_evenly =====<br />
<br />
Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.<br />
<pre><div class="flex x_evenly"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex x_evenly"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
===== y_center =====<br />
<br />
Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.<br />
<pre><div class="flex y_center"><br />
<div>[[lien d'une image]]</div><br />
<p>Texte</p><br />
<div>[[lien d'une image]]</div><br />
</div></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex y_center"><br />
<div>[[Fichier:Exemple_img.jpg]]</div><br />
<p>One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth ð•„ð”¼ð•†ð•Ž but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.</p><br />
</div><br />
<br />
<br />
==== txt-center ====<br />
<br />
Cette classe permet de centrer des éléments.<br />
<pre><div class="txt-center">Contenu divers</div></pre><br />
<pre><p class="txt-center">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-center">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
==== txt-right ====<br />
<br />
Cette classe permet d'aligner les éléments sur la droite.<br />
<pre><div class="txt-right">Contenu divers</div></pre><br />
<pre><p class="txt-right">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div class="txt-right">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
=== Ajouter de l'espace autour d'un élément ===<br />
<br />
<br />
==== m-20 ====<br />
<br />
Cette classe ajoute un peu d'espace autour d'un élément (20 px).<br />
<pre><div class="m-20"></div></pre><br />
<pre><p class="m-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.</p><br />
<div class="flex"><br />
<p>Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.</p><br />
<div class="m-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?</p><br />
</div><br />
<p>Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.</p><br />
<br />
<br />
==== mb-20 ====<br />
<br />
Cette classe ajoute un peu d'espace sous un élément (20px).<br />
<pre><div class="mb-20"></div></pre><br />
<pre><p class="mb-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="mb-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.</p><br />
<br />
<br />
==== ml-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à gauche d'un élément (20px).<br />
<pre><div class="ml-20"></div></pre><br />
<pre><p class="ml-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<p>Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.</p><br />
<div class="ml-20">[[Fichier:Exemple_img.jpg]]</div><br />
</div><br />
<br />
<br />
==== mr-20 ====<br />
<br />
Cette classe ajoute un peu d'espace à droite d'un élément (20px).<br />
<pre><div class="mr-20"></div></pre><br />
<pre><p class="mr-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<div class="flex"><br />
<div class="mr-20">[[Fichier:Exemple_img.jpg]]</div><br />
<p>Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.</p><br />
</div><br />
<br />
<br />
==== mt-20 ====<br />
<br />
Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).<br />
<pre><div class="mt-20"></div></pre><br />
<pre><p class="mt-20"></p></pre><br />
<br />
Exemple :<br />
<br />
<p>Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p><br />
<div class="mt-20">[[Fichier:Exemple_img.jpg]]</div><br />
<br />
<br />
<br />
=== Changer la taille d'un élément ===<br />
<br />
<br />
<br />
==== w-full ====<br />
<br />
Fixe la largeur d'un élément à 100%.<br />
<pre><div class="w-full">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-full"style="background-color:pink">Bouh</div><br />
<br />
<br />
==== w-half ====<br />
<br />
Fixe la largeur d'un élément à 50%.<br />
<pre><div class="w-half">Contenu divers</div></pre><br />
<br />
Exemple :<br />
<div class="w-half">Reaches under door into adjacent room trip owner up in kitchen i want food meow meow you are my owner so here is a dead rat for where is it? i saw that bird i need to bring it home to mommy squirrel! cattt catt cattty cat being a cat. Human give me attention meow sees bird in air, breaks into cage and attacks creature eat a plant, kill a hand or intrigued by the shower, or howl on top of tall thing. Sees bird in air, breaks into cage and attacks creature climb into cupboard and lick the salt off rice cakes kitty kitty pussy cat doll hate dog, but meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count. Chase mice nyaa nyaa so get poop stuck in paws jumping out of litter box and run around the house scream meowing and smearing hot cat mud all over for plan steps for world domination cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Lick the plastic bag miaow then turn around and show you my bum shred all toilet paper and spread around the house check cat door for ambush 10 times before coming in i love cuddles so purr. Crash against wall but walk away like nothing happened get scared by sudden appearance of cucumber. Don't nosh on the birds while happily ignoring when being called, yet claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?. Stare at owner accusingly then wink. Plays league of legends. Slap the dog because cats rule good morning sunshine toy mouse squeak roll over, or eats owners hair then claws head walk on car leaving trail of paw prints on hood and windshield but mesmerizing birds mess up all the toilet paper. Headbutt owner's knee. Behind the couch lick butt and make a weird face floof tum, tickle bum, jellybean footies curly toes sleep everywhere, but not in my bed so flee in terror at cucumber discovered on floor trip owner up in kitchen i want food so stick butt in face. Sniff all the things. I shredded your linens for you lick the curtain just to be annoying but a nice warm laptop for me to sit on chew the plant. Scratch me there, elevator butt purr like an angel for chase after silly colored fish toys around the house scratch the postman wake up lick paw wake up owner meow meow. Step on your keyboard while you're gaming and then turn in a circle why must they do that cats making all the muffins fooled again thinking the dog likes me or claw drapes snuggles up to shoulders or knees and purrs you to sleep. Meow all night having their mate disturbing sleeping humans when owners are asleep, cry for no apparent reason. Give me attention or face the wrath of my claws touch my tail, i shred your hand purrrr and lick master's hand at first then bite because im moody rub face on everything no, you can't close the door, i haven't decided whether or not i wanna go out and meow purrr purr littel cat, little cat purr purr. To pet a cat, rub its belly, endure blood and agony, quietly weep, keep rubbing belly spit up on light gray carpet instead of adjacent linoleum but human give me attention meow. Bury the poop bury it deep let me in let me out let me in let me out let me in let me out who broke this door anyway.</div><br />
<br />
<br />
==== style et width ====<br />
<br />
La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.<br />
<br />
Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).<br />
<br />
ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.<br />
<br />
<pre><div style="width:00px;">Contenu divers</div></pre><br />
<pre><p style="width:00%;">Contenu textuel</p></pre><br />
<br />
Exemple :<br />
<br />
<div><br />
<p style="width:50%">Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?</p><br />
<p style="width:80%">I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.</p><br />
<p style="width:400px">Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.</p><br />
</div><br />
<br />
<br />
==== img-full ====<br />
<br />
Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).<br />
<pre><div class="img-full">[[Lien de l'image]]</div></pre><br />
<br />
Exemple : <br />
<br />
<div class="flex wrap img-full"><br />
<br />
<div><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:50px;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<div style="width:20%;"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
</div><br />
<br />
== Classes relatives à l'impression ==<br />
<br />
<br />
<br />
=== barre_menu ===<br />
<br />
Classe rendue obsolète par des modifications ultérieures. La barre de menu ne s'affiche pas à l'impression quoi qu'on fasse.<br />
<br />
<br />
=== no_print ===<br />
<br />
Classe servant à faire disparaître un élément de l'impression.<br />
<pre><p class="no_print">Element invisible dans la version imprimable</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="no_print">Je disparaît.</p><br />
<br />
<br />
=== print_only ===<br />
<br />
Classe servant à ne montrer un élément qu'au moment de l'impression.<br />
<pre><p class="print_only">Element invisible sur le web, visible en impression</p></pre><br />
<br />
Exemple :<br />
<br />
<p class="print_only">Je suis visible à l'impression</p><br />
<br />
<br />
=== div.one_page ===<br />
<br />
Classe à mettre UNIQUEMENT sur une balise div. Cette div fera au maximum la taille d'une page pour l'impression. Cette div n'est effective que pour les grandes largeurs d'écrans afin de ne pas "casser" la page aux yeux des utilisateur dont l'écran est plus petit.<br />
<br />
ATTENTION : cette div peut "casser" une page si son contenu est trop grand. Il est important de l'adapter de façon à ce que tout rentre.<br />
CEPENDANT : si la page est propre au format web, elle sera propre à l'impression.<br />
<pre><div class="one_page"></div></pre><br />
<br />
Exemple : <br />
<br />
<div class="one_page txt-center flex x_center y_center" style="border: 1px solid"><div><p>Cette div fait au maximum la longueur d'une page imprimée.</p><p>La bordure noire n'est présente que pour aider à la visualisation et ne sera pas présente sur la page wiki, de même que le centrage du contenu.</p></div></div><br />
<br />
==== col-w-10 ====<br />
<br />
Classe ne fonctionnant QUE dans div.one_page. Mettre cette classe sur une div répartira son contenu au besoin sur des colonnes de 10 caractères max.<br />
<pre><div class="one_page"><div class="col-w-10"></div></div></pre><br />
<br />
Exemple :<br />
<br />
<div class="one_page"><br />
<p class="txt-center">Je ne rentre pas dans des colonnes.</p><br />
<div class="col-w-10"><br />
Dismember a mouse and then regurgitate parts of it on the family room floor ears back wide eyed and licks paws for destroy house in 5 seconds pee in the shoe. Chew the plant. Play time dismember a mouse and then regurgitate parts of it on the family room floor eat an easter feather as if it were a bird then burp victoriously, but tender cats making all the muffins, cat playing a fiddle in hey diddle diddle? so toy mouse squeak roll over. Yowling nonstop the whole night. Poop in the plant pot ask to be pet then attack owners hand chase dog then run away cat sit like bread and be superior for lick the curtain just to be annoying. Oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap sleep on keyboard. Sleep everywhere, but not in my bed crash against wall but walk away like nothing happened yet meowsiers so rub whiskers on bare skin act innocent. Mew. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip the fat cat sat on the mat bat away with paws and poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree have a lot of grump in yourself because you can't forget to be grumpy and not be like king grumpy cat yet if human is on laptop sit on the keyboard try to hold own back foot to clean it but foot reflexively kicks you in face, go into a rage and bite own foot, hard or licks your face. Is good you understand your place in my world. Knock over christmas tree find empty spot in cupboard and sleep all day, where is my slave? I'm getting hungry, but take a deep sniff of sock then walk around with mouth half open so rub my belly hiss or cat fur is the new black scream for no reason at 4 am.<br />
<br />
Spend six hours per day washing, but still have a crusty butthole find something else more interesting, but put toy mouse in food bowl run out of litter box at full speed bite off human's toes but under the bed, or knock dish off table head butt cant eat out of my own dish but scratch the furniture. Paw at your fat belly there's a forty year old lady there let us feast but inspect anything brought into the house, so cat not kitten around humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean yet do not try to mix old food with new one to fool me! kitty loves pigs. Give me attention or face the wrath of my claws ask to go outside and ask to come inside and ask to go outside and ask to come inside and really likes hummus, dead stare with ears cocked purr for no reason for always hungry your pillow is now my pet bed. Find empty spot in cupboard and sleep all day why dog in house? i'm the sole ruler of this home and its inhabitants smelly, stupid dogs, inferior furballs time for night-hunt, human freakout push your water glass on the floor. Paw your face to wake you up in the morning bring your owner a dead bird yet hit you unexpectedly pose purrfectly to show my beauty more napping, more napping all the napping is exhausting so ignore the squirrels, you'll never catch them anyway or find something else more interesting. Poop on floor and watch human clean up love me! yet man running from cops stops to pet cats, goes to jail kitty poochy run up and down stairs so mesmerizing birds. Sit on the laptop. Cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip find empty spot in cupboard and sleep all day or bawl under human beds and attack dog, run away and pretend to be victim. There's a forty year old lady there let us feast lick the plastic bag kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment. Stare at the wall, play with food and get confused by dust purr groom forever, stretch tongue and leave it slightly out, blep, good morning sunshine. Cats making all the muffins funny little cat chirrup noise shaking upright tail when standing next to you and walk on a keyboard, and love you, then bite you i heard this rumor where the humans are our owners, pfft, what do they know?!, so intently sniff hand, yet furrier and even more furrier hairball. Scratch my tummy actually i hate you now fight me fight an alligator and win pet right here, no not there, here, no fool, right here that other cat smells funny you should really give me all the treats because i smell the best and omg you finally got the right spot and i love you right now. Destroy couch if it fits i sits so purr while eating yet hiss at vacuum cleaner but mewl for food at 4am if it fits, i sits. Walk on keyboard hack, plan steps for world domination chase after silly colored fish toys around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now meow go back to sleep owner brings food and water tries to pet on head, so scratch get sprayed by water because bad cat good now the other hand, too. Kitty power intrigued by the shower spread kitty litter all over house. Walk on a keyboard claws in your leg so cat dog hate mouse eat string barf pillow no baths hate everything or reaches under door into adjacent room. Take a deep sniff of sock then walk around with mouth half open sit in window and stare oooh, a bird, yum and ð•„ð”¼ð•†ð•Ž sitting in a box so prance along on top of the garden fence, annoy the neighbor's dog and make it bark eat an easter feather as if it were a bird then burp victoriously, but tender. Meeeeouw eats owners hair then claws head so whatever licks your face. Then cats take over the world really likes hummus so chase imaginary bugs, so scratch the furniture. Curl up and sleep on the freshly laundered towels play time hey! you there, with the hands so lie on your belly and purr when you are asleep crash against wall but walk away like nothing happened, yet behind the couch. My water bowl is clean and freshly replenished, so i'll drink from the toilet put toy mouse in food bowl run out of litter box at full speed or pretend not to be evil paw at your fat belly. Hiding behind the couch until lured out by a feathery toy climb leg, so ignore the squirrels, you'll never catch them anyway. Wack the mini furry mouse intrigued by the shower Gate keepers of hell wack the mini furry mouse and fart in owners food . With tail in the air meow to be let out.<br />
<br />
Lie in the sink all day kitten is playing with dead mouse, and carrying out surveillance on the neighbour's dog lasers are tiny mice, meowzer. Love me! crash against wall but walk away like nothing happened and mewl for food at 4am drink from the toilet. Headbutt owner's knee ooh, are those your $250 dollar sandals? lemme use that as my litter box so pelt around the house and up and down stairs chasing phantoms asdflkjaertvlkjasntvkjn (sits on keyboard) or leave fur on owners clothes litter box is life. Whatever bite off human's toes. Always ensure to lay down in such a manner that tail can lightly brush human's nose flop over run in circles pee in human's bed until he cleans the litter box. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? make plans to dominate world and then take a nap, for what the heck just happened, something feels fishy for demand to be let outside at once, and expect owner to wait for me as i think about it scratch lick butt and make a weird face eat owner's food. I cry and cry and cry unless you pet me, and then maybe i cry just for fun mess up all the toilet paper it's 3am, time to create some chaos , hunt anything that moves intrigued by the shower. Sleep all day whilst slave is at work, play all night whilst slave is sleeping cats are the world and swat at dog, or cat not kitten around so cattt catt cattty cat being a cat, so fall asleep on the washing machine. Let me in let me out let me in let me out let me in let me out who broke this door anyway snuggles up to shoulders or knees and purrs you to sleep, so caticus cuteicus but why use post when this sofa is here. Catch mouse and gave it as a present has closed eyes but still sees you. Scoot butt on the rug be superior for lick butt and make a weird face cats are the world so lick left leg for ninety minutes, still dirty open the door, let me out, let me out, let me-out, let me-aow, let meaow, meaow! human is behind a closed door, emergency! abandoned! meeooowwww!!!. The door is opening! how exciting oh, it's you, meh cat ass trophy touch water with paw then recoil in horror. Throwup on your pillow where is my slave?<br />
</div><br />
</div><br />
<br />
=== gif ===<br />
<br />
Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.<br />
<pre><div class="cadreimg gif">[[lien du gif]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg gif">[[lien du gif]]</p></pre><br />
<br />
Exemple : <br />
<br />
Gif invisible à l'impression.<br />
<div class="gif"><br />
[[Fichier:Exemple_gif.gif]]<br />
</div><br />
<br />
<br />
=== replace_gif ===<br />
<br />
Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.<br />
<pre><div class="cadreimg replace_gif">[[lien de l'image]]</div></pre><br />
Ancienne façon de faire<br />
<pre><p class="cadreimg replace_gif">[[lien de l'image]]</p></pre><br />
<br />
Exemple : <br />
<br />
Image visible seulement à l'impression<br />
<div class="replace_gif"><br />
[[Fichier:Exemple_img.jpg]]<br />
</div><br />
<br />
<br />
</div></div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8778
MediaWiki:Print.css
2024-06-12T13:08:06Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8775
MediaWiki:Print.css
2024-06-12T13:01:03Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 18px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8772
MediaWiki:Print.css
2024-06-12T13:00:36Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8771
MediaWiki:Print.css
2024-06-12T12:57:41Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 18px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8770
MediaWiki:Print.css
2024-06-12T12:57:20Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8769
MediaWiki:Print.css
2024-06-12T12:55:55Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 18px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8768
MediaWiki:Print.css
2024-06-12T12:53:03Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 20px;<br />
font-height: 24px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 30px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 30px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8767
MediaWiki:Print.css
2024-06-12T12:38:23Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, p *, ul, ul *, li, li * {<br />
font-size: 14px;<br />
font-height: 16px;<br />
} <br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8766
MediaWiki:Print.css
2024-06-12T12:36:28Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8765
MediaWiki:Print.css
2024-06-12T12:36:07Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 100px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8764
MediaWiki:Print.css
2024-06-12T12:35:48Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 50px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8763
MediaWiki:Print.css
2024-06-12T12:35:31Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 20px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8762
MediaWiki:Print.css
2024-06-12T12:35:07Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 14px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8761
MediaWiki:Print.css
2024-06-12T12:34:26Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8760
MediaWiki:Print.css
2024-06-12T12:33:30Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 14px;<br />
line-height: 16px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8759
MediaWiki:Print.css
2024-06-12T12:32:52Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
div.one_page p, div.one_page p *, div.one_page ul, div.one_page ul *, div.one_page li, div.one_page li * {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8758
MediaWiki:Print.css
2024-06-12T12:31:25Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 14px;<br />
}<br />
<br />
div.one_page p, div.one_page ul, div.one_page li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8757
MediaWiki:Print.css
2024-06-12T12:28:47Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
div.one_page p, div.one_page ul, div.one_page li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8756
MediaWiki:Print.css
2024-06-12T12:28:24Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
div.one_page * {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
div.one_page p, div.one_page ul, div.one_page li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8755
MediaWiki:Print.css
2024-06-12T12:26:08Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8754
MediaWiki:Print.css
2024-06-12T12:25:28Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
color: black;<br />
font-size: 20px;<br />
line-height: 24px;<br />
}<br />
<br />
.one_page * {<br />
font-size: 10px !important;<br />
line-height: 12px !important;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8753
MediaWiki:Print.css
2024-06-12T12:24:43Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
color: black;<br />
font-size: 20px;<br />
line-height: 24px;<br />
}<br />
<br />
.one_page * {<br />
color: red;<br />
font-size: 10px; !important<br />
line-height: 12px; !important<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8752
MediaWiki:Print.css
2024-06-12T12:23:44Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
color: black;<br />
font-size: 20px;<br />
line-height: 24px;<br />
}<br />
<br />
.one_page * {<br />
color: red;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8751
MediaWiki:Print.css
2024-06-12T12:23:04Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
color: black;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.one_page * {<br />
color: red;<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8750
MediaWiki:Print.css
2024-06-12T12:22:26Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.one_page * {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8749
MediaWiki:Print.css
2024-06-12T12:21:44Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.one_page * {<br />
color: red;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Global.css&diff=8748
MediaWiki:Global.css
2024-06-12T12:21:04Z
<p>Marion : </p>
<hr />
<div>/* Ce CSS doit s'appliquer à tous les MédiaWikis de la Farm */<br />
<br />
/* CSS personnalisée par Marion Delacroix, 2022 */<br />
<br />
/* MAJ 01/02/2024 ajout shadow */<br />
<br />
/* MAJ 13/09/2023 (spécification .mw-parser-output > table) */<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
.mw-parser-output > table > tbody > tr:first-child > td:first-child {<br />
width: 80%;<br />
padding-right: 0px;<br />
}<br />
<br />
table.wikitable tr:first-child td:first-child {<br />
width: fit-content;<br />
padding-right: 0px;<br />
}<br />
<br />
table.barre_menu tr:first-child td:first-child {<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
/* On supprime les titres de pages automatiques */<br />
<br />
.firstHeading {<br />
display : none;<br />
}<br />
<br />
/* On supprime l'apparition du footer à l'impression */<br />
<br />
.printfooter {<br />
display: none;<br />
}<br />
<br />
/* CSS des classes personnalisées InSitu */<br />
<br />
@media (min-width:1880px) {<br />
/*div.one_page {<br />
max-height: 903px;<br />
aspect-ratio: 210/297;<br />
width: 100%;<br />
}*/<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 10rem;<br />
}<br />
<br />
.shadow {<br />
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
.important {<br />
font-size: 150%;<br />
font-weight: bold;<br />
color: rgb(243,146,0);<br />
margin: 1em 0px;<br />
}<br />
<br />
h1.title_page {<br />
color: rgb(234,86,13);<br />
font-size: 180%;<br />
font-family: sans-serif;<br />
padding: 1em 0;<br />
margin-top: 0;<br />
text-align: center;<br />
border-bottom: 0;<br />
font-weight: bold;<br />
}<br />
<br />
<br />
h1.title_page.bg-blue {<br />
color: white;<br />
background-color: #428bca;<br />
}<br />
<br />
h1.title_page.bg-green {<br />
color: white;<br />
background-color: #5cb85c;<br />
}<br />
<br />
.w-full {<br />
width:100%;<br />
}<br />
<br />
.w-half {<br />
width:50%;<br />
}<br />
<br />
.sup {<br />
font-variant-position: super;<br />
}<br />
<br />
.txt-is {<br />
color: rgb(243,146,0);<br />
}<br />
<br />
.txt-gris {<br />
color: #5b5b5d;<br />
}<br />
<br />
.flex {<br />
display: flex !important;<br />
}<br />
<br />
.inline-flex {<br />
display: inline-flex;<br />
}<br />
<br />
.wrap {<br />
flex-wrap: wrap;<br />
}<br />
<br />
.col {<br />
flex-direction: column;<br />
}<br />
<br />
.x_evenly {<br />
justify-content: space-evenly;<br />
}<br />
<br />
.x_center {<br />
justify-content: center;<br />
}<br />
<br />
.y_center {<br />
align-items: center;<br />
}<br />
<br />
.txt-center {<br />
text-align: center;<br />
}<br />
<br />
.txt-right {<br />
text-align: right;<br />
}<br />
<br />
.mt-20 {<br />
margin-top: 20px !important;<br />
}<br />
<br />
.mb-20 {<br />
margin-bottom: 20px !important;<br />
}<br />
<br />
.ml-20 {<br />
margin-left: 20px !important;<br />
}<br />
<br />
.mr-20 {<br />
margin-right: 20px !important;<br />
}<br />
<br />
.m-20 {<br />
margin: 20px !important;<br />
}<br />
<br />
.img-full img {<br />
width: 100%;<br />
height: auto;<br />
}<br />
<br />
.info {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
}<br />
<br />
.chiffre {<br />
display: inline-block;<br />
veritcal-align: middle;<br />
text-align: center;<br />
color: white;<br />
font-weight: 700;<br />
border-radius: 50%;<br />
background-color: rgb(243,146,0);<br />
width: 1.5em;<br />
height: 1.5em;<br />
margin-right: .2em;<br />
}<br />
<br />
.encadre {<br />
font-weight: 500;<br />
border-radius: 5px;<br />
padding: 10px;<br />
box-shadow: 2px 5px 8px rgb(234,86,13);<br />
}<br />
<br />
.encadre_alt {<br />
font-weight: 700;<br />
border-radius: 10px;<br />
border-top-left-radius:0px;<br />
padding: 10px;<br />
border: rgb(234,86,13) solid 2px;<br />
margin-top: 0px;<br />
}<br />
<br />
.encadre_alt_title {<br />
background-color: rgb(234,86,13);<br />
padding: 5px 10px 0px 10px;<br />
color: white;<br />
margin-bottom: 0px !important;<br />
border-radius: 10px 10px 0px 0px;<br />
display: block;<br />
font-weight: 700;<br />
text-align: center;<br />
width : fit-content;<br />
}<br />
<br />
.bold {<br />
font-weight: bold;<br />
}<br />
<br />
.bold .bold {<br />
font-weight: 900;<br />
}<br />
<br />
/* CSS cohérente avec l'impression */<br />
<br />
.replace_gif {<br />
display: none;<br />
}<br />
<br />
.print_only {<br />
display: none;<br />
}<br />
<br />
/* Sommaire auto ne s'affiche pas */<br />
.toc {<br />
display: none;<br />
}<br />
<br />
.docModif .toc {<br />
display: inline-block;<br />
}<br />
<br />
/*Liens de la toolbox dans la Sidebar ne s'affichent pas*/<br />
#t-whatlinkshere, #t-recentchangeslinked, #t-upload, #t-specialpages, #t-info, #t-permalink {<br />
display: none;<br />
}<br />
<br />
#t-print {<br />
display: inline;<br />
}<br />
<br />
/* personnalisation de la page Search */<br />
<br />
.searchButton {<br />
color: white;<br />
background-color: #ea560d;<br />
}<br />
<br />
.vector-search-box-input {<br />
border-color: #ea560d;<br />
}<br />
<br />
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {<br />
background-color: #ea560d;<br />
border-color: #ea560d;<br />
}<br />
<br />
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {<br />
background-color: #5a5959;<br />
border-color: #5a5959;<br />
}<br />
<br />
.mw-search-createlink {<br />
display: none;<br />
}<br />
<br />
.mw-search-result-heading {<br />
font-size: 1.2em;<br />
}<br />
<br />
.mw-search-result-heading a {<br />
color: #ea560d;<br />
}<br />
<br />
.mw-search-result-data {<br />
display: none;<br />
}<br />
<br />
/* Correction de certaines choses */<br />
<br />
/* CSS personnalisée par Thomas Varlet que je copie-colle pour le bon fonctionnement */<br />
<br />
/* CSS de la page d'accueil, par Thomas Varlet légèrement adaptée par Marion Delacroix, 2014-2022 */<br />
<br />
/*! Propriétés du body */<br />
<br />
* {<br />
box-sizing: border-box;<br />
}<br />
<br />
/* Ne fonctionne pas. Hautement expérimental. Géré en js<br />
!#firstheading + #bodyContent:has(div:has(div:has(div:has(.body_mp))) {<br />
display: none;<br />
}<br />
*/<br />
<br />
.body_mp {<br />
<br />
box-sizing: border-box;<br />
background-color: #fff;<br />
font-family: 'Open Sans'; /*sans-serif;*/<br />
font-size: 16px;<br />
min-height: 100%;<br />
padding-top: 20px;<br />
width: 100%;<br />
color:#5a5959;<br />
}<br />
<br />
.body_mp .container {<br />
width: 100%;<br />
margin: 0 auto;<br />
display: flex;<br />
flex-wrap: wrap;<br />
justify-content: space-between;<br />
}<br />
<br />
@media (min-width: 768px) {<br />
.body_mp .container {<br />
width: 90%;<br />
}<br />
}<br />
<br />
.body_mp ul {<br />
list-style-type: none;<br />
list-style-image: none;<br />
margin: 0;<br />
padding: 0 10px<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Liens */<br />
<br />
.body_mp a {<br />
color: #ea560d;<br />
text-decoration: none;<br />
}<br />
<br />
.body_mp a:hover,<br />
.body_mp a:focus {<br />
color: #5a5959;<br />
text-decoration: underline;<br />
}<br />
<br />
<br />
.body_mp .wiki a<br />
{<br />
color: #5a5959;<br />
font-size: 14px;<br />
}<br />
<br />
.body_mp .btn-orange a:hover<br />
{<br />
color: #5a5959;<br />
<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Mise en forme des textes et titres */<br />
<br />
.body_mp .en-tete {<br />
margin-bottom: 50px;<br />
}<br />
<br />
.body_mp .soustitre {<br />
font-size: 18px;<br />
}<br />
<br />
<br />
.body_mp h1 {<br />
font-family: inherit;<br />
color: #ea560d;<br />
font-size: 30px;<br />
padding-top: 40px;<br />
text-align: center;<br />
font-weight: 300;<br />
border-bottom: 0px;<br />
}<br />
<br />
.body_mp h3 {<br />
font-family: inherit;<br />
color: #5a5959;<br />
font-weight: 600;<br />
}<br />
<br />
.body_mp h4<br />
{<br />
font-size: 35px;<br />
font-weight: 300;<br />
color: #ea560d;<br />
text-align: left;<br />
<br />
}<br />
<br />
.body_mp .wiki {<br />
display: flex;<br />
flex-direction: column;<br />
justify-content: space-between;<br />
padding: 0px;<br />
margin-bottom: 20px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ddd;<br />
text-align: center;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
width: 100%;<br />
}<br />
<br />
@media (min-width: 768px) {<br />
.body_mp .wiki {<br />
width:45%;<br />
}<br />
}<br />
<br />
@media (min-width: 1200px) {<br />
.body_mp .wiki {<br />
width:22%;<br />
}<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Mise en forme des textes et titres pour écrans */<br />
@media (min-width: 768px)<br />
{ <br />
.body_mp h1 {<br />
font-family: inherit;<br />
color: #ea560d;<br />
font-size: 50px; <br />
padding-top: 0px;<br />
text-align: center;<br />
font-weight: 300;<br />
border-bottom: 0px;<br />
} <br />
}<br />
<br />
/*! Espacements */<br />
<br />
.body_mp .spacer3 {<br />
padding-top: 20px;<br />
padding-bottom: 20px;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Espacements pour écrans */<br />
<br />
@media (min-width: 768px)<br />
<br />
{<br />
<br />
.body_mp .spacer3 {<br />
padding-top: 20px;<br />
padding-bottom: 20px;<br />
}<br />
<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Button */<br />
<br />
.body_mp .btn-large {<br />
color: #ea560d;<br />
background-color: #fff;<br />
border-color: #ea560d;<br />
border-width: 1px;<br />
}<br />
<br />
.body_mp .btn-orange {<br />
background-color: #ea560d;<br />
color: #fff;<br />
display: inline;<br />
padding: .6em .6em .6em .6em;<br />
font-size: 90%;<br />
line-height: 1;<br />
border: 0px solid #ea560d;<br />
text-align: center;<br />
white-space: nowrap;<br />
vertical-align: middle;<br />
border-radius: .25em;<br />
<br />
}<br />
<br />
.body_mp .btn-orange a.external {<br />
color: #fff;<br />
}<br />
<br />
.body_mp .btn-orange a.external:visited {<br />
color: #000;<br />
}<br />
<br />
.body_mp .btn-orange a.external {<br />
background-image: none;<br />
padding-right: 0;<br />
}<br />
<br />
.body_mp .btn-gen {<br />
margin: 20px 0;<br />
}<br />
<br />
.body_mp .btn-gen a {<br />
padding: 6px 12px;<br />
text-align: center;<br />
border: 1px solid rgba(0,0,0,0.2);<br />
border-radius: 4px;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Images */<br />
.body_mp .cadreimg {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.body_mp .bg-blue {<br />
background-color: #438bc5;<br />
padding: 20px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.body_mp .bg-green {<br />
background-color: #5fb25c;<br />
padding: 20px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.body_mp .bg-blue img, .body_mp .bg-green img {<br />
width: 25%;<br />
height: auto;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/* CSS générale par Thomas Varlet, 2014 */<br />
<br />
/**<br />
* MediaWiki style sheet for general styles on basic content elements<br />
*<br />
* Styles for basic elements: links, lists, etc...<br />
*<br />
* This style sheet is used by the Monobook and Vector skins.<br />
*/<br />
<br />
/* Links */<br />
a {<br />
text-decoration: none;<br />
color: #0645ad;<br />
background: none;<br />
}<br />
/*a:visited {<br />
color: #5a5959;<br />
}*/<br />
a:active {<br />
color: #faa700;<br />
}<br />
a:hover, a:focus {<br />
text-decoration: underline;<br />
}<br />
a.stub {<br />
color: #772233;<br />
}<br />
a.new, #p-personal a.new {<br />
color: #ba0000;<br />
}<br />
a.new:visited, #p-personal a.new:visited {<br />
color: #a55858;<br />
}<br />
<br />
.liendetails > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.liendetails > a:hover<br />
{<br />
text-decoration: none;<br />
color: #5a5959;<br />
background: none;<br />
}<br />
<br />
.liendetails > a:visited<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
<br />
<br />
.lienparcours > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.lienparcours > a:hover<br />
{<br />
text-decoration: underline;<br />
color: #31B3CE;<br />
background: none;<br />
}<br />
<br />
.lienparcours > a:visited<br />
{<br />
text-decoration: underline;<br />
color: #31B3CE;<br />
background: none;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
/* Interwiki Styling */<br />
.mw-body a.extiw,<br />
.mw-body a.extiw:active {<br />
color: #36b;<br />
}<br />
.mw-body a.extiw:visited {<br />
color: #636;<br />
}<br />
.mw-body a.extiw:active {<br />
color: #b63;<br />
}<br />
<br />
<br />
<br />
/* Inline Elements */<br />
img {<br />
border: none;<br />
vertical-align: middle;<br />
}<br />
hr {<br />
height: 1px;<br />
color: #aaa;<br />
background-color: #aaa;<br />
border: 0;<br />
margin: .2em 0;<br />
}<br />
<br />
/* Structural Elements */<br />
h1,<br />
h2,<br />
h3,<br />
h4,<br />
h5,<br />
h6 {<br />
color: black;<br />
background: none;<br />
font-weight: normal;<br />
margin: 0;<br />
overflow: hidden;<br />
padding-top: .5em;<br />
padding-bottom: .17em;<br />
border-bottom: 1px solid #aaa;<br />
}<br />
h1 {<br />
font-size: 188%;<br />
}<br />
h2 {<br />
font-size: 150%;<br />
}<br />
h3,<br />
h4,<br />
h5,<br />
h6 {<br />
border-bottom: none;<br />
font-weight: bold;<br />
}<br />
h3 {<br />
font-size: 132%;<br />
}<br />
h4 {<br />
font-size: 116%;<br />
}<br />
h5 {<br />
font-size: 108%;<br />
}<br />
h6 {<br />
font-size: 100%;<br />
}<br />
<br />
/* Some space under the headers in the content area */<br />
h1,<br />
h2 {<br />
margin-bottom: .6em;<br />
}<br />
h3,<br />
h4,<br />
h5 {<br />
margin-bottom: .3em;<br />
}<br />
<br />
p {<br />
margin: .4em 0 .5em 0;<br />
line-height: 1.5em;<br />
}<br />
p img {<br />
margin: 0;<br />
}<br />
<br />
ul {<br />
line-height: 1.5em;<br />
list-style-type: square;<br />
margin: .3em 0 0 1.6em;<br />
padding: 0;<br />
}<br />
ol {<br />
line-height: 1.5em;<br />
margin: .3em 0 0 3.2em;<br />
padding: 0;<br />
list-style-image: none;<br />
}<br />
li {<br />
margin-bottom: .1em;<br />
}<br />
dt {<br />
font-weight: bold;<br />
margin-bottom: .1em;<br />
}<br />
dl {<br />
margin-top: .2em;<br />
margin-bottom: .5em;<br />
}<br />
dd {<br />
line-height: 1.5em;<br />
margin-left: 1.6em;<br />
margin-bottom: .1em;<br />
}<br />
<br />
/* IE 6 and 7 lack support for quotes aroud the <q> element ('::before' and '::after'<br />
pseudoelements, 'quotes' property). Let's italicize it instead (using the star hack). */<br />
q {<br />
*font-style: italic;<br />
}<br />
<br />
pre, code, tt, kbd, samp, .mw-code {<br />
/*<br />
* Some browsers will render the monospace text too small, namely Firefox, Chrome and Safari.<br />
* Specifying any valid, second value will trigger correct behavior without forcing a different font.<br />
*/<br />
font-family: monospace, Courier;<br />
}<br />
code {<br />
background-color: #f9f9f9;<br />
}<br />
pre, .mw-code {<br />
padding: 1em;<br />
border: 1px solid #ddd;<br />
color: black;<br />
background-color: #f9f9f9;<br />
}<br />
<br />
/* Tables */<br />
table {<br />
font-size: 100%;<br />
<br />
}<br />
<br />
/* Forms */<br />
fieldset {<br />
border: 1px solid #2f6fab;<br />
margin: 1em 0 1em 0;<br />
padding: 0 1em 1em;<br />
line-height: 1.5em;<br />
}<br />
fieldset.nested {<br />
margin: 0 0 0.5em 0;<br />
padding: 0 0.5em 0.5em;<br />
}<br />
legend {<br />
padding: .5em;<br />
font-size: 95%;<br />
}<br />
form {<br />
border: none;<br />
margin: 0;<br />
}<br />
textarea {<br />
width: 100%;<br />
padding: .1em;<br />
display: block;<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
}<br />
select {<br />
vertical-align: top;<br />
}<br />
<br />
/* Emulate Center */<br />
.center {<br />
width: 100%;<br />
text-align: center;<br />
}<br />
*.center * {<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
/* Small for tables and similar */<br />
.small {<br />
font-size: 94%;<br />
}<br />
table.small {<br />
font-size: 100%;<br />
}<br />
<br />
/* Images et videos */<br />
.cadrevideo {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #eee;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.cadreimg {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.liendetails {<br />
width: 120px;<br />
}<br />
<br />
.commentaires {<br />
border: 1px solid #ddd;<br />
background-color: #f9f9f9;<br />
font-family: Courier;<br />
font-size: inherit;<br />
line-height: 1.3em;<br />
padding: 1em;<br />
width: 80%;<br />
}<br />
<br />
.commentairesplus {<br />
border-left: 5px solid #428bca;<br />
background-color: #eeeeee;<br />
font-family: inherit;<br />
font-size: inherit;<br />
line-height: 1.3em;<br />
padding: 1em;<br />
width: 80%;<br />
}<br />
<br />
.entetehome1 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome2 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome3 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome4 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome5 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome6 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #5CB85C; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome7 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.titreboussole{<br />
font-size: 23px; <br />
padding-top: 30px; <br />
padding-bottom: 20px; <br />
color: #f0ad4e;<br />
text-align: left;<br />
font-weight: bold;<br />
}<br />
<br />
.titrehome {<br />
font-size: 18px; <br />
padding-top: 20px; <br />
color: #000;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
<br />
.soustitrehome {<br />
font-size: 18px; <br />
color: #fff;<br />
text-align: left;<br />
font-weight: bold;<br />
}<br />
<br />
.boussolehome {<br />
<br />
border: 1px solid #aaaaaa;<br />
padding: 0.4em; <br />
background-color: #fff; <br />
color: #000;<br />
text-align: center;<br />
}<br />
<br />
.etiquettehome {<br />
background-color: #f0ad4e; <br />
color: #fff; <br />
display: inline; <br />
padding: .2em .6em .3em; <br />
font-size: 90%; <br />
font-weight: bold; <br />
line-height: 1; <br />
border: 0px solid #ea560d; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: baseline; <br />
border-radius: 0px;<br />
}<br />
<br />
.etiquetteexpert {<br />
background-color: #5cb85c; <br />
color: #fff; <br />
display: inline; <br />
padding: .2em .6em .3em; <br />
font-size: 70%; <br />
font-weight: bold; <br />
line-height: 1; <br />
border: 0px solid #5cb85c; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle;<br />
border-radius: 0px;<br />
}<br />
<br />
<br />
<br />
.btnhome {<br />
background-color: #fff; <br />
color:#333; <br />
display: inline; <br />
padding: .6em .6em .6em .6em; <br />
font-size: 100%; <br />
line-height: 1; <br />
border: 1px solid #ccc; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle; <br />
border-radius: .25em;<br />
}<br />
<br />
.btnhome:hover,<br />
.btnhome:focus,<br />
.btnhome:active,<br />
.btnhome.active {<br />
color: #333;<br />
background-color: #ebebeb;<br />
border-color: #adadad;<br />
}<br />
<br />
<br />
.btnhome > a<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnhome > a:hover<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnhome > a:visited<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnretour {<br />
background-color: #ea560d; <br />
color:#333; <br />
display: inline; <br />
padding: .6em .6em .6em .6em; <br />
font-size: 100%; <br />
line-height: 1; <br />
border: 1px solid #ea560d; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle; <br />
border-radius: .25em;<br />
}<br />
<br />
.btnretour:hover,<br />
.btnretour:focus,<br />
.btnretour:active,<br />
.btnretour.active {<br />
color: #fff;<br />
background-color: #5a5959;<br />
border-color: #5a5959;<br />
}<br />
<br />
<br />
.btnretour > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.btnretour > a:hover<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.btnretour > a:visited<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.chiffres {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: red;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresverts {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: green;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresbleus {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: blue;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresgris {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: #c0c0c0;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
.goog-te-gadget {float: left; margin-left: -30px;}<br />
.goog-te-combo {display: inline-block;}<br />
.goog-te-banner-frame.skiptranslate {display: none;}<br />
body {top: 0px;}<br />
.goog-tooltip {display: none;}<br />
.goog-tooltip:hover {display: none;}<br />
.goog-text-highlight {<br />
background-color: transparent;<br />
border: none; <br />
box-shadow: none;<br />
}<br />
.goog-te-gadget {font-size: 0px; }<br />
.goog-te-gadget img {display: none}<br />
.goog-logo-link {display: none;}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Global.css&diff=8747
MediaWiki:Global.css
2024-06-12T12:20:40Z
<p>Marion : </p>
<hr />
<div>/* Ce CSS doit s'appliquer à tous les MédiaWikis de la Farm */<br />
<br />
/* CSS personnalisée par Marion Delacroix, 2022 */<br />
<br />
/* MAJ 01/02/2024 ajout shadow */<br />
<br />
/* MAJ 13/09/2023 (spécification .mw-parser-output > table) */<br />
<br />
.one_page * {<br />
color: red;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
.mw-parser-output > table > tbody > tr:first-child > td:first-child {<br />
width: 80%;<br />
padding-right: 0px;<br />
}<br />
<br />
table.wikitable tr:first-child td:first-child {<br />
width: fit-content;<br />
padding-right: 0px;<br />
}<br />
<br />
table.barre_menu tr:first-child td:first-child {<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
/* On supprime les titres de pages automatiques */<br />
<br />
.firstHeading {<br />
display : none;<br />
}<br />
<br />
/* On supprime l'apparition du footer à l'impression */<br />
<br />
.printfooter {<br />
display: none;<br />
}<br />
<br />
/* CSS des classes personnalisées InSitu */<br />
<br />
@media (min-width:1880px) {<br />
/*div.one_page {<br />
max-height: 903px;<br />
aspect-ratio: 210/297;<br />
width: 100%;<br />
}*/<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 10rem;<br />
}<br />
<br />
.shadow {<br />
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
.important {<br />
font-size: 150%;<br />
font-weight: bold;<br />
color: rgb(243,146,0);<br />
margin: 1em 0px;<br />
}<br />
<br />
h1.title_page {<br />
color: rgb(234,86,13);<br />
font-size: 180%;<br />
font-family: sans-serif;<br />
padding: 1em 0;<br />
margin-top: 0;<br />
text-align: center;<br />
border-bottom: 0;<br />
font-weight: bold;<br />
}<br />
<br />
<br />
h1.title_page.bg-blue {<br />
color: white;<br />
background-color: #428bca;<br />
}<br />
<br />
h1.title_page.bg-green {<br />
color: white;<br />
background-color: #5cb85c;<br />
}<br />
<br />
.w-full {<br />
width:100%;<br />
}<br />
<br />
.w-half {<br />
width:50%;<br />
}<br />
<br />
.sup {<br />
font-variant-position: super;<br />
}<br />
<br />
.txt-is {<br />
color: rgb(243,146,0);<br />
}<br />
<br />
.txt-gris {<br />
color: #5b5b5d;<br />
}<br />
<br />
.flex {<br />
display: flex !important;<br />
}<br />
<br />
.inline-flex {<br />
display: inline-flex;<br />
}<br />
<br />
.wrap {<br />
flex-wrap: wrap;<br />
}<br />
<br />
.col {<br />
flex-direction: column;<br />
}<br />
<br />
.x_evenly {<br />
justify-content: space-evenly;<br />
}<br />
<br />
.x_center {<br />
justify-content: center;<br />
}<br />
<br />
.y_center {<br />
align-items: center;<br />
}<br />
<br />
.txt-center {<br />
text-align: center;<br />
}<br />
<br />
.txt-right {<br />
text-align: right;<br />
}<br />
<br />
.mt-20 {<br />
margin-top: 20px !important;<br />
}<br />
<br />
.mb-20 {<br />
margin-bottom: 20px !important;<br />
}<br />
<br />
.ml-20 {<br />
margin-left: 20px !important;<br />
}<br />
<br />
.mr-20 {<br />
margin-right: 20px !important;<br />
}<br />
<br />
.m-20 {<br />
margin: 20px !important;<br />
}<br />
<br />
.img-full img {<br />
width: 100%;<br />
height: auto;<br />
}<br />
<br />
.info {<br />
font-family: Georgia, serif;<br />
font-style: italic;<br />
}<br />
<br />
.chiffre {<br />
display: inline-block;<br />
veritcal-align: middle;<br />
text-align: center;<br />
color: white;<br />
font-weight: 700;<br />
border-radius: 50%;<br />
background-color: rgb(243,146,0);<br />
width: 1.5em;<br />
height: 1.5em;<br />
margin-right: .2em;<br />
}<br />
<br />
.encadre {<br />
font-weight: 500;<br />
border-radius: 5px;<br />
padding: 10px;<br />
box-shadow: 2px 5px 8px rgb(234,86,13);<br />
}<br />
<br />
.encadre_alt {<br />
font-weight: 700;<br />
border-radius: 10px;<br />
border-top-left-radius:0px;<br />
padding: 10px;<br />
border: rgb(234,86,13) solid 2px;<br />
margin-top: 0px;<br />
}<br />
<br />
.encadre_alt_title {<br />
background-color: rgb(234,86,13);<br />
padding: 5px 10px 0px 10px;<br />
color: white;<br />
margin-bottom: 0px !important;<br />
border-radius: 10px 10px 0px 0px;<br />
display: block;<br />
font-weight: 700;<br />
text-align: center;<br />
width : fit-content;<br />
}<br />
<br />
.bold {<br />
font-weight: bold;<br />
}<br />
<br />
.bold .bold {<br />
font-weight: 900;<br />
}<br />
<br />
/* CSS cohérente avec l'impression */<br />
<br />
.replace_gif {<br />
display: none;<br />
}<br />
<br />
.print_only {<br />
display: none;<br />
}<br />
<br />
/* Sommaire auto ne s'affiche pas */<br />
.toc {<br />
display: none;<br />
}<br />
<br />
.docModif .toc {<br />
display: inline-block;<br />
}<br />
<br />
/*Liens de la toolbox dans la Sidebar ne s'affichent pas*/<br />
#t-whatlinkshere, #t-recentchangeslinked, #t-upload, #t-specialpages, #t-info, #t-permalink {<br />
display: none;<br />
}<br />
<br />
#t-print {<br />
display: inline;<br />
}<br />
<br />
/* personnalisation de la page Search */<br />
<br />
.searchButton {<br />
color: white;<br />
background-color: #ea560d;<br />
}<br />
<br />
.vector-search-box-input {<br />
border-color: #ea560d;<br />
}<br />
<br />
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {<br />
background-color: #ea560d;<br />
border-color: #ea560d;<br />
}<br />
<br />
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {<br />
background-color: #5a5959;<br />
border-color: #5a5959;<br />
}<br />
<br />
.mw-search-createlink {<br />
display: none;<br />
}<br />
<br />
.mw-search-result-heading {<br />
font-size: 1.2em;<br />
}<br />
<br />
.mw-search-result-heading a {<br />
color: #ea560d;<br />
}<br />
<br />
.mw-search-result-data {<br />
display: none;<br />
}<br />
<br />
/* Correction de certaines choses */<br />
<br />
/* CSS personnalisée par Thomas Varlet que je copie-colle pour le bon fonctionnement */<br />
<br />
/* CSS de la page d'accueil, par Thomas Varlet légèrement adaptée par Marion Delacroix, 2014-2022 */<br />
<br />
/*! Propriétés du body */<br />
<br />
* {<br />
box-sizing: border-box;<br />
}<br />
<br />
/* Ne fonctionne pas. Hautement expérimental. Géré en js<br />
!#firstheading + #bodyContent:has(div:has(div:has(div:has(.body_mp))) {<br />
display: none;<br />
}<br />
*/<br />
<br />
.body_mp {<br />
<br />
box-sizing: border-box;<br />
background-color: #fff;<br />
font-family: 'Open Sans'; /*sans-serif;*/<br />
font-size: 16px;<br />
min-height: 100%;<br />
padding-top: 20px;<br />
width: 100%;<br />
color:#5a5959;<br />
}<br />
<br />
.body_mp .container {<br />
width: 100%;<br />
margin: 0 auto;<br />
display: flex;<br />
flex-wrap: wrap;<br />
justify-content: space-between;<br />
}<br />
<br />
@media (min-width: 768px) {<br />
.body_mp .container {<br />
width: 90%;<br />
}<br />
}<br />
<br />
.body_mp ul {<br />
list-style-type: none;<br />
list-style-image: none;<br />
margin: 0;<br />
padding: 0 10px<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Liens */<br />
<br />
.body_mp a {<br />
color: #ea560d;<br />
text-decoration: none;<br />
}<br />
<br />
.body_mp a:hover,<br />
.body_mp a:focus {<br />
color: #5a5959;<br />
text-decoration: underline;<br />
}<br />
<br />
<br />
.body_mp .wiki a<br />
{<br />
color: #5a5959;<br />
font-size: 14px;<br />
}<br />
<br />
.body_mp .btn-orange a:hover<br />
{<br />
color: #5a5959;<br />
<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Mise en forme des textes et titres */<br />
<br />
.body_mp .en-tete {<br />
margin-bottom: 50px;<br />
}<br />
<br />
.body_mp .soustitre {<br />
font-size: 18px;<br />
}<br />
<br />
<br />
.body_mp h1 {<br />
font-family: inherit;<br />
color: #ea560d;<br />
font-size: 30px;<br />
padding-top: 40px;<br />
text-align: center;<br />
font-weight: 300;<br />
border-bottom: 0px;<br />
}<br />
<br />
.body_mp h3 {<br />
font-family: inherit;<br />
color: #5a5959;<br />
font-weight: 600;<br />
}<br />
<br />
.body_mp h4<br />
{<br />
font-size: 35px;<br />
font-weight: 300;<br />
color: #ea560d;<br />
text-align: left;<br />
<br />
}<br />
<br />
.body_mp .wiki {<br />
display: flex;<br />
flex-direction: column;<br />
justify-content: space-between;<br />
padding: 0px;<br />
margin-bottom: 20px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ddd;<br />
text-align: center;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
width: 100%;<br />
}<br />
<br />
@media (min-width: 768px) {<br />
.body_mp .wiki {<br />
width:45%;<br />
}<br />
}<br />
<br />
@media (min-width: 1200px) {<br />
.body_mp .wiki {<br />
width:22%;<br />
}<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Mise en forme des textes et titres pour écrans */<br />
@media (min-width: 768px)<br />
{ <br />
.body_mp h1 {<br />
font-family: inherit;<br />
color: #ea560d;<br />
font-size: 50px; <br />
padding-top: 0px;<br />
text-align: center;<br />
font-weight: 300;<br />
border-bottom: 0px;<br />
} <br />
}<br />
<br />
/*! Espacements */<br />
<br />
.body_mp .spacer3 {<br />
padding-top: 20px;<br />
padding-bottom: 20px;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Espacements pour écrans */<br />
<br />
@media (min-width: 768px)<br />
<br />
{<br />
<br />
.body_mp .spacer3 {<br />
padding-top: 20px;<br />
padding-bottom: 20px;<br />
}<br />
<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Button */<br />
<br />
.body_mp .btn-large {<br />
color: #ea560d;<br />
background-color: #fff;<br />
border-color: #ea560d;<br />
border-width: 1px;<br />
}<br />
<br />
.body_mp .btn-orange {<br />
background-color: #ea560d;<br />
color: #fff;<br />
display: inline;<br />
padding: .6em .6em .6em .6em;<br />
font-size: 90%;<br />
line-height: 1;<br />
border: 0px solid #ea560d;<br />
text-align: center;<br />
white-space: nowrap;<br />
vertical-align: middle;<br />
border-radius: .25em;<br />
<br />
}<br />
<br />
.body_mp .btn-orange a.external {<br />
color: #fff;<br />
}<br />
<br />
.body_mp .btn-orange a.external:visited {<br />
color: #000;<br />
}<br />
<br />
.body_mp .btn-orange a.external {<br />
background-image: none;<br />
padding-right: 0;<br />
}<br />
<br />
.body_mp .btn-gen {<br />
margin: 20px 0;<br />
}<br />
<br />
.body_mp .btn-gen a {<br />
padding: 6px 12px;<br />
text-align: center;<br />
border: 1px solid rgba(0,0,0,0.2);<br />
border-radius: 4px;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/*! Images */<br />
.body_mp .cadreimg {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.body_mp .bg-blue {<br />
background-color: #438bc5;<br />
padding: 20px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.body_mp .bg-green {<br />
background-color: #5fb25c;<br />
padding: 20px;<br />
display: flex;<br />
justify-content: center;<br />
align-items: center;<br />
}<br />
<br />
.body_mp .bg-blue img, .body_mp .bg-green img {<br />
width: 25%;<br />
height: auto;<br />
}<br />
<br />
/*! ================================================================ */<br />
<br />
/* CSS générale par Thomas Varlet, 2014 */<br />
<br />
/**<br />
* MediaWiki style sheet for general styles on basic content elements<br />
*<br />
* Styles for basic elements: links, lists, etc...<br />
*<br />
* This style sheet is used by the Monobook and Vector skins.<br />
*/<br />
<br />
/* Links */<br />
a {<br />
text-decoration: none;<br />
color: #0645ad;<br />
background: none;<br />
}<br />
/*a:visited {<br />
color: #5a5959;<br />
}*/<br />
a:active {<br />
color: #faa700;<br />
}<br />
a:hover, a:focus {<br />
text-decoration: underline;<br />
}<br />
a.stub {<br />
color: #772233;<br />
}<br />
a.new, #p-personal a.new {<br />
color: #ba0000;<br />
}<br />
a.new:visited, #p-personal a.new:visited {<br />
color: #a55858;<br />
}<br />
<br />
.liendetails > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.liendetails > a:hover<br />
{<br />
text-decoration: none;<br />
color: #5a5959;<br />
background: none;<br />
}<br />
<br />
.liendetails > a:visited<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
<br />
<br />
.lienparcours > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.lienparcours > a:hover<br />
{<br />
text-decoration: underline;<br />
color: #31B3CE;<br />
background: none;<br />
}<br />
<br />
.lienparcours > a:visited<br />
{<br />
text-decoration: underline;<br />
color: #31B3CE;<br />
background: none;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
/* Interwiki Styling */<br />
.mw-body a.extiw,<br />
.mw-body a.extiw:active {<br />
color: #36b;<br />
}<br />
.mw-body a.extiw:visited {<br />
color: #636;<br />
}<br />
.mw-body a.extiw:active {<br />
color: #b63;<br />
}<br />
<br />
<br />
<br />
/* Inline Elements */<br />
img {<br />
border: none;<br />
vertical-align: middle;<br />
}<br />
hr {<br />
height: 1px;<br />
color: #aaa;<br />
background-color: #aaa;<br />
border: 0;<br />
margin: .2em 0;<br />
}<br />
<br />
/* Structural Elements */<br />
h1,<br />
h2,<br />
h3,<br />
h4,<br />
h5,<br />
h6 {<br />
color: black;<br />
background: none;<br />
font-weight: normal;<br />
margin: 0;<br />
overflow: hidden;<br />
padding-top: .5em;<br />
padding-bottom: .17em;<br />
border-bottom: 1px solid #aaa;<br />
}<br />
h1 {<br />
font-size: 188%;<br />
}<br />
h2 {<br />
font-size: 150%;<br />
}<br />
h3,<br />
h4,<br />
h5,<br />
h6 {<br />
border-bottom: none;<br />
font-weight: bold;<br />
}<br />
h3 {<br />
font-size: 132%;<br />
}<br />
h4 {<br />
font-size: 116%;<br />
}<br />
h5 {<br />
font-size: 108%;<br />
}<br />
h6 {<br />
font-size: 100%;<br />
}<br />
<br />
/* Some space under the headers in the content area */<br />
h1,<br />
h2 {<br />
margin-bottom: .6em;<br />
}<br />
h3,<br />
h4,<br />
h5 {<br />
margin-bottom: .3em;<br />
}<br />
<br />
p {<br />
margin: .4em 0 .5em 0;<br />
line-height: 1.5em;<br />
}<br />
p img {<br />
margin: 0;<br />
}<br />
<br />
ul {<br />
line-height: 1.5em;<br />
list-style-type: square;<br />
margin: .3em 0 0 1.6em;<br />
padding: 0;<br />
}<br />
ol {<br />
line-height: 1.5em;<br />
margin: .3em 0 0 3.2em;<br />
padding: 0;<br />
list-style-image: none;<br />
}<br />
li {<br />
margin-bottom: .1em;<br />
}<br />
dt {<br />
font-weight: bold;<br />
margin-bottom: .1em;<br />
}<br />
dl {<br />
margin-top: .2em;<br />
margin-bottom: .5em;<br />
}<br />
dd {<br />
line-height: 1.5em;<br />
margin-left: 1.6em;<br />
margin-bottom: .1em;<br />
}<br />
<br />
/* IE 6 and 7 lack support for quotes aroud the <q> element ('::before' and '::after'<br />
pseudoelements, 'quotes' property). Let's italicize it instead (using the star hack). */<br />
q {<br />
*font-style: italic;<br />
}<br />
<br />
pre, code, tt, kbd, samp, .mw-code {<br />
/*<br />
* Some browsers will render the monospace text too small, namely Firefox, Chrome and Safari.<br />
* Specifying any valid, second value will trigger correct behavior without forcing a different font.<br />
*/<br />
font-family: monospace, Courier;<br />
}<br />
code {<br />
background-color: #f9f9f9;<br />
}<br />
pre, .mw-code {<br />
padding: 1em;<br />
border: 1px solid #ddd;<br />
color: black;<br />
background-color: #f9f9f9;<br />
}<br />
<br />
/* Tables */<br />
table {<br />
font-size: 100%;<br />
<br />
}<br />
<br />
/* Forms */<br />
fieldset {<br />
border: 1px solid #2f6fab;<br />
margin: 1em 0 1em 0;<br />
padding: 0 1em 1em;<br />
line-height: 1.5em;<br />
}<br />
fieldset.nested {<br />
margin: 0 0 0.5em 0;<br />
padding: 0 0.5em 0.5em;<br />
}<br />
legend {<br />
padding: .5em;<br />
font-size: 95%;<br />
}<br />
form {<br />
border: none;<br />
margin: 0;<br />
}<br />
textarea {<br />
width: 100%;<br />
padding: .1em;<br />
display: block;<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
}<br />
select {<br />
vertical-align: top;<br />
}<br />
<br />
/* Emulate Center */<br />
.center {<br />
width: 100%;<br />
text-align: center;<br />
}<br />
*.center * {<br />
margin-left: auto;<br />
margin-right: auto;<br />
}<br />
/* Small for tables and similar */<br />
.small {<br />
font-size: 94%;<br />
}<br />
table.small {<br />
font-size: 100%;<br />
}<br />
<br />
/* Images et videos */<br />
.cadrevideo {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #eee;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.cadreimg {<br />
display: inline-block; max-width: 100%;<br />
height: auto;<br />
padding: 10px;<br />
line-height: 1.42857143;<br />
background-color: #fff;<br />
border: 1px solid #ccc;<br />
border-radius: 4px;<br />
-webkit-transition: all .2s ease-in-out;<br />
transition: all .2s ease-in-out;<br />
<br />
}<br />
<br />
.liendetails {<br />
width: 120px;<br />
}<br />
<br />
.commentaires {<br />
border: 1px solid #ddd;<br />
background-color: #f9f9f9;<br />
font-family: Courier;<br />
font-size: inherit;<br />
line-height: 1.3em;<br />
padding: 1em;<br />
width: 80%;<br />
}<br />
<br />
.commentairesplus {<br />
border-left: 5px solid #428bca;<br />
background-color: #eeeeee;<br />
font-family: inherit;<br />
font-size: inherit;<br />
line-height: 1.3em;<br />
padding: 1em;<br />
width: 80%;<br />
}<br />
<br />
.entetehome1 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome2 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome3 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome4 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome5 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome6 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #5CB85C; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.entetehome7 {<br />
font-size: 105%; <br />
padding: 0.4em; <br />
background-color: #428bca; <br />
color: #fff;<br />
text-align: center;<br />
}<br />
<br />
.titreboussole{<br />
font-size: 23px; <br />
padding-top: 30px; <br />
padding-bottom: 20px; <br />
color: #f0ad4e;<br />
text-align: left;<br />
font-weight: bold;<br />
}<br />
<br />
.titrehome {<br />
font-size: 18px; <br />
padding-top: 20px; <br />
color: #000;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
<br />
.soustitrehome {<br />
font-size: 18px; <br />
color: #fff;<br />
text-align: left;<br />
font-weight: bold;<br />
}<br />
<br />
.boussolehome {<br />
<br />
border: 1px solid #aaaaaa;<br />
padding: 0.4em; <br />
background-color: #fff; <br />
color: #000;<br />
text-align: center;<br />
}<br />
<br />
.etiquettehome {<br />
background-color: #f0ad4e; <br />
color: #fff; <br />
display: inline; <br />
padding: .2em .6em .3em; <br />
font-size: 90%; <br />
font-weight: bold; <br />
line-height: 1; <br />
border: 0px solid #ea560d; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: baseline; <br />
border-radius: 0px;<br />
}<br />
<br />
.etiquetteexpert {<br />
background-color: #5cb85c; <br />
color: #fff; <br />
display: inline; <br />
padding: .2em .6em .3em; <br />
font-size: 70%; <br />
font-weight: bold; <br />
line-height: 1; <br />
border: 0px solid #5cb85c; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle;<br />
border-radius: 0px;<br />
}<br />
<br />
<br />
<br />
.btnhome {<br />
background-color: #fff; <br />
color:#333; <br />
display: inline; <br />
padding: .6em .6em .6em .6em; <br />
font-size: 100%; <br />
line-height: 1; <br />
border: 1px solid #ccc; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle; <br />
border-radius: .25em;<br />
}<br />
<br />
.btnhome:hover,<br />
.btnhome:focus,<br />
.btnhome:active,<br />
.btnhome.active {<br />
color: #333;<br />
background-color: #ebebeb;<br />
border-color: #adadad;<br />
}<br />
<br />
<br />
.btnhome > a<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnhome > a:hover<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnhome > a:visited<br />
{<br />
text-decoration: none;<br />
color: #333;<br />
background: none;<br />
}<br />
<br />
.btnretour {<br />
background-color: #ea560d; <br />
color:#333; <br />
display: inline; <br />
padding: .6em .6em .6em .6em; <br />
font-size: 100%; <br />
line-height: 1; <br />
border: 1px solid #ea560d; <br />
text-align: center; <br />
white-space: nowrap; <br />
vertical-align: middle; <br />
border-radius: .25em;<br />
}<br />
<br />
.btnretour:hover,<br />
.btnretour:focus,<br />
.btnretour:active,<br />
.btnretour.active {<br />
color: #fff;<br />
background-color: #5a5959;<br />
border-color: #5a5959;<br />
}<br />
<br />
<br />
.btnretour > a<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.btnretour > a:hover<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.btnretour > a:visited<br />
{<br />
text-decoration: none;<br />
color: #fff;<br />
background: none;<br />
}<br />
<br />
.chiffres {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: red;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresverts {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: green;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresbleus {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: blue;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
.chiffresgris {<br />
font-family: inherit;<br />
font-size: 25px;<br />
color: #c0c0c0;<br />
font-weight: bold;<br />
padding: 5px;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
.goog-te-gadget {float: left; margin-left: -30px;}<br />
.goog-te-combo {display: inline-block;}<br />
.goog-te-banner-frame.skiptranslate {display: none;}<br />
body {top: 0px;}<br />
.goog-tooltip {display: none;}<br />
.goog-tooltip:hover {display: none;}<br />
.goog-text-highlight {<br />
background-color: transparent;<br />
border: none; <br />
box-shadow: none;<br />
}<br />
.goog-te-gadget {font-size: 0px; }<br />
.goog-te-gadget img {display: none}<br />
.goog-logo-link {display: none;}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8746
MediaWiki:Print.css
2024-06-12T12:19:22Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8745
MediaWiki:Print.css
2024-06-12T12:17:20Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
.one_page * {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8744
MediaWiki:Print.css
2024-06-12T12:16:44Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8743
MediaWiki:Print.css
2024-06-12T12:16:16Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8742
MediaWiki:Print.css
2024-06-12T12:15:48Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 20px;<br />
line-height: 24px;<br />
}<br />
<br />
.one_page * {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
p, ul, li {<br />
page-break-inside: avoid;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion
https://fr.wiki.insitu.education//index.php?title=Liste_et_tarif_des_catalogues&diff=8741
Liste et tarif des catalogues
2024-06-12T12:12:52Z
<p>Marion : </p>
<hr />
<div><div id="top"></div><br />
<table width="100%"><br />
<tr><br />
<td><br />
<h1 class="title_page no_print">Liste et tarifs des catalogues</h1><br />
<br />
<!-- contenu --><br />
<br />
<div class="one_page"><br />
<br />
<div class="flex mb-20" style="position:relative;overflow:hidden;padding:0.5rem 0.5rem 1rem 1rem;min-height:15rem;"><br />
<div style="position:absolute;z-index:1;top:30%;left:50%;transform:translate(-50%,-50%);width:100%;" class="img-full">[[Image:Image_list_cat.jpg|link=]]</div><br />
<div class="w-full" style="z-index:2;"><br />
<div class="img-full" style="max-width:100px;margin-left:auto;">[[Image:Logo InSitu.png|link=]]</div><br />
<div class="w-full flex x_center y_center wrap" style="position:absolute;top:0;left:0;height:100%;"><br />
<div class="txt-center" style="background-color:rgba(255,255,255,0.6);padding:1rem;border-radius:20px;"><br />
<p class="important">+ de 150 références de fabricants</p><br />
<p class="big bold txt-center">Tarif 2024 : <br><br />
26,90 € HT / mois, par catalogue, et par point de vente</p><br />
</div><br />
</div><br />
</div><br />
</div><br />
<br />
<p class="txt-center"><span class="info chiffre">i</span><i>L'attribution des catalogues est soumise à l'accord des fabricants et aux accords de votre réseau.</i></p><br />
<br />
<div class="flex wrap"><p class="encadre_alt_title">CATALOGUE PAYANT SELON LE TARIF EN VIGUEUR</p></div><br />
<br />
<div class="col-w-10 encadre_alt" style="margin-bottom:5px;"><br />
<p class="txt-is bold big">CUISINE</p><br />
<ul><br />
<li>ABC</li><br />
<li>ALNO</li><br />
<li>ALVIC CENTER</li><br />
<li>AR DUE</li><br />
<li>ARMONY</li><br />
<li>ARREDO3</li><br />
<li>ARREX</li><br />
<li>ARTEGO</li><br />
<li>AXIS CUCINE</li><br />
<li>BALLERINA</li><br />
<li>BEAUFORMAT CUBE</li><br />
<li>BECKERMANN</li><br />
<li>BINOVA</li><br />
<li>BRIGITTE KÜCHEN</li><br />
<li>BURGER</li><br />
<li>CHABERT DUVAL</li><br />
<li>CHARLES REMA</li><br />
<li>CUISINES MOREL</li><br />
<li>CUISINHOME</li><br />
<li>CUISINHOME KIT</li><br />
<li>DELTA COCINAS</li><br />
<li>DISCAC</li><br />
<li>ERGONOMA</li><br />
<li>FARO BY ALVIC</li><br />
<li>GEDIMAT</li><br />
<li>GM CUCINE</li><br />
<li>GODIN</li><br />
<li>HÄCKER CONCEPT</li><br />
<li>HÄCKER SYSTEMAT</li><br />
<li>HOFEMEIER</li><br />
<li>IMPULS</li><br />
<li>INOVA</li><br />
<li>INSTINCT</li><br />
<li>LOGISIETE</li><br />
<li>MITON</li><br />
<li>NOBILIA</li><br />
<li>NOLTE</li><br />
<li>NOLTE ECO</li><br />
<li>OB COCINAS</li><br />
<li>OCA KÜCHEN</li><br />
<li>PHILIPPE</li><br />
<li>PINO</li><br />
<li>PRONTO</li><br />
<li>PYRAM</li><br />
<li>ROTPUNKT</li><br />
<li>SACHSEN KÜCHEN</li><br />
<li>SAGNE</li><br />
<li>SCHRÖDER S126</li><br />
<li>SCHRÖDER S140</li><br />
<li>SCHÜLLER</li><br />
<li>SCHÜLLER NEXT</li><br />
<li>SELECT</li><br />
<li>STORI CONTRACT</li><br />
<li>STORI CUISINE</li><br />
<li>STÖRMER</li><br />
<li>STÖRMER KITCHENCLICK</li><br />
<li>STOSA</li><br />
<li>STUDIO DESIGN</li><br />
<li>TEISSA</li><br />
<li>TEISSEIRE</li><br />
<li>TLK</li><br />
<li>YOU</li><br />
<li>YOU Kit</li><br />
<li>ZELIG</li><br />
</ul><br />
<br />
<p class="txt-is bold big">ACCESSOIRES</p><br />
<ul><br />
<li>YOU Tables & chaises (3D)</li></ul><br />
<br />
<p class="txt-is bold big">SDB</p><br />
<ul><br />
<li>ABC EVOLUTION</li><br />
<li>BADEA</li><br />
<li>CHABERT DUVAL</li><br />
<li>CHARLES REMA</li><br />
<li>CUISINHOME</li><br />
<li>DISCAC</li><br />
<li>EKIMOB</li><br />
<li>FARO</li><br />
<li>MOREL SDB</li><br />
<li>NOLTE SPA</li><br />
<li>PYRAM COMPOSABLES</li><br />
<li>STORI BAIN</li><br />
<li>YOU</li><br />
</ul><br />
<br />
<p class="txt-is bold big">RANGEMENT</p><br />
<ul><br />
<li>AMBIANCE DRESSING</li><br />
<li>ARASANZ</li><br />
<li>MOREL RANGEMENT</li><br />
<li>EKIMOB</li><br />
<li>IN-IPSO</li><br />
<li>PORTÉA</li><br />
<li>SOPAM</li><br />
</ul><br />
<br />
<p class="txt-is bold big">PLAN</p><br />
<ul><li>BELGRANI</li><br />
<li>JETSTONE</li><br />
<li>LECHNER</li><br />
<li>OUEST POSTFORMING</li><br />
</ul><br />
</div><br />
<br />
<div class="flex wrap"><p class="encadre_alt_title">CATALOGUE GRATUIT</p></div><br />
<br />
<div class="encadre_alt col-w-10" style="margin-bottom:5px;"><br />
<p class="txt-is bold big">CUISINE</p><br />
<ul><br />
<li>ACTUA</li><br />
<li>ATLANTIC INOX</li><br />
<li>BATIMAN</li> <br />
<li>CESAR</li><br />
<li>CONCRETA</li><br />
<li>CUISINES D’ETE BY ACS</li><br />
<li>DOIMO CUCINE</li><br />
<li>LINÉAPRO</li><br />
<li>MOBILTURI</li><br />
<li>PLEBANI</li><br />
</ul><br />
<br />
<p class="txt-is bold big">ACCESSOIRES</p><br />
<ul><br />
<li>AMR CONCEPT</li><br />
<li>APPROSINE (chiffrage)</li><br />
<li>BLANCO (3D)</li><br />
<li>BRADANO (3D)</li><br />
<li>CASASEDIA (3D)</li><br />
<li>CRÉALIGNE (3D)</li><br />
<li>FRANKE (3D)</li><br />
<li>GROHE (chiffrage)</li><br />
<li>INTERBAT (chiffrage)</li><br />
<li>IPUM (3D)</li><br />
<li>KALICERAM (3D)</li><br />
<li>KVR DISTRIBUTION (chiffrage)</li><br />
<li>LMC (chiffrage)</li><br />
<li>LUISINA (chiffrage)</li><br />
<li>MAUSSI (3D)</li><br />
<li>MSA (3D)</li><br />
<li>PIXPANO (3D)</li><br />
<li>PLANET OUTDOOR (3D)</li><br />
<li>PXI (chiffrage)</li><br />
<li>SAMAC (chiffrage)</li><br />
<li>SCHUTTE (chiffrage)</li><br />
<li>SINAHIA (3D)</li><br />
<li>VULLOW & FACTO </li><br />
</ul><br />
<br />
<p class="txt-is bold big">SDB</p><br />
<ul><br />
<li>AZZURRA</li><br />
<li>BAXAR</li><br />
</ul><br />
<br />
<p class="txt-is bold big">PLAN</p><br />
<ul><br />
<li>ACS</li><br />
<li>CERESER</li><br />
<li>CONSENTINO</li><br />
<li>FIDELEM</li><br />
<li>FLIP DESIGN</li><br />
<li>GRANICO</li><br />
<li>INTEGRA</li><br />
<li>LAISNÉ</li><br />
<li>LAMINAM</li><br />
<li>LEVANTINA</li><br />
<li>LUISINA</li><br />
<li>PIERREDEPLAN</li><br />
<li>SIMPLYCERAM</li><br />
<li>SOFEMA</li><br />
<li>STRATAGEM</li><br />
<li>TOPSTAR</li><br />
</ul><br />
<br />
<p class="txt-is bold big">SITES INTEGRES</p><br />
<ul><br />
<li>AGENSIA</li><br />
<li>DER KREIS</li><br />
<li>GPDIS</li><br />
<li>SISCA</li><br />
</ul><br />
</div><br />
<br />
<div class="flex wrap" style="justify-content:space-between;"><p class="encadre_alt_title">ELECTROMENAGER</p><p class="bold">Chiffrage gratuit, 3D payante sauf catalogues<sup class="txt-is"> gratuit</sup></p></div><br />
<br />
<div class="encadre_alt col-w-10 mb-20"><br />
<ul><br />
<li>AEG</li><br />
<li>AIRLUX</li><br />
<li>AMICA</li><br />
<li>ASKO</li><br />
<li>AVINTAGE</li><br />
<li>BEKO</li><br />
<li>BORA</li><br />
<li>BOSCH</li><br />
<li>BRANDT</li><br />
<li>CANDY</li><br />
<li>DE DIETRICH</li><br />
<li>DELONGHI</li><br />
<li>ELECTROLUX<sup class="txt-is"> gratuit</sup></li><br />
<li>ELICA<sup class="txt-is"> gratuit</sup></li><br />
<li>ESISTYLE</li><br />
<li>FABER</li><br />
<li>FALMEC</li><br />
<li>FAURE</li><br />
<li>FRANKE<sup class="txt-is"> gratuit</sup></li><br />
<li>GAGGENAU</li><br />
<li>GENERAL ELECTRIC</li><br />
<li>GLEM</li><br />
<li>GORENJE</li><br />
<li>GRUNDIG</li><br />
<li>HOTPOINT</li><br />
<li>INDESIT</li><br />
<li>KITCHENAID</li><br />
<li>KUPPERSBUSCH</li><br />
<li>LE CHAI</li><br />
<li>LEISURE</li><br />
<li>LIEBHERR</li><br />
<li>MIELE</li><br />
<li>NEFF</li><br />
<li>NORD INOX</li><br />
<li>NOVY</li><br />
<li>PANDO</li><br />
<li>ROBLIN</li><br />
<li>ROSIÈRES</li><br />
<li>SAMSUNG</li><br />
<li>SAUTER</li><br />
<li>SCHNEIDER</li><br />
<li>SIEMENS</li><br />
<li>SMEG</li><br />
<li>TEKA</li><br />
<li>VINOBOX</li><br />
<li>VIVA</li><br />
<li>V-ZUG</li><br />
<li>WHIRLPOOL</li><br />
</ul><br />
</div><br />
<br />
<p class="print_only txt-center">Demandez votre catalogue auprés de notre service commercial : commercial@transtechnology.fr</p><br />
<p class="txt-center print_only">Transtechnology • S.A.S. au capital de 200 000 € • SIREN 400 220 687 • RCS Versailles • APE 4651Z 12, Avenue des Prés • 78180 MONTIGNY-LE BRETONNEUX • Tél. : +33&nbsp;(0)1&nbsp;47&nbsp;41&nbsp;89&nbsp;90 • www.transtechnology.fr • commercial@transtechnology.fr • À jour du {{LOCALDAY}}/{{LOCALMONTH}}/{{LOCALYEAR}} {{LOCALTIME}}</p><br />
<br />
</div><br />
<br />
</td><br />
<br />
<td valign="top"><br />
<br />
{{:Menu_Installer}}<br />
<br />
</td><br />
</tr><br />
</table><br />
<br />
<span class="btnretour">[[#top|Retour haut de page]]</span>&nbsp; <span class="btnhome">[[Installer le logiciel InSitu|Etape suivante]]</span></div>
Marion
https://fr.wiki.insitu.education//index.php?title=MediaWiki:Print.css&diff=8740
MediaWiki:Print.css
2024-06-12T12:09:32Z
<p>Marion : </p>
<hr />
<div>/* Le CSS placé ici affectera les impressions UNIQUEMENT. */<br />
<br />
* {<br />
font-size: 20px;<br />
line-height: 24px;<br />
}<br />
<br />
.one_page * {<br />
font-size: 10px;<br />
line-height: 12px;<br />
}<br />
<br />
.one_page p, .one_page ul, .one_page li {<br />
page-break-inside: avoid;<br />
font-size: 10px;<br />
}<br />
<br />
.big {<br />
font-size: 115%;<br />
}<br />
<br />
ul {<br />
list-style-position: inside;<br />
}<br />
<br />
div.one_page {<br />
height: 904px;<br />
/*aspect-ratio: 210/297;*/<br />
width: 100%;<br />
}<br />
<br />
div.one_page .col-w-10 {<br />
column-width: 12rem;<br />
}<br />
<br />
div.one_page .col-w-10 * {<br />
padding-bottom: 2px;<br />
padding-top: 0px;<br />
margin: 0px;<br />
page-break-inside: auto;<br />
}<br />
<br />
.firstHeading {<br />
font-size: 18px;<br />
padding: 0px;<br />
margin: 0px;<br />
}<br />
<br />
h1.title_page * {<br />
font-size: 18px;<br />
}<br />
<br />
.gif, .barre_menu, .cadrevideo, .btnretour, .btnhome, .firstHeading, .no_print {<br />
display: none;<br />
}<br />
<br />
/* On règle le problème des 80%-100% en version web/imprimée */<br />
<br />
table:first-of-type tr:first-child td:last-child {<br />
display: none;<br />
width: 0%;<br />
}<br />
<br />
table:first-of-type tr:first-child td:first-child {<br />
border: 5px solid red<br />
width: 100%;<br />
padding-right: 1px;<br />
}<br />
<br />
.replace_gif {<br />
display: block;<br />
}<br />
<br />
.print_only {<br />
display: block;<br />
}<br />
<br />
/* On retire le footer du print (écritures automatiques) */<br />
<br />
#footer {<br />
display: none;<br />
}</div>
Marion