Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 The Magician's Code

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
Admin
avatar
Messages : 179
Date d'inscription : 13/01/2012
Age : 29
Localisation : Belgique

MessageSujet: The Magician's Code   Sam 24 Nov - 10:52

Livre 1 - table des matières

 • C1 - Arcanes de manipulation du fond (background)

 • C2 - Arcanes de manipulation des dimensions (width, height)
   
 • C3 - Arcane de manipulation du texte (text-align)

 • C4 - Arcane d'alignement des cadres (float)

 • C5 - Arcane de manipulation des cadres extérieurs (margin)

 • C6 - Arcane de manipulation des cadres intérieurs (padding)

 • C7 - Arcanes de hiérarchie (position, z-index)


 



Livre 1 - formules entourant les blocs de texte :
Code:
 <div> texte </div>

    Information : un div seul sur forumactif ne sert à rien sans un style="" !
    Code:
     <div style=""> texte </div>
    La partie style="" de la formule signifie que notre balise div disposera de sa propre page CSS privée (à savoir le contenu à ajouter entrer les guillemets).







      C.1 - Arcanes de manipulation du fond (background)

      Ajouter des balises div autour d'un texte revient à entourer ce dernier d'un cadre invisible auquel il nous est possible de donner un fond (background) ! Dans ce chapitre sont listées toutes les arcanes ayant un impact sur le fond en question.

      background-color: nom_de_couleur; / background-color: #code_couleur;
        Cette arcane permet de donner une couleur de fond unie au cadre créé, soit en écrivant le nom entier ( ex: white, blue, green ) ou bien le code hexadécimal ( ex: #FFFFFF, #0000FF, #008000 ) de la couleur souhaitée.
        Code:
         <div style="background-color: lightblue;"> texte </div>
         <div style="background-color: #F51422;"> texte </div>
        Information : le cadre créé par notre balise div prend tout l'espace disponible sur la largeur mais adapte sa hauteur à celle du bloc de texte qu'il contient (voir C2 - Arcanes de manipulation des dimensions).


      background-image: url(lien_vers_l'image);
        Cette arcane permet de remplir le cadre avec une image de fond (dont il faut connaître le lien internet) contrairement à l'arcane précédente, qui permettait de le remplir avec une couleur unique.
        Code:
         <div style="background-image: url(http://img89.xooimage.com/files/5/3/b/sans-titre-39d575a.png);"> texte </div>
        Information : si l'image de fond est plus grande que le cadre, elle ne sera pas redimensionnée mais coupée ; tandis que si le cadre est plus grand, elle ne sera pas redimensionnée non plus mais se répètera plusieurs fois jusqu'à remplir toute la superficie du dit cadre.


      background-repeat: •••••••;
        Cette arcane permet de décider si et comment l'image de fond doit se répéter (voir arcane précédente). Les différentes valeurs pouvant être appliquées à cette arcane sont : repeat - autoriser l'image à se répéter horizontalement et verticalement ; repeat-x - autoriser l'image à se répéter horizontalement seulement ; repeat-y - autoriser l'image à se répéter verticalement seulement ; et no-repeat - ne pas autoriser l'image à se répéter.
        Code:
         <div style="background-repeat: no-repeat;"> texte </div>
        Information : si on refuse que l'image se répète, elle ira se coller sur le bord supérieur gauche du cadre.



      background-position: ••••••• •••••••;
        Cette arcane permet, si on empêche le fond de se répéter, de déplacer ce dernier où on le souhaite à l'intérieur du cadre ! La première valeur à donner représente la position horizontale de l'image ( left, center et right ) tandis que la seconde valeur représente la position verticale de l'image ( top, center, bottom ).
        Code:
         <div style="background-position: right bottom;"> texte </div>
        Information : si on ne donne qu'une seule des deux valeurs, la seconde sera automatiquement center.


      background-size: •••% •••%; / background-size: •••px •••px;
        Cette arcane permet de redimensionner l'image de fond en indiquant un pourcentage de la largeur totale du cadre ( ex: 100% - l'image prendra toute la largeur du cadre, 50% - l'image ne prendra que la moitié de la largeur du cadre ) et un pourcentage de la hauteur totale du cadre ( ex: 100% - l'image prendra toute la hauteur du cadre, 50% - l'image prendra la moitié de la hauteur du cadre ) ; ou bien en indiquant la valeur (fixe) en pixels de la largeur que doit prendre l'image ( ex: 100px, 200px ) et la valeur (fixe) en pixels de la hauteur que doit prendre l'image ( ex: 100px, 150px ).
        Code:
         <div style="background-size: 100% 100%;"> texte </div>
         <div style="background-size: 400px 250px;"> texte </div>
        Information : si on ne donne qu'une seule des deux valeurs, la seconde sera générée automatiquement.








      C.2 - Arcanes de manipulation des dimensions (width, height)

      Le cadre créé avec la balise div prend tout l'espace disponible horizontalement et s'adapte automatiquement à la hauteur du texte. Il nous est pourtant possible, à l'aide de ces deux arcanes, de lui imposer les dimensions de notre choix.

      width: •••px; / width: •••%;
        Cette arcane permet de modifier la largeur (width) du cadre : soit en indiquant un nombre fixe de pixels ( ex: 200px, 300px, 400px ) ou bien un pourcentage de la largeur totale disponible ( ex: 100% - utilise la totalité de l'espace disponible, 50% - utilise la moitié de l'espace disponible ).
        Code:
         <div style="width: 400px;"> texte </div>
         <div style="width: 50%;"> texte </div>
        Information : peu importe la largeur utilisée, le cadre restera aligné sur la gauche à moins de le déplacer avec d'autres arcanes ou la balise center.


      height: •••px;
        Cette arcane permet de modifier la hauteur (height) du cadre en indiquant un nombre fixe de pixels ( ex: 250px, 300px )
        Code:
         <div style="height: 250px;"> texte </div>
        Information : si la hauteur du cadre est plus petite que celle du texte, ce dernier sortira du cadre d'une façon peu élégante.








      C.3 - Arcane de manipulation du texte (text-align)

      Il est possible de modifier l'alignement du texte contenu entre les balises div.

      text-align: left; / text-align: right; / text-align: center; / text-align: justify;
        Cette arcane permet de modifier le texte, à savoir de l'aligner sur la gauche, sur la droite, de le centrer ou de le justifier.
        Code:
         <div style="text-align: center;"> texte </div>








      C.4 - Arcane d'alignement des cadres (float)

      Écrire deux balises div à la suite ne permet pas de placer deux tableaux sur la même ligne, même si l'espace disponible est suffisant ! Fermer un div provoque un "retour à la ligne", c'est pourquoi, si on veut aligner deux cadres horizontalement, il faut ajouter une arcane spéciale à chacun de nos divs :

      float: •••••••;
        Cette arcane permet de faire flotter les cadres (les autoriser à se trouver n'importe où sur la page) et de les pousser le plus possible sur la gauche (si la valeur left lui est attribuée) ou sur la droite (si la valeur right lui est attribuée).
        Code:
         <div style="float: left;"> texte </div>
        Information : une fois tous les divs munis de leurs arcanes float, il faut les placer les uns à côté des autres sans aucun retour à la ligne dans le code si on veut qu'ils s'alignent horizontalement. Un retour à la ligne signifie que le cadre suivant se situera en dessous des autres.








      C.5 - Arcane de manipulation des cadres extérieurs (margin)

      Il est possible de créer des marges autour des cadres créés (ce qui déplace ces derniers dans l'espace avec une précision au pixel près) grâce à l'arcane suivante et aux quatre formes qu'elle peut prendre :

      margin-•••••••: •••px; / margin-•••••••: •••%;
        Cette arcane permet de créer une marge sur la gauche ( si la valeur left est utilisée ), sur la droite ( si la valeur right est utilisée ), à la base ( si la valeur bottom est utilisée ) ou au sommet (si la valeur top est utilisée ) du cadre créé ; marge dont l'épaisseur vaut un nombre fixe de pixels ( ex: 50px, 70px ) ou un pourcentage de la largeur/hauteur de la page contenant le dit cadre ( ex: 20%, 50% ). Les quatre formes du margin peuvent être utilisées en même temps.
        Code:
         <div style="margin-left: 30px; margin-top: 25px"> texte </div>
         <div style="margin-right: 5%; margin-bottom: 10%;"> texte </div>
        Information : il est possible d'utiliser un margin avec une valeur en pixels et un second margin avec une valeur en pourcentage dans le même div, tout comme il est possible d'utiliser des valeurs négatives pour déplacer un cadre même si une marge est supposée le tenir à distance ( et donc de superposer plusieurs cadres, voir C7 - Arcanes de hiérarchie ).








      C.6 - Arcane de manipulation des cadres intérieurs (padding)

      Il est possible de créer des marges à l'intérieur des cadres créés (ce qui les fait grandir sans pour autant redimensionner les textes qu'ils contiennent) grâce à l'arcane suivante et aux quatre formes qu'elle peut prendre :

      padding-•••••••: •••px; / padding-•••••••: •••%;
        Cette arcane permet de créer une marge intérieure sur la gauche ( si la valeur left est utilisée ), sur la droite ( si la valeur right est utilisée ), à la base ( si la valeur bottom est utilisée ) ou au sommet (si la valeur top est utilisée ) du cadre créé ; marge dont l'épaisseur vaut un nombre fixe de pixels ( ex: 50px, 70px ) ou un pourcentage de la largeur/hauteur de la page contenant le dit cadre ( ex: 20%, 50% ). Les quatre formes du padding peuvent être utilisées en même temps.
        Code:
         <div style="padding-left: 30px; padding-top: 25px"> texte </div>
         <div style="padding-right: 5%; padding-bottom: 10%;"> texte </div>
        Information : il est possible d'utiliser un padding avec une valeur en pixels et un second padding avec une valeur en pourcentage dans le même div.








      C.7 - Arcanes de hiérarchie (position, z-index)

      Nous avons vu qu'il est possible de superposer des cadres les uns sur les autres, mais il nous est impossible de choisir quel cadre apparaît en premier et lequel doit se situer sous la pile, à moins d'utiliser ces arcanes :

      position: •••••••;
        Cette arcane permet de modifier la méthode de positionnement des cadres via ces valeurs : static, la méthode par défaut, signifiant que le dernier div dans le document possède la plus haute priorité tandis que le premier possède la plus basse priorité dans l'ordre d'apparition ; absolute ; fixed et relative.
        Code:
         <div style="position: relative;"> texte </div>
        Information : .




Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://bouillie-infame.forumgratuit.be
 

The Magician's Code

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim
» J'ai 2 code pour avoir 6 razoirs Shick Induition DÉJÀ DONNÉ
» Vidéos - générateur de code pour vidéo et player
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
 :: Île White Lady :: Forêt interdite (keep out)-
Poster un nouveau sujet   Répondre au sujet