[Apprenti] Créer un cadre avec image et texte

Bonjour,

Nous allons voir un cas pratique qui peut vous servir à customiser vos posts ou vos signatures sur le forum, celle de Cam en est un exemple :


Avant de commencer, il est bon de savoir de quoi nous allons parler, en occurrence le HTML et le CSS. Donc je vous conseille de lire ceci : Vous avez posté dans ce sujet. [Fiche] HTML et CSS qu'est-ce que c'est ?

C'est un tuto spécifique et non pas généraliste. Nous allons donc voir et définir les éléments nécessaires et apprendre quelques mots de CSS qui nous seront utiles dans ce cas précis.

1. Le matériel nécessaire :

Le but du jeu est de créer un cadre qui contienne une image. En toute logique il nous faut une image.

La programmation nous permet de faire peu de cadres différents et visibles partout. Donc facilitons nous la vie et créons une image qui soit elle même un cadre, il nous restera à placer les éléments par la suite à l'intérieur de celui-ci.

J'ai donc créé ma signature sur mon logiciel de graphisme, ce qui me permet de visualiser le rendu désiré. Comme je veux un effet de transparence, j'ai choisi un format png.


Afin de connaître la taille exacte de mon cadre je vais dans document et je clique sur l'image, les dimensions me sont données


Donc les informations importantes à l'issue de ce travail préalable :
- largeur du cadre : 620px
- hauteur du cadre : 176px
- taille de la police : 20px
- couleur de la police : #090937
Le code couleur qui nous intéresse est le code hexadécimal soit 6 chiffres précédés du symbole #

A présent je peux héberger mon image sur le serveur de mon choix et récupérer son adresse URL :

Code:

https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png

2. Le code HTML :

Notre but est donc d'avoir un espace dans lequel on peut écrire du texte et auquel on peut assigner un fond.

Nous allons utiliser une div, qui est une section ou espace qui va être créé par l'utilisation de ce code.
La div est de type block cela signifie qu'il peut avoir des marges intérieures et extérieures, un arrière plan, etc... Si on rajoute un autre élément il se mettra en dessous de lui et non pas à côté.

Voici le code pour créer une div :

Code:

<div></div>

On va vouloir écrire du texte à l'intérieur de cette division, un texte c'est un paragraphe. Il existe justement une balise correspondant à un paragraphe et qui est de type block elle aussi :

Code:

<p>mon texte</p>

Dans un paragraphe on veut parfois revenir à la ligne pour mettre en valeur ce que l'on écrit. Il existe une balise pour cela qui se met à la fin de la ligne:

Code:

ma phrase<br />

On va vouloir par la suite donner des consignes sur le style à appliquer à notre division et à nos éléments. On va donc donner un identifiant unique à cette div, pour ce tuto on va l'appeler cadre mais quand ce sera à vous pensez à personnaliser le nom.

Donc voici ce que va donner mon code maintenant que je mets tous les éléments les uns dans les autres :

Code:

<div id="cadre">
<p>Essai de texte pour couleur, taille police<br />
& positionnement</p>
</div>

Visualisons cela tout de suite :



Ca ne ressemble à rien ? C'est normal ! Le HTML c'est la structure, le style c'est avec le CSS

3. Le code CSS :

Il est temps d'habiller notre cadre, je vais vous montrer ce qui correspond à notre exemple. Si vous voulez plus d'informations ou plus de mots, alors je vous encourage à consulter le tuto d'Illendel qui est une petite bibliothèque d'exemple de ce que l'on peut faire : [Intermediaire] Personnalisation des posts dans un forum

Je vous met le code de base et ensuite je décortique chacun des mots :

Code:

#cadre {
width : 620px;
height: 176px;
background : url('https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png') no-repeat top left;
}

Donc voici ce à quoi servent chaque mot :
- # : c'est le symbole associé à un identifiant (id)
- width : largeur de l'élément en pixel
- height : hauteur de l'élément en pixel
- background : c'est le mot qui permet en une seule instruction de donner différentes informations sur l'arrière plan. Il y a plusieurs paramètres que je vais vous indiquer. Je vais les numéroter pour vous donner l'ordre, chaque paramètre est séparé par un espace.

Code:

backgroound : 1.couleur 2.adresse de l'image 3.répétition de l'image 4.positionnement;

1. La couleur est facultative, dans mon cas je ne veux pas de couleur car j'ai choisi de la transparence, si je met un code héxadécimal de couleur alors au lieu d'être transparent on verra la couleur.
2. L'adresse URL de votre image se met donc ainsi url('adresse url')
3. Une image peut se répéter de différentes manières
--> no-repeat : pas de répétition
--> repeat-y : se répété selon l'axe des y c'est à dire verticalement
--> repeat-x : se répété selon l'axe des x c'est à dire horizontalement
--> repeat : se répété dans tous les sens

Voici l'aperçu à cette étape :



Il nous reste donc à intervenir sur le texte. Comme il est de type block on va pouvoir lui donner des marges et d'autres propriétés.
En CSS on a la notion de généalogie, on peut comme pour vos dossiers, vous avez les parents et les enfants. On n'a pas donné un identifiant au paragraphe car on va pouvoir le commander en indiquant sa généalogie. Ce qui correspond si je le mets en phrase : le paragraphe qui est à l'intérieur de mon identifiant cadre

Code:

#cadre p {
width : 500px;
color: #090937;
font-size: 20px;
margin: 90px 10px 10px 100px;
line-height: 14px;
}

- color: c'est la couleur de la police de ce paragraphe
- font-size: la taille en pixel de notre police
- margin: c'est un code raccourci pour indiquer les marges. On donne dans l'ordre : haut droite bas gauche
- line-height: c'est l'espace entre deux lignes, j'ai donné une valeur car je trouvais l'espacement trop important.

Une astuce pour connaitre les marges : mettez à contribution vos logiciels de graphisme, dans mon cas photoshop.

J'utilise l'outil règle :


Il faut que votre fenêtre information soit visible, raccourci F8 ou alors dans le menu affichage.
Il ne vous reste plus qu'à mesurer et vous avez les valeurs en pixel dans la partie information.



Et voici l'aperçu à présent :



Il est probable que vous ayez à modifier les valeurs au fur et à mesure, donc pensez à prévisualiser et à corriger au fur et à mesure.

4. Le code pour un forum :

Comme le but du jeu est de l'afficher pour le forum, nous allons mettre le code HTML et CSS ensemble. En effet pour eviter les conflits avec la feuille de style à laquelle vous n'avez pas accès en tant qu'utilisateur, on regroupe tout !

Donc les identifiants sont inutiles, on les retire. Ensuite on va répartir les éléments, ce qui était lié à la division va aller dans la balise de la division et ce qui était lié au paragraphe dans la balise du paragraphe.

On récupéré uniquement ce qui était entre les accolades {} et on le colle dans une indication de style de cette manière

Code:

<balise style="code CSS">le code</fin balise>

Donc pour notre signature, voici à quoi ressemble le code à mettre sur le forum qui regroupe donc HTML & CSS :

Code:

<div style="width : 620px; height: 176px; background : url('https://dl.dropbox.com/u/65254322/Tutoriels/web_cadre_image/fond.png') no-repeat top left;">
<p style="width :500px; color: #090937; font-size: 20px; margin: 90px 10px 10px 100px;">Essai de texte pour couleur, taille police<br />
& positionnement</p>
</div>

Je me répète mais pour aller plus loin et( découvrir d'autre mots CSS afin de personnaliser votre texte je vous conseille la lecture de ce tuto : [Intermediaire] Personnalisation des posts dans un forum rédigé par Illendel

Je garde ce post pour les astuces ou compléments d'informations.

J'espère que ce tutoriel vous aura aidé, il ne se limite pas aux signatures, il peut permettre de donner de la vie à vos articles ou autres.

Comme d'habitude vous pouvez nous montrer vos exemples à la suite

Merci Fu !

Merci Fuuuu ! Je mets tout ça en pratique dès que j'ai accès à l'ordi.

Super tuto merci =)

Ca c'est de la prof ! Clair net et concis, merci pour petit cours théorique Fu

Super ! Merci Fu !
Ce tutoriel est très clair et me sera très utile !

Merci pour le tuto.

Merci Fuyaya.

Merci Fuyaya, je cherchais justement comment faire ça

Avec plaisir