Le codage pour les nuls

Le codage pour


les nuls

Je vais tenter de vous expliquer le charabia des fiches de codes en CSS,
pour que vous puissiez les modifier vous même, dans une certaine mesures
(taille, couleur, image etc...)

Les div...

Tout commence par là.

La div est une boucle de code. Elle peut être incluse dans une autre div.

Par exemple : Div1 [(div2)(div3)(div4)]  
La Div1 est "parent" des div2, div3 et div4. Ce qui aura été défini dans les div2, div3 et div4 sera inclue dans la Div1.

Considérez une Div comme un anneau. Il peut entourer ou être entouré par une autre Div, mais jamais se croiser comme les maillons d'une chaine.

Une div commence par

Code:

<div style="... ">

et se termine par

Code:

</div>

Ne pas confondre les balises HTML, qui sont entre des [...]
et celles de CSS qui sont entre <...>

Mélanger ces balises, peut parfois créer des bugs !

Créer un cadre avec une div

Les attributs simples possibles sont : Le paramétrage est expliqué après

- width : La largeur qui est exprimée en px ou en %
- height : La hauteur qui est exprimée en px, en % ou mise en "auto"
- border : Les bordures : qui sont définies par une épaisseur en px, une couleur, une nature (pleine, double, pointillés..), des arrondis aux angles
- margin : Son centrage par rapport à l'élément (div) qui l'encadre, exprimé en px ou mis en  "auto"
- padding : La marge interne (entre le cadre et le texte qu'il contient), exprimée en px ou mis en "auto"
- background-color : La couleur du fond, exprimé par une couleur, une opacité (qui affecte même le texte)
- background-image : Une image de fond, exprimée par une url, et sa manière de prise en compte (mise à l'échelle ou non)
- box-shadow : Une ombre, définie par une couleur et 3 largeur en px (le décalage, le floutage en x, le floutage en y)
- overflow : L'apparition d'une scroll barre sur la droite i le texte déborde, définie en "auto" (votre navigateur prend la main) ou scroll

Exemple ci-dessous :

Une 1ère div (bordure blanche fond vert) encadre une 2ème div (bordure en pointillé, fond gris avec opacité de 0,8 )

Dans la 1ère div :
- J'ai défini un padding: 20px, cela centre la 2ème div à l'intérieur.
- box-shadow, donne un halo sur la droite et le bas
- border: 3px double #fff, pour une bordure double il faut au minimum une largeur de 3px

Dans la 2ème div :
- background-color: #cccccc; opacity: 0.8, défini un fond gris avec une transparence de 0,8. (0 = transparent  et 1 = 100% opaque) le texte de la div est aussi affecté.
- padding: 20px définit une marge de 20px entre le texte et les bords du cadre
- overflow: auto, colle une scroll barre à droite
- border: 4px dotted #0f1428 définit une bordure en pointillé

Autre exemple :

La première div a une image en fond. Dans la 2ème div, j'ai placé une image.  
 Notez la différence de codage.

Code:

<div style="width:400px; height: 200px; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); margin: auto; padding: auto; border: 5px groove #7a4a0c; border-radius: 100px 0 100px 0; "><div style="margin: auto; padding: 20px;">
<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://img11.hostingpics.net/pics/3309092003.gif&sa=X&ei=3b1UVeuHB8TSU6vlgeAC&ved=0CAkQ8wc4Og&usg=AFQjCNHde52O5h_8EwuuFUBST9ONluPHYg" style="width: auto;"></div></div>

- width : La largeur qui est exprimée en px ou en % de la largeur définie dans la div parent

Code:

<div style="width: 200px;">Blabla...</div>

- height : La hauteur qui est exprimée en px, en % de la largeur définie dans la div parent ou mise en "auto". Pour la 1ère div, je vous conseille de mettre "auto", elle s'agrandira en fonction du contenu que vous ajoutez dedans.

Code:

<div style="width: 500px; height: auto;">Blabla...</div>

- border :
On peut définir les bordures individuellement, dans ce cas, spécifiez avant les attributs: border-left , border-right, border-top ou border-bottom
L'épaisseur peut être différente : border-width:1px 2px 3px 2px; (gauche, haut, droite, bas)

Les différents types de bordure :

Code:

<div style="width:200px; height: auto; font-family: Times New Roman; font-size: 18px; text-align: center; color: #fff; padding: 10px; border: 4px solid #27859c;">solid</div>

Les arrondis :
border-radius:10px ==> donne un arrondi de rayon 10 px aux 4 angles
border-radius:10px 100px 0 10px ==> angle supérieur gauche à 10 px, après on tourne dans le sens des aiguille d'une montre (pour une valeur à 0, pas besoin de mettre l'unité px)

Code:

<div style="border: 5px double #cccccc; border-radius: 10px 100px 0 10px;">Blabla...</div>

- margin :
margin: 15px => met une marge extérieure de 15px mini avec la div qui entoure celle-ci
Cette marge peut être spécifiée vis à vis d'un côté : margin-left, margin-right, margin-top ou margin-bottom
auto, valeur seule, marge calculée automatiquement,
inherit, valeur seule, hérite des propriétés de son parent

Code:

<div style="width: 500px; height : auto; margin-left: 20px; margin-top: 30px;">Blabla...</div>

- padding :
padding : 15px => met une marge intérieure de 15px mini avec le contenue de la div
Cette marge peut être spécifiée vis à vis d'un côté : padding-left, padding-right, padding-top ou padding-bottom
► très utile pour écarter du texte de son cadre

Code:

<div style="width: 500px; height : auto; padding: 50px;">Blabla...</div>

- background-color :
Généralement donnée en hexadécimal (#000000 pour le noir, #ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)
On peut y ajouter une valeur de transparence avec opacity (valeur de 0 pour transparent à 1 pour opaque) ex: opacity: 0.8   affecte tout le contenu de la div

Code:

<div style="width: 250px; height : 40px; background-color: #c5c5c5; opacity: 0.9;">Blabla...</div>

- background-image :
Permet de mettre une image en fond. la syntaxe est : background-image: url('https://i.servimg.com/u/f49/16/59/46/39/testde10.png')
On y ajoute des indicateur de positionnement :
background-repeat: repeat (ou no-repeat) reproduit X fois l'image si la taille de la div est plus grande que l'image
background-position: center center (ou 50% 50%) pour centrer l'image dans la div
background-position: left top (ou 0% 0%) pour la mettre en haut à gauche dans la div
background-position: right bottom (ou 100% 100%) pour la mettre en bas à droite dans la div
background-size : cover ou contain, l'image se redimensionne sans déformer à la taille de la div
background-size : auto, l'image garde sa taille initiale
background-size : % ou px, on impose la taille de l'image

Code:

<div style="width: 650px; height 100px: auto; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat;">Blabla...</div>

- box-shadow :
les deux 1er chiffres correspondent au décalage en x et y, le dernier l'épaisseur du floutage, suit la valeur de la couleur
box-shadow: 1px 1px 12px #555;

Code:

<div style="width: 500px; height : auto; box-shadow: 1px 1px 12px #555;">Blabla...</div>

- overflow :
Permet de gérer les débordements de texte
visible ou inherit : tout le texte sera visible et pourra parfois déborder sur le reste
hidden : ce qui dépasse du cadre de la div est invisible
auto : ce qui dépasse du cadre de la div sera visible grace à une scroll barre horizontale ou verticale (overflow-x, ou overflow-y force la scroll barre que dans un sens)
initial : garde les propriété de la div parent

Code:

<div style="width: 500px; height : auto; overflow: auto;">Blabla...</div>

Exemple d'une div avec tous les paramètres réunis :

Code:

<div style="width:400px; height: 250px; font-size: 14px; text-align: justify; color: #252524; background-image: url('http://i49.servimg.com/u/f49/16/59/46/39/testde10.png'); background-size : cover; background-repeat: no-repeat; background-color: white; opacity: 0.8; overflow: auto; padding: 30px; border: solid #212c57; border-width:1px 2px 3px 2px; border-radius:100px 10px 0 50px; box-shadow: 3px 3px 5px #8ca2f8; ">Blabla...Duis vel quam et enim interdum venenatis.</div>

Gérer du texte, police, taille...

Les attributs simples possibles sont :
- font-family: La police de caractère, on peut utiliser celles déjà contenues dans l'éditeur du forum (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Sans-serif, Serif, Times New Roman, Trebuchet MS et Verdana)
Il est possible d'ajouter une autre police supporté par GOOGLE Fonts. Attention, toutes ne supportent pas des transformation (gras, italique, etc...)

Le "link href..." peut être coller en fin de fiche ou au début

Code:

<div style="font-family: 'Frijole', cursive; font-size:35px;">Exemple</div>
<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>

- font-size: La taille, valeur en px

Code:

<div style="font-size: 18px;">Exemple...</div>

- font-weight: L'épaisseur des lettre, bold = gras, lighter = fin

Code:

<div style="font-weight: bold ;">Exemple...</div>

- text-align: Son centrage, les valeurs sont left, center, right ou justify.

Code:

<div style="text-align: justify;">Exemple...</div>

- font-style: Pour mettre en italique

Code:

<div style="font-style: italic;">Exemple...</div>

- line-height: Gère l'espacement des lignes de texte, valeur en px

Code:

<div style="line-height: 35px;">Exemple...</div>

- color: La couleur du texte, généralement donnée en hexadécimal (#000000 pour le noir, #ffffff pour le blanc), on la trouve aussi en rgb(154,205,50), les noms en anglais pour les couleurs basiques marchent aussi (black, white, red, green, etc)

Code:

<div style="color: green;">Exemple...</div>

- text-shadow: Son ombrage, le code est: text-shadow: 2px 2px 5px #ff0000. les 2 premiers chiffres sont le décalage en x et y, le 3ème la largeur du flou, ensuite le code couleur

Code:

<div style="text-shadow: 2px 2px 5px #ff0000;">Exemple...</div>

- text-transform: Impose des majuscules ou des minuscules.
capitalize = met le premier caractère de chaque mot en majuscules
lowercase = affichent tous les caractères en minuscule
uppercase = affichent tous les caractères en majuscule

Code:

<div style="text-transform: capitalize;">Exemple etc et voilà...</div>

- letter-spacing:: permet de changer l'écartement des lettres, cela peut être négatif pour serrer les caractères, valeur en px

Code:

<div style="letter-spacing: -1px;">Exemple...</div>

- text-decoration: permet de souligner, barrer, ou mettre un trait en dessus
line-through = barre le texte
overline = met une ligne au dessus du texte
underline = souligne le texte

Code:

<div style="text-decoration: underline ;">Exemple...</div>

Gérer les images :

taille, effets...

- Si je me sers de la fonction disponible dans l'éditeur du forum, j'ai ce code (en HTML)

Code:

[img]http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw[/img]

Qui me donne ce résultat :
Vous avez la possibilité de changer la largeur et la hauteur, mais vous devez calculer la proportion entre les 2 pour ne pas déformer l'image = GONFLANT ! Et on ne peut rien faire d'autre.






- L’intérêt est de pouvoir la redimensionner plus facilement et ensuite de lui ajouter des attributs sympathiques.

Le code commence par :

Code:

<img src="

Vous écrivez ensuite l'URL de l'image :

Code:

http://www.etc

Le code fini par :

Code:

">

Code de base (qui reproduit ce que fait le code HTML)

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw">

Gérer la largeur (Ici j'ai mis 300px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="width: 300px; (dans la boucle img)

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 300px;">

Gérer la hauteur (Ici j'ai mis 100px. La hauteur s'ajuste automatiquement)
L'attribut à ajouter est : style="height: 100px; (dans la boucle img)

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="height: 100px;">

Mettre une ombre

L'attribut a ajouter est : style="2px 2px 12px #83e5fe;"
Les 2 premiers nombres donnent le décalage en x et Y, le 3ème l'importance du floutage

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px;box-shadow: 2px 2px 12px #83e5fe;">

Mettre des arrondis

L'attribut a ajouter est : style=" border-radius: 40px 0 40px 0;"
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">

Ajouter une bordure

L'attribut a ajouter est : style="border: 10px groove #cccccc;" (épaisseur, type, couleur)
On commence par l'angle en haut à gauche et on tourne dans le sens des aiguille d'une montre

Code:

<img src="http://www.google.fr/url?source=imglanding&ct=img&q=http://media.giphy.com/media/IjKPzvAXVXiN2/giphy.gif&sa=X&ei=qNZVVeP4D8TvUsTXgWA&ved=0CAkQ8wc&usg=AFQjCNHioW72DbYUoO_Hz8bLE-3t5w6CDw" style="width: 250px; border-radius: 40px 0 40px 0;">

Les différents types de bordure :

Ajouter une musique

sur son RP

Que propose Youtube ?

Un lien à copier où on peut personnaliser la taille de la vidéo (mais en conservant le ratio L * H)
Comment ? Cliquez sur "Partager" sous la vidéo choisie / puis sur "intégrer". Cela fait apparaitre le code à recopier.

Exemple

Code:

<iframe width="200" height="113" src="https://www.youtube.com/embed/cYVL3LkPBXA" frameborder="0" allowfullscreen></iframe>

Nos besoins courants pour nos RP :

Taille :

C'est rare que l'on souhaite afficher la vidéo associée à la musique que l'on a choisi pour souligner l’ambiance d'un RP.
► Besoin donc d'un bouton pas trop laid et qui ne prend pas une place trop importante.

Dans le lien précédent, il faut réduire (width="200" height="113") à (width="30" height="30")
C'est la taille minimal pour avoir juste le curseur de lecture affiché.

Code:

<center><iframe width="30" height="30" src="https://www.youtube.com/embed/cYVL3LkPBXA" frameborder="0" allowfullscreen></iframe></center>

Donne :
J'ai ajouté une balise "center" pour que cela soit plus esthétique.

A quoi sert le (frameborder="0") dans le code ? ► A mettre une bordure quand on passe la variable de 0 à 1. Cela donne ceci :


Durée d'écoute:

C'est souvent frustrant que la musique s’arrête alors que l'on n'a pas fini de lire le RP. Il y a une parade à devoir recliquer sur le bouton, c'est de mettre la lecture en boucle. Attention, ce n'est pas une exécution automatique qui s'active dès qu'on ouvre la page où se trouve le RP.

C'est la commande loop. Elle s'insère juste après l'adresse de la vidéo. Si je reprends mon dernier exemple :

Code:

<center><iframe width="30" height="30" src="https://www.youtube.com/embed/cYVL3LkPBXA?version=3&loop=1&playlist=cYVL3LkPBXA" frameborder="1" allowfullscreen></iframe></center>

J'ai ajouté (?version=3&loop=1&playlist=cYVL3LkPBXA) juste après le code (VIDEO_ID)
de la vidéo (cYVL3LkPBXA) qui également à recopier dans la commande

Structure du lecteur YouTube:
https://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Dans mon exemple VIDEO_ID = cYVL3LkPBXA

La musique est jouée en continu tant qu'on ne reclique pas sur le bouton de lecture ou que l'on ferme la fenêtre.

Il existe une commande pour que la lecture de la vidéo se lance automatiquement. Je ne l'indique pas, car je trouve cela très envahissant que d'ouvrir une page sur son navigateur et qu'une musique se lance sans que l'on ait rien demandé. Imaginez le rendu sur un RP si chaque joueur le fait.