Codage sur mesure ;) Les fonds ~

Le titre est parlant ~

Bon voilà le topo, je pourrais vous expliquer point par point, mais vous serez vite lassé... Donc dans un premier temps, je me contente de vous donner quelques astuces pour faire vos codages sur mesure. Si l'envie vous tente de comprendre mieux cela, je rajouterais le pourquoi du comment...

Bon vous ne rêvez pas, je vais vous parler un peu chinois là...

On appellera cette partie la "famille fond",
Vous comprendrez pourquoi quand ça se corsera (mais c'est pas pour aujourd'hui )

Tout d'abord:

- Personnellement, je commence tous mes codages par:

Code:

 <div style=" ... ;">

Pourquoi? Simplement je trouve que c'est la balise d'ouverture la plus simple et rapide à manier.

Envie d'un fond?

Pour un fond couleur, voici le code:
background-color: votre couleur ici;

Pour un fond image:
background-image: url(URL_de_image);

Où le placer dans votre codage? Très simple:
Ex:

Code:

<div style="background-image: url(URL_de_image); "> TExte </div>

!!attention!! le ";" ne doit jamais être oublié à la fin d'un morceau de code, c'est lui qui sépare les différentes informations de ce dernier !!

Pour contrôler la taille de vos fonds:

Sa hauteur:
height: Xpx;

Sa largueur:
width: Xpx;

Ex:

Code:

<div style="background-color: white; width: 500px; height: 50px; "> Texte </div>

Ce qui donne:


!! Attention !! Si vous imposez une hauteur et que votre texte est plus long que ce que cette dernière peut contenir, celui-ci va dépasser et ça sera pas joli, joli... Pour que le fond s'étire en fonction du texte, il suffit de ne tout simplement pas mettre de valeur en hauteur...
* Pour ceux qui voudraient une image de fond fixe dont la taille ne varie pas et dont le texte défile grâce à une barre de défilement, l'astuce consiste à créer 2 fonds si on peut dire. Je m'explique:

Créer le fond de votre image :

Code:

<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; "> TExte </div>

Ce qui donne :


Pour "soumettre" le texte à l'élément, il suffit de créer une nouvelle balise <*div style=" ... et sans oublié le magique:
overflow : auto; qui crée votre barre de défilement automatique

Code:

 <div style="width: 500px; height: 100px;overflow : auto;"> TExte </div>

En additionnant les deux:

Code:

<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; ">
<div style="width: 500px; height: 100px; overflow : auto;"> TExte </div>
</div>

Ce qui donne:


Libre à vous de jouer sur les tailles de l'image de fond et du faux fond qui contient votre texte. N'oubliez pas d'user d'un :

Code:

 <center>  votre code </center>

Pour éventuellement center en auto tout ça. Pour un effet plus élaborer on use du Padding, mais c'est plus compliqué, cependant j'y viens, même de base il est utile !

Le padding Quesako? (facultatif)

Code magique que j'affectionne beaucoup <3
padding: 10px 10px 10px 10px;
C'est lui qui permet de créer les espacements entre votre texte et votre cadre notamment (entre beaucoup de choses, on va commencer simple ^^)
Ce simple code qui s'ajoute à la suite de votre morceau de faux fond dans notre cas va vous permettre d'éviter que votre texte "colle" au bord ou à la barre.

Les valeurs définissent l'espace dans cet ordre :
haut
droite
bas
gauche

Si vous voulez jouer de différents espacements selon vos bords, vous serez contraint de l'utiliser ainsi, sinon, à la condition que votre valeur soit unique pour tout votre contour, un simple :
padding: 10px ; suffit amplement. (plus un code est long, plus il est pénible de le remanier, au début du moins!)
J'ai mis 10 de valeur en Px, vous pouvez changer à souhait, 10 est la valeur standard.
Bien sûr, le padding s'utilise dans le faux fond comme dans le vrai, à vous de voir si vous vous sentez de maîtriser son effet. On peut faire plus simple aussi en usant à la place du code blockquote qui ressert le texte:

Code:

 <blockquote> Texte </blockquote>

Pratique au milieu d'un texte par exemple que l'on veut rétrécir qu'en partie.

Donc en reprenant l'exemple de notre code ça donne:

Code:

 <div style="width: 500px; height: 100px;overflow : auto;padding: 10px ;"> TExte </div>

En additionnant les deux:

Code:

<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; ">
<div style="width: 400px; height: 100px; overflow : auto;  padding: 10px ;"> TExte </div>
</div>

La différence est assez subtile au final, c'est ma petite manie plus qu'autre chose cela x)

!!! Attention !!! La valeur du padding se rajoute à celle de votre largueur, pensez donc à la prévoir ou l'ajuster pour éviter des déformations.

!!! Rappels importants !!!

-En codage une règle est d'or: Toute balise ouverte doit être fermée sinon c'est le bug assuré.
Ex un < div... doit toujours avoir sa paire <./ div..> à la fin du codage de l'élément souhaité. Idem pour un center ect. Tout ce qui ouvre par "<" se referme obligatoirement !

- Oublier un ";" est aussi source de problème qui empêche souvent le code de fonctionner correctement. Il sépare les différents ordres du code.

- Idem pour la " qui ouvre et ferme l'intérieur de la balise div style .




Prochains chapitres: Les bordures (famille bordure)> mise en forme texte (famille texte)> Combinaison genre tableau ect...

[tuto libre de droit by Oni]

Ah oui avant que j'oublie ! XD

Pour arrondir le contour d'un fond, on use de :
border-radius: 50px;

Comme pour le Padding, deux choix, une seule valeur ou celle de chaque angles !

Plus en monte en pixel, plus l'effet se fait rond

Code:

<div style="background-image: url(http://static4.fjcdn.com/comments/speshulist+rolled+a+random+image+posted+in+comment+1901451+at+_09921f32ce051520bb897a04d22a95b1.jpg);width: 500px; height: 150px; border-radius: 50px;">
<div style="width: 400px; height: 100px; overflow : auto;  padding: 10px ;"> TExte </div>
</div>

Plus en monte en pixel, plus l'effet se fait rond, ex:




Là l'intérêt du padding prend tout son sens

Mon astuce spoiler qui change de nom aussi, en compensation de ma flemme à faire la suite...

Votre new nom:

Code:

 [spoiler= Votre new nom] XX [/spoiler]

Ps: les codes marchent aussi pour les sign mais attention à la taille du tout qui est restreinte !

Ah merci ^^ Ça va aider plusieurs membres. =)

Puis les codages sont toujours mieux quand ils sont faits par soi-même.

on dirait presque des commandes SQL lol, mais en plus simple.

Comment fait-on pour avoir un cadre entre le transparent et le blanc au-dessus de l'image de fond parce que quand on a une image de fond foncé c'est dure de trouver une bonne couleur d'écriture.