DocModif

Liens utiles

Pour uploader des images : Spécial:Téléverser

Classes de mise en page

chiffre

Cette classe sert à mettre un chiffre dans un cercle.

<span class="chiffre">0</span>

Exemple :

0

encadre

Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.

Pour un paragraphe :

<p class="encadre">Contenu textuel</p>

Pour plusieurs paragraphes :

<div class="encadre">
Contenu textuel 1

Contenu textuel 2
</div>

Exemple :

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.

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.

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.

flex

Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.

ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, leur taille diminuera en proportion.

ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.

<div class="flex">
<div>[[lien d'une image]]</div>
<p>Texte</p>
</div>

Exemple :

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.

Classes relatives au flex

ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.

col

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.

<div class="flex col">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

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.

x_center

Cette classe permet de centrer horizontalement des éléments d'un flex.

<div class="flex x_center">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

x_evenly

Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.

<div class="flex x_evenly">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

Classes relatives à l'impression

barre_menu

Cette classe sert à camoufler la barre latérale lors de l'impression.

<table width="100%" class="barre_menu">[...]</table>

Exemple :

Je suis visible à l'impression

• Je suis invisible à l'impression
• Je suis invisible à l'impression
• Je suis invisible à l'impression

gif

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.

<div class="cadreimg gif">[[lien du gif]]</div>

Ancienne façon de faire

<p class="cadreimg gif">[[lien du gif]]</p>

Exemple :

Gif invisible à l'impression.

replace_gif

Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.

<div class="cadreimg replace_gif">[[lien de l'image]]</div>

Ancienne façon de faire

<p class="cadreimg replace_gif">[[lien de l'image]]</p>

Exemple :

Image visible seulement à l'impression