Archives du Pr. Kendrick
logo.png
logo.png

Archives du Pr.Kendrick


SCP-Logo-2400.png

Bienvenue sur ma sandbox, ici, vous pourrez trouver (presque) tous mes travaux en rapport avec la fondation
Je suis maniaque J'aime bien quand mes affaires sont rangées et que tout est clair, je viendrais pas vous embêter sur le rangement de vos affaires, mais les miennes le sont (déjà que j'aime bien tout ranger, si on me donne la possibilité de faire des menus déroulants, des tableaux avec des codes couleurs, et des onglets, j'allais pas me priver)
Dans l'onglet archives vous pourrez trouver des tableaux avec des codes couleurs expliquant clairement l'état d'avancement de mes travaux, et dans quels onglets les trouver.

Bonne lecture


Dans les blocs divs, de nombreux arguments sont utilisés, et ils sont parfois complexes, je compte donc expliquer leur utilité, leur fonctionnement et donner un exemple d'utilisation de manière simple et abordable.

Padding


Cet argument permet de décider de l'écart entre la bordure du cadre et l'intérieur du cadre.
Les arguments sont des chiffres suivis de "px". La mention de l'unité est obligatoire. (→Exemple 1)

Pour que l'écart avec les bords soit différent selon le coté, il ne faut pas entrer une valeur, mais 4, dans l'ordre Haut Droite Bas Gauche. (→Exemple 2)

Attention, pour du texte, en fonction du cadre, il est possible que la valeur 0 du haut et du bas soient l'équivalent de 15 à droite et à gauche. donc, pour avoir un cadre à égale distance de chaque coté, il faut qu'il y ait 15px de plus à droite et à gauche qu'en haut et qu'en bas. (→Exemple 3)

Note : Padding n'accepte pas les valeurs négatives. une valeur négative sera considérée comme 0.


  • Exemple n°1 : "padding: 15px" va mettre 15 pixels d'écart entre les bords et le contenu à l'intérieur du cadre.

Exemple n°1

  • Exemple n°2 : "padding: 10px 0px 15px 30px" va mettre 10 pixels d'écart entre le contenu et le bord du haut, 0 entre le contenu et le bord de droite, 15 entre le contenu et le bord du bas, et 30 entre le contenu et le bord de gauche.

Exemple n°2

  • Exemple n°3 : "padding 10px 25px 10px 25px" va mettre le cadre à 10 pixels d'écart en haut et en bas, et à 25 pixels d'écart à droite et à gauche. Comme 10+15=25, tous les bords seront à égale distance du texte.

Exemple n°3



Background


Cet argument permet de déterminer la composition du fond du cadre.
Il accepte les couleurs par leur codes HTML (→ Exemple 1) comme par leurs noms en anglais (→ Exemple 2).
Pour les codes HTML des couleurs, voici un lien qui permet d'avoir facilement ledit code : http://html-color-codes.info/Codes-couleur-HTML/

Il accepte aussi les images, mais doit être écrit différemment, de la manière :

background: url(Url de l'image) [position] [répétition]

[position] signifie la position de l'image, les arguments attendus sont donc center, left, right, top ou bottom.
Il est possible d'utiliser deux arguments de positions qui ne se contredisent pas.
[répétition] désigne le nombre de répétitions de l'image : si cet argument n'est pas précisé, l'image remplira le cadre en mosaique. les autres arguments sont : "repeat-x" pour répéter l'image horizontalement, "repeat-y" pour répéter l'image verticalement, et "no-repeat" pour que l'image ne soit pas répétée.
L'argument "background-size:" permet de déterminer la taille de l'image utilisée.
Les arguments possibles sont : deux valeurs d'unité px (pour déterminer les dimensions de l'image), deux pourcentage (Pour avoir des dimensions relatives à celles de l'image originale), ou contain (pour que l'image s'adapte au cadre). (→ Exemple 3,4,5,6)
  • Exemple 1 : "background: #00FF00" va mettre un fond vert au cadre.

Exemple n°1

  • Exemple 2 : "background: yellow" va mettre un fond jaune au cadre.

Exemple n°2

Exemple n°3

Exemple n°4

Exemple n°5

Exemple n°6



Color


Cet argument permet de décider de la couleur du texte à l'intérieur du cadre.
Il accepte les couleurs par leur codes HTML (→ Exemple 1) comme par leurs noms en anglais (→ Exemple 2).
Pour les codes HTML des couleurs, voici un lien qui permet d'avoir facilement ledit code : http://html-color-codes.info/Codes-couleur-HTML/


  • Exemple 1 : "color: red" permet d'obtenir un texte rouge.

Exemple 1

  • Exemple 2 : "color: #0000FF" permet d'obtenir un texte bleu.

Exemple 2


Opacity


Cet argument permet de décider de l'opacité d'un élément.
Le seul argument accepté par opacity est une valeur sans unité comprise entre "0.0" et "1.0". (→ Exemples 1,2)
/!\ Pensez à mettre un point "." et pas une virgule "," dans le chiffre. /!\
L'argument opacity concerne tout l'élément dans lequel il est placé.


  • Exemple 1 : "opacity:0.8" permet d'obtenir un cadre légèrement transparent.

Exemple 1 : cadre normal

Exemple 1 : Opacité réglée à 0.8

  • Exemple 2 : "opacity:0.4" permet d'obtenir un cadre grandement transparent.

Exemple 2 : cadre normal

Exemple 2 : Opacité réglée à 0.4


Display


Cet argument permet de déterminer le comportement de l'élément.
Les arguments acceptés sont : "block" pour que le contenu aie les propriétés d'un bloc à part (→ Exemple 1), "inline-block" pour que le contenu de l'élément aie les propriétés d'un bloc à part, mais que le bloc lui même aie le comportement d'un texte normal (→ Exemple 2), et "list-item" pour que le contenu aie le comportement d'un élément de liste (→ Exemple 3).


  • Exemple 1 : "display : block" permet d'obtenir un bloc séparé du reste du contenu.

Exemple 1 : cadre 1

Exemple 1 : cadre 2

  • Exemple 2 : "display : inline-block" permet d'obtenir un bloc dont le contenu a des propriétés particulières, mais ayant les propriétés du texte pour le reste.

Exemple 2 : cadre 1

Exemple 2 : cadre 2

  • Exemple 3 : "display : list-item" permet d'obtenir un élément de liste.

Exemple 3 : cadre 1

Exemple 3 : cadre 2




Pour la gauche voici une série :
25-50-15-5 ─ 5-15-15-5 ─ 5-15-50-25
Les 25 ne peuvent être qu'en première et dernière position, et sont toujours collés à un 50, ce qui fait que la chaine commence toujours par 25-50… et termine toujours par …50-25.
Le 5 permet de lier le bloc aux autres, il sera toujours aux positions qui ne finissent pas la série : La dernière position d'un bloc du haut, la premier et dernière d'un bloc du milieu, et la première d'un bloc du bas.
Les 15 permettent de relier les autres valeurs en interne.
Un bloc du haut commence par 25-50… et termine par …-5, mais il manque une valeur.
On complète les espaces vides avec des 15, qui permettent de relier l'intérieur des blocs.
Le 15 n'est jamais à un extrême, il ne peut être qu'en 2e ou 3e position.

Salut pampipoupinoupichoupinoupinet

Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License