Création de cadres et fonds

Bon aujourd'hui, je vais vous montrer comment faire des arrangements simple, mettre un fond derrière vos textes et de l'adapter au forum. Vous pouvez toujours aller voir le tutoriel sur les tableaux pour les arrangements plus complexes. On va entrer dans la programmation CSS du web qui se compose de plusieurs formes, écritures et codes. On va commencer par une simple bordure qui va entrer dans une division pour ne pas créer à chaque fois un tableau qui peut bugger.

Voici le code de base :

Code:

<div style="border:2px solid blue;">Cadre</div>

Le cadre est formé d'une division de code DIV à laquelle on ajoute un style ou modèle que l'on veut. Je lui ai mit une bordure nommée Border. Le guillemet sert à enfermer le code qui appartient au style car on peut aussi ajouter autre chose dans le futur. On a aussi ouvert et fermer le style autour de notre contenu. Il ne faut jamais oublier de fermer notre code!! Ensuite, je lui ai mit une grandeur, ici 2 pixels, pour lui donner son apparence. On peut le modifier à notre goût. Ensuite je lui ai appliquer la fonction Solid. Voici un aperçu des différent résultat que nous pouvons obtenir avec les type de bordure.





Regardez le jeu des ombrages.





Il suffit de remplacer Solid par une des valeurs ci-contre pour obtenir une bordure de votre choix.

Pour la couleur, c'est encore simple. Changez le ''Blue'' pour le nom de votre couleur ou le code de ce dernier afin d'en modifier.

On peut aussi varier les bordures d'en haut, bas, droite ou gauche à volonté. Voici un exemple :

Code:

<div style="border-top:2px solid green;border-right:2px dotted red;border-left:2px solid red;">Cadre</div>

Aulieu de juste mettre border, on doit ajouter la valeur dans la dimension comme Top (haut) Bottom (bas) Right (droit) Left (gauche). Ainsi, on peut aussi mettre une bordure énorme en haut de notre texte et le reste plus simple. Voici un exemple :

Code:

<div style="border-top:20px solid #BE81F7;border-right:2px solid #81BEF7;border-left:2px solid #81BEF7;border-bottom:5px solid #F8E6E0;">[center][b]LE CORBEAU ET LE RENARD[/b]

Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
Et bonjour, Monsieur du Corbeau,
Que vous êtes joli ! que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois.
À ces mots le Corbeau ne se sent pas de joie,
Et pour montrer sa belle voix,
Il ouvre un large bec, laisse tomber sa proie.
Le Renard s'en saisit, et dit : Mon bon Monsieur,
Apprenez que tout flatteur
Vit aux dépens de celui qui l'écoute.
Cette leçon vaut bien un fromage sans doute.
Le Corbeau honteux et confus
Jura, mais un peu tard, qu'on ne l'y prendrait plus.[/center]</div>

On a pas encore un fond avec une jolie image, cela viendra plus tard! Ainsi que contrôler la largeur de nos cadres. Le texte à l'intérieur va s'afficher avec vos codes normaux et vos espaces et entrers. Il va seulement s'adapter au contour de vos mots et images. Cette fois-ci sans grandeur déterminée, il va seulement prendre la largeur à 100% et la longueur suivant vos mots.

Ajoutons un fond à notre cadre ainsi formée. On va lui laisser une mince bordure pour voir l'effet.

Code:

<div style="border:1px solid white;background-color:#38610B;">
[center]Cadre[/center]
</div>

Le background-color: va déterminer la couleur que nous mettons en arrière plan, en final sous le texte. On peut faire la même chose avec une image sauf que le code va se modifier légèrement. L'image va aussi se coller automatiquement en haut à gauche et le reste sera effacé par les limites de notre cadre. Le code s'écrit ainsi : background-image:url('IMAGE');

Code:

<div style="border:1px solid #00FFFF;background-image:url('http://hitskin.com/themes/12/80/98/i_background.jpg');">
[center]Cadre[/center]
</div>

Dans le cas d'une petite image, elle va se répété à l'infini si elle le désire. Si vous ne voulez qu'ajouter une petite image dans le fond, il faut ajouter la valeur no-repeat suite à l'image dans le même ; . Exemple :

background-image:url('http://hitskin.com/themes/12/80/98/i_background.jpg') no-repeat;

Le repeat de l'image est par défaut. On peut aussi la mettre à des places différentes comme au sommet ''top'' à droite ''right etc...

Vous pouvez vous amuser à déplacer une image dans le cadre pour le moment.

Code:

<div style="border:1px solid #00FFFF;background-color:#610B0B; background-image:url('http://www.w3schools.com/images/compatible_ie.gif');background-repeat:no-repeat;background-position:right top;">
[center]Cadre[/center]
</div>

Code:

<div style="border:1px solid #00FFFF;background-color:#610B0B; background-image:url('http://www.w3schools.com/images/compatible_ie.gif');background-repeat:no-repeat;background-position:right top;">
[center][b][color=black][size=24]Cadre[/size][/color][/b][/center]
</div>

On peut aussi s'amuser avec la rondeur des coins (ne marche pas pour tous les serveurs d'internet) Avec un border-radius. Encore une fois, on peut mixer les hauts, bas, gauche et droite ainsi :
border-radius: 0px 0px 5px 5px;
Le premier px est le coin supérieur gauche, le deuxième le coin supérieur droit, le troisième le coin inférieur droit et le quatrième le coin inférieur gauche.
Si on a seulement un format pour les coins, il suffit de mettre qu'une valeur comme ceci :
border-radius: 5px

Code:

<div style="border:3px solid yellow; border-radius: 20px">Cadre rond</div>

Code:

<div style="border:3px solid yellow; border-radius: 8px 0px 8px 0px;">Cadre rond</div>

Plus la valeur est grande, plus la rondeur sera complète et l'arc grand. C'est ainsi qu'on peut créer des ronds autour de nos images si on désigne une valeur maximale à notre cercle.

On va maintenant jouer avec la grandeur et largeur de notre encadré pour lui définir une forme volontaire. On va utiliser les balises Height et Width comme le tableau. Les deux fonctionne similairement.

Code:

<div style="border:2px solid blue;">Cadre</div>

Ceci était notre encadré de base. Donnons lui une valeur de 300 pixels de large et 60 pixels de haut. Voici ce que ça donne :

Code:

<div style="border:2px solid blue;height:60px;width:300px;">Cadre</div>

Pour centrer notre cadre, on doit lui imposer une marge automatique. Pour ceci, la largeur (width) doit absolument avoir une valeur. La marge est alors automatique et centre directement le tableau.

Code:

<div style="border:2px solid blue;height:60px;width:300px;margin:auto;">Cadre</div>

La marge est l'espace qui se trouve entre votre bordure et les limites imposées de votre surface. vous pouvez donc éloigner votre encadrer d'un côté et de l'autre. Comme la bordure, vous pouvez aussi assembler les valeurs par 4. Exemple :
margin: auto 0 auto auto;

Code:

<div style="border:2px solid blue;height:60px;width:300px;margin:auto 0 auto auto;">Cadre</div>

Code:

<div style="border:2px solid blue;height:60px;width:300px;margin:auto 0 auto auto;">Cadre</div>

Amusons nous un peu :

Code:

<div style="border:2px solid blue;height:60px;width:60px;border-radius: 60px">Cadre</div>

Voici un rond, mais comme vous voyez, le texte n'y reste plus centrer. On peut alors jouer avec ce qu'on appel le Padding qui est à l'intérieur de la bodure. Il va éloigner le texte de la bordure créer et ainsi éviter d'avoir le tout collé dessus. Attention : Il va aussi ajouter une valeur à la grandeur de votre bordure car il s'ajoute au total. Donc, si vous ajoutez un Padding de 5 pixels, vous devrez enlever 10 pixels de votre grandeur maximale. Reprenons le cadre initial pour lui donner une valeur en padding.

Code:

<div style="border:2px solid violet;padding:10px;">Cadre</div>

Vous voyez la différence? Un Simple padding comme ça met la marge intérieur égale partout. vous pouvez choisir où il y aura la marge en ajoutant un tiret après padding et ajoutant la valeur Top, bottom, right ou left.

Code:

<div style="border:2px solid blue;height:30px;width:30px;border-radius: 60px;padding:15px;">Cadre</div>

Voici un exemple général qui utilise plusieurs des fonctions ci-haut. Ne copiez pas ce code s'il-vous-plait, il est utile pour l'animateur. On voit ici un cadre dans un cadre pour plus de design.

Code:

<div style="background-image:url('http://img11.hostingpics.net/pics/617518fondbatman.jpg'); padding:10px; border-style: double; border-color: #294257;margin-top: -5px;border-width: 5px;"><div style="background-color: #000000; border-radius:20px;padding:10px;">Voici mon texte</div></div>

Le cadre intérieur est pour avoir un fond noir et visible. Le premier cadre à une bordure double et on fond répété de petits symboles de Batman. On aurait pu simplement ajouter une bordure simple au cadre intérieur et l'espacer davantage.

Vous avez sans doute remarqué la marge négative : margin-top: -5px
Elle sert à rapprocher le cadre du sommet de la fenêtre. C'est ainsi qu'on peut aussi superposer des textes sur le cadre.