« DocModif » : différence entre les versions

De WikInSituFr
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 42 : Ligne 42 :
Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.
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 est supérieure à la largeur de l'écran, ils se mettront à la ligne automatiquement.
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 dans une balise div.
<pre><div class="flex">
<pre><div class="flex">
<div>[[lien d'une image]]</div>
<div>[[lien d'une image]]</div>

Version du 30 novembre 2022 à 16:41

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 dans une balise div.

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

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.

Exemple gif.gif

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

Exemple img.jpg