Alors c'est un peu pareil que le premier numéro, ce sera juste le centrage des éléments qu'on va voir ici. Par exemple cette div n'est pas au centre mais sur la gauche, pareil pour le titre. La div qui est en bas est pareil que ce que nous avons vu précédemment, pareil pour le fond. Mais je vais ré-expliquer au cas où
Je copie/colle ce que j'ai écrit précédemment :
Alors j'ai pris cette image :
https://i.imgur.com/UtdL9MV.png

Ensuite il faudra donc que cette image soit votre fond.
Fond se dit "Background" en anglais (et oui l'anglais vous suivra partout è_é )
Bref, vous voulez que ce background soit une image. Facile, ça donne ....?? *Dora*
Background-image, bravo !!
Bon alors pour mettre un fond, il vous faut le mettre dans la balise "div style".

Code:

<div style="background-image:url('')">

Ah oui j'avais oublié, il faut mettre url aussi, puis vous collez l'adresse url entre la parenthèse et l'apostrophe ainsi :

Code:

<div style="background-image:url('http://i.imgur.com/UtdL9MV.png')">

Chaque élément mis est très important n'enlevez rien è_é
Maintenant les dimensions de l'image ! Height est la hauteur, Width est la largeur, en px le tout ! Espacez vos éléments avec ";", ça vous donne :

Code:

<div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width :540px; height:605px;">

Vous y êtes arrivé ? Bravo !
Fermez avec un /div et mettez tout ça entre les balises center ainsi :

Code:

<center><div style="background-image:url('http://img15.hostingpics.net/pics/710846notration.png');width :540px; height:605px;">
</div></center>

Maintenant on attaque le code à l'intérieur *-*

Le titre
On se place avant la /div et on crée une autre div style. Si vous n'appliquez rien à cette div, votre titre sera centré, or j'ai fait exprès d'avoir mis une case vers la gauche comme ça vous saurez si jamais vous voulez décaler un titre :PIl y a plusieurs méthodes pour le décaler, mais pour ne pas tout de suite vous faire du bourrage de crâne, j'ai choisi la méthode simple (la méthode dure viendra après 8D). Bref si votre case est à gauche, vous écrivez text-align:left; (left=gauche), si il est à droite, vous écrivez text-align:right; (right=droite). Le mien est à gauche. Pour ne pas qu'il touche le bord du cadre, je le centre avec un padding:XXpx. Enfin pour placer mon texte où je veux, je lui applique une largeur (width) plus grande et je prévisualise plusieurs fois pour bien centré mon texte. Par exemple je commence avec 300px, puis 400px, puis 450px 410, 430 etc... Tout dépend de votre planche bien sûr ! Je rajoute un height:auto, je ferme les balises, ce qui nous donne :

Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;">TITRE TITRE TITRE
</div>
</div></center>

Le titre est un peu petit pour un titre, on va donc ajouter la balise font size qui se compte en pts ! Ca grandit vite cette unité :sisi:

Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font>
</div>
</div></center>

N'oubliez pas de toujours bien fermer vos balises !
Le titre est fait, passons à la div à gauche !

Div à gauche
Pas trop morts, vous tenez le coup ? Ca devrait aller plus vite si vous avez bien suivi !
C'est comme pour le premier numéro de Codage pour les nuls ! Donc pour le texte à l'intérieur, ouvrez une nouvelle div. Mettez y width et height comme vous le voulez un petit coup de padding de 3 à 7 px de préférence et un overflow:auto ! Késako ?
Rappel :
width : largeur en px
height : hauteur en px
padding : marge à l'intérieur de votre div en px
overflow:auto : scrollbar (le déroulant)
Bon vous avez ça :

Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;">TEXTE TEXTE TEXTE
</div>
</div></center>

J'ai sauté 3 lignes pour que ça rentre dans la case, encore là tout dépend de votre fond. Mais là, votre div est centré. Il faudra donc utiliser margin pour y remédier. Margin, c'est la marge autour de votre div (ne pas confondre avec padding qui est la marge à l'intérieur). Bref cette margin (comme le padding d'ailleurs) peut avoir plusieurs attribut : margin-left, margin-right, margin-bottom (en bas), margin-top (en haut). Si vous ne mettez pas d'attribut, ce sera fait pour toutes les margin, pareil pour le padding.
Moi je veux que ma div soit vers la gauche. Je vais utiliser margin-left pour la réduire. Donc je teste avec plusieurs nombre de 100 à 500px à l'aveuglette et je trouve *-* Pour voir si tout est bon, mettez un long texte dans la votre div, histoire de voir si tout est bien centré et si la scroll bar marche bien !

Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;margin-left:-300px;">TEXTE TEXTE TEXTE
</div>
</div></center>

Je vois de la sueur sur votre front *-*

Div en bas
Je vous donne bêtement mon code, qui est pareil que celui d'en haut, mais je n'ai pas mis de margin. C'est tout simple :

Code:

<div style="width:430px;height:170px;text-align:justify;padding:7px;overflow:auto;">

Donc vous avez en tout :

Code:

<center><div style="background-image:url('http://i.imgur.com/UtdL9MV.png'); width :540px; height:605px;"><div style="width:430px;height:auto;text-align:left;padding:7px;"><font size="4pts">TITRE TITRE TITRE</font></div>


<div style="width:180px;height:250px;text-align:justify;padding:7px;overflow:auto;margin-left:-300px;">TEXTE TEXTE TEXTE
</div>
<div style="width:430px;height:170px;text-align:justify;padding:7px;overflow:auto;">TEXTE TEXTE TEXTE
</div>
</center>

Comme d'habitude, vérifier avec un long texte que vos dimensions collent bien ! *-*