Cadre en DIV

qu'est-ce que c'est ?

comment faire ?

"Comment qu'on fait ces trucs là ?" vous demandez-vous ? Eh ben on crée un nouvel article d'abord.

Ensuite, vous tapez un texte quelconque, supposons :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultrices aliquet tempor. Fusce sollicitudin bibendum lectus sit amet eleifend. Quisque nec laoreet purus. Duis nec orci ac lorem vehicula adipiscing eget ut diam. Donec purus orci, ornare vel facilisis semper, ultricies nec metus. Quisque mollis tincidunt odio eget dapibus. Donec massa nulla, gravida vitae malesuada volutpat, viverra a dui. Ut nec rutrum enim. Etiam vehicula velit vitae erat aliquet id aliquet lacus commodo.

Puis vous cliquez sur le bouton HTML de l'interface et vous examinez le code.
Tout d'abord, retirez moi le <p> du début et le </p> de la fin. Ensuite, coller ce code au tout début :

Comme à mon habitude : les explications !
Alors width c'est la largeur de votre cadre et min-height sa hauteur minimale, à vous de remplacer les valeurs en px de ceux-ci par celles qui vous conviennent le mieux. Le margin c'est la marge extérieure de votre cadre, c'est l'espace qu'il y aura entre lui et un autre, ici elle est de 10px, à vous de la modifier selon votre envie. background-color correspond à ce qui est en beige dans l'exemple, remplacez #f5dda6 par le code héxadécimal de la couleur de votre choix. border c'est la bordure en marron dans l'exemple, elle mesure 6px dans l'exemple, pour changer sa couleur modifiez #4a2c2c. padding, contrairement à margin représente la marge intérieure, il permet que votre texte ne soit pas complétement collé aux bords de votre cadre, évidemment, vous pouvez remplacer le 5px. Enfin, text-align correspond à l'alignement du texte, ici c'est left donc il sera à gauche, si vous le souhaitez à droite vous remplacez par right ou tout simplement au centre, ce sera center.

Et attention, n'oubliez surtout pas de rajouter un </div> tout à la fin de votre code, c'est une étape primordiale pour que votre code fonctionne correctement.

C'est bon. Vous venez d'apprendre les bases qui permettent de créer un cadre en DIV.
Oui, je n'ai pas précisé les manoeuvres à faire quant au placement de l'image, pour les curieux qui veulent approfondir leurs connaissances, je vous invite à suivre la deuxième partie de ce tutoriel.

Donc, pour le moment vous devriez avoir ça.


Et dans quelques minutes on va avoir ça.


Interéssant, non ? Allez, go.
Identifez la ligne

Et collez ceci tout de suite après

display specifie la manière dont un element est affiché, ici, block specifie un bloc.
float c'est l'emplacement de l'image, dans l'exemple c'est left, donc à gauche, si vous remplacez par right ce sera à droite. width c'est la largeur de l'image, height c'est sa hauteur.

Ah, une nouveautée :
-moz-border-radius: 100px 100px 100px 100px;
Ouais, c'est quoi ça ? C'est ce qui permet de former un cercle autour de l'icon, normalement c'est juste border-radius mais comme j'utilise Mozilla firefox je rajoute -moz- devant. Passons !
border c'est le bord marron qui forme le cercle en question, pour changer sa couleur vous modifez #4a2c2c. Enfin, remplacez urldel'image.png par l'url de votre icon.

Il ne vous reste plus qu'à enregistrer tout ça !
Alors heureux ?

Pour toute demande d'approfondissement ou questions en rapport avec ce tutoriel, n'oubliez pas de poster un commentaire. Je vous y repondrais du mieux que je pourrais dès que je le verrais !