Le Cadre !

Je vais vous créer un topic pour comprendre et utiliser les cadres,

Code:

<div>

n'ingurgitez pas tout d'un coup, ça peut être ennuyeux. ^^

1 : Forme primaire
Bon tout d'abord, voyons le code primaire et épuré pour faire un cadre :

Code:

<div style="border: Σ Ξ Γ;"> Message dans le cadre</div>

Σ : Épaisseur des bords
Alors il est possible de marquer thin (fin), medium (moyen), thick (gros) pour aller plus vite ou alors de choisir un nombre de pixel. Dans ce cas ci, il faudra écrire Ypx où Y sera le nombre de pixel que vous aurez choisi.
Si vous ne marquez rien, la taille sera medium d'office.

Ξ : Style des bords
Vous pouvez y inscrire : solid, avec lequel les bords du cadre ne seront que de simples lignes continues.
double, le cadre est alors entouré par deux lignes.
dashed, le cadre est maintenant entouré d'une ligne discontinues (en tiret).
dotted, la ligne qui entourent le cadre est en pointillée.
inset, le cadre semble enfoncé dans la page.
outset, le cadre semble ressortir de la page.
groove, les lignes ont un effet de gravure.
ridge, les lignes ont un effet de gravure inversé.
none, les lignes ne sont plus visibles.

Γ : Couleur des bords
Elle s'écrit en anglais comme pour la couleur de l'écriture.
Vous pouvez aussi mettre une couleur en hexadécimale comme celle-ci #000000 (noir).

Code:

<div style="border: thick double blue;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

2 : Espacement intérieur
C'est une de choses les plus utiles pour donner un aspect agréable à votre cadre en effet. Il permet de décoller les écritures des bords du cadre. Il faut pour cela rajouter un morceau au code :

Code:

<div style="border: thick double blue; padding:Π;"> Message à l’intérieur du tableau</div>

Π : Espacement
Il est possible soit de le rajouter en pourcentage, soit en pixel.
Si vous le rajouter en pourcentage, ce sera le pourcentage du tableau qui ne sera plus occupé par les écritures autour des bords. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi.
Si vous les rajouter en pixel, ce sera le nombre de pixel qui sépareront les bords du tableau des écritures à l'intérieur. Dans ce cas-là, le code sera Ypx où Y sera le nombre de pixel que vous aurez choisi.

Code:

<div style="border: thick double blue; padding:2%;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

3 : Arrondir les angles
Ce sympathique ajout, permet d'adoucir ces angles droits et sévère qu'a actuellement votre cadre. Il faut pour cela rajouter un morceau au code :

Code:

<div style="border: thick double blue; border-radius:Θpx"> Message du cadre</div>

Θ : Degré d'adoucissement des angles.
Il faut le replacer par un nombre. Si l'on met 0, les angles seront droit et plus le nombre que l'on mettera sera élevé, plus l'angle sera arrondi.
/!\ Avec un adoucissement trop puissant des angles, Des mots peuvent se retrouver hors du cadre, augmentez l'espacement intérieur pour palier à ce problème.

Code:

<div style="border: thick double blue; padding:2%; border-radius:50px;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

4 : Définir un hauteur et une longueur
Il permettra de fixer hauteur et une longueur donné que votre cadre fera. Il faut pour cela rajouter un morceau au code :

Code:

<div style="border: thick double blue; padding:2%; border-radius:50px; width:Λ; height:Ωpx;">Message du cadre</div>

Λ : Longueur du cadre
Il est possible soit le remplacer par un pourcentage, auquel cas, le tableau fera tel pourcentage de la page. Dans ce cas-ci, le code sera X% avec X le pourcentage que vous aurez choisi.
Ou alors, il peut être remplacer par un longueur en pixel, donnée.  Dans ce cas-là, le code sera Ypx où Y sera le nombre de pixel que vous aurez choisi.

Ω : Hauteur du cadre
Il faut le replacer par un nombre. Plus celui-ci sera grand, plus votre cadre sera grand.
/!\ Si le cadre est trop petit, une partie de votre texte peut se retrouver hors du cadre. Dans ce cas là, rajouter "overflow: auto" à votre code.

/!\ Pour modifier la position du texte, il faudra alors utiliser les balises

Code:

<center></center> ou <right></right> au lieu de  ou [right][/right]

Code:

<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div></center>

Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

5 : Fond du cadre
Alors, celui-ci marche différemment des autres.

A Une couleur comme fond
Dans ce cas-ci, il faut rajouter un morceau au code :

Code:

<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-color:Ψ;">Message du cadre</div></center>

Ψ  est une couleur. Elle s'écrit en anglais comme pour la couleur de l'écriture.
Vous pouvez aussi mettre une couleur en hexadécimale comme celle-ci #000000 (noir).
/!\ Certaines couleurs de fond peuvent rendre illisible la couleur d'écriture, dans ce cas changer cette dernière  avec les balise habituelle.

Code:

<center><div style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-color:darkblue;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div></center>

Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

6 : Traiter les cotés différemment
A Forme primaire
Nous allons apprendre à donner une couleur, un effet et/ou une épaisseur différente à chaque cotés. Pour cela. Au lieu de marquer border: Σ Ξ Γ; il faudra écrire cela :

Code:

<div style="border-top: Σ Ξ Γ; border-right: Σ Ξ Γ; border-bottom: Σ Ξ Γ; border-left: Σ Ξ Γ;"> Message dans le cadre</div>

(Si vous ne savez pas ce que sont Σ Ξ et Γ, référez-vous à "1 : Forme primaire".)
Vous l'aurez peut-être compris mais : border-top concerne la bordure du haut,
border-right concerne la bordure de droite,
border-bottom concerne la bordure du bas
et border-left concerne la bordure de gauche.
Vous pouvez maintenant écrire différents  Σ Ξ et Γ pour chacun.

Code:

<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

B Espacement intérieur
Là aussi, il faudra remplacer "padding:Π". Il faudra e remplacer par :

Code:

<div style="border: thick double blue; padding-top:Π; padding-right:Π; padding-bottom:Π; padding-left:Π;"> Message à l’intérieur du tableau</div>

(Si vous ne savez pas ce qu'est Π, référez-vous à "2 : Espacement intérieur".)
Vous l'aurez compris : padding-top concerne la bordure du haut,
padding-right concerne la bordure de droite,
padding-bottom concerne la bordure du bas
et padding-left concerne la bordure de gauche.
Vous pouvez maintenant écrire un Π différent pour chacun.

Code:

<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695; padding-top:10px; padding-right:5%; padding-bottom:50px; padding-left:5%;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

C Arrondir les angles
Comme avant, il faudra remplacer les "border-radius:Θpx". Cette fois-ci par contre, par :

Code:

<div style="border: thick double blue; border-top-left-radius:Θpx; border-bottom-left-radius:Θpx; border-top-right-radius:Θpx; border-bottom-right-radius:Θpx;"> Message du cadre</div>

(Si vous ne savez pas ce qu'est Θ, référez-vous à "3 : Arrondir les angles".)
Vous l'aurez compris : border-top-left-radius est l'angle haut-gauche
border-bottom-left-radius est l'angle bas-gauche
border-top-right-radius est l'angle haut-droit
et border-bottom-right-radius est l'angle bas-droit
Vous pouvez alors leur mettre un Θ à chacun.

Code:

<div style="border-top: 10px double blue; border-right: none; border-bottom: thin inset violet; border-left: thick outset #884695; padding-top:10px; padding-right:5%; padding-bottom:50px; padding-left:5%; border-top-left-radius:0px; border-bottom-left-radius:100px; border-top-right-radius:20px; border-bottom-right-radius:200px;"> Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

7 : Mettre un titre sur le bord du haut
Alors ce code est différent des autres. Tout d'abord, il faut que vous modifier les "div" de votre tableau par des "fieldset". Et ensuite vous rajouter les "legend" qui seront les balises qui encadreront le titre :

Code:

<fieldset style="border: thick double blue;"> <legend>Titre</legend>Message à l’intérieur du tableau</fielset>

Pour modifier le placement de votre titre par contre, il faudra ajouté une partie à "legend"

Code:

<fieldset style="border: thick double blue;"> <legend style="text-align:И;">Titre</legend>Message à l’intérieur du tableau</fielset>

И est soit left (gauche), center (milieu), right (droite) et justify (d'un bout à l'autre).

À part cela, vous pouvez mettre ce que vous voulez entre les deux balises

.
/!\ Cela peut buguer lorsque que le tableau vous mettez a les quatre cotés différents (voir 5 A).

Code:

<center><fieldset style="border: thick double blue; padding:2%; border-radius:50px; width:30%; height:140px; background-color:darkblue; background-repeat:no-repeat; background-position:center center;"><legend style="text-align: center;">[u][size=18][i]Tit[/i][b]re[/u] !!![/b][/size]</legend>[color=violet][b] Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla[/b][/color]</fieldset></center>

Titre !!!

Cet Exemple sert uniquement à démontrer ce tableau, alors bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla