Qu'est-ce qu'un bloc informatif ?

Comment l'utiliser ?

Nous passons avec cette étape à des travaux pratiques sur une partie ce que que nous avons vu pour le moment. Il s'agit donc de créer un cadre informatif qui se voit bien pour mettre en forme votre règlement de forum, par exemple. Il peut s'agir alors d'un cadre d'avertissement, d'information, d'astuce... selon les cas et l'utilisation. Des exemples ? Et bien vous en avez eu tout au long des deux premières étapes ! En effet, il s'agit tout simplement de ce type de cadre-là :




Voilà en gros ce que nous allons faire dans cette étape là pour mettre en pratique ce que nous avons vu jusqu'à présent dans des exemples concrets et utiles pour vos messages, vos règlements ou autres !

Créer le cadre texte

Vous savez normalement le faire seuls... Je vous conseille d'ailleurs d'éviter de regarder mes codes histoire de vous habituer à coder sans aucune base, ce qu'il faut arriver à faire au final, c'est à dire prendre une "page blanche" et créer votre code de A à Z sans regarder ailleurs ou utiliser des morceaux de code déjà tout fait, sinon ce n'est plus du codage mais du puzzle .

Voici donc l'élaboration d'un cadre "attention" basique, il s'agit de mon exemple, faites-le à votre goût et surtout écrivez votre code dans un premier temps sans vous aider du mien, c'est préférable !

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Code:

<p style="width: 90%; margin: auto; background-color: #efdada; border: 1px dashed #9b6464; color: #674a4a; padding: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

Vous remarquez que j'ai utilisé la balise "paragraphe", mais ce n'est pas une obligation de faire de même ! Sur ma page de site, sans avoir comme sur les messages FA un retour à la ligne simple avec la touche "entrée", il est plus simple pour moi d'utiliser cette balise. Choisissez celle qui vous convient le mieux ou que vous préférez utiliser !

Vous pouvez également remarquer que j'ai utilisé un affichage de largeur en pourcentage et non en pixel ! C'est en effet plus pratique pour afficher ce type de cadre dans les messages car ainsi la largeur s'adapte à la largeur totale de l'espace dans lequel vous vous trouvez (cf. étape 2, partie 5).

Appliquer des couleurs selon le type d'information

Pour choisir les couleurs, basez-vous sur le type de cadre que vous comptez faire. S'il s'agit d'un cadre "danger", "attention" ou quelque chose du même genre, utilisez plutôt le rouge. Pour le reste, à vous de décider des couleurs. J'ai par exemple utilisé le vert pour les questions, le bleu pour l'information et le jaune pour l'astuce, mais tout cela est à faire en fonction de votre goût et de votre ressenti.

Y mettre une icône

Certes, certaines icônes sont parfois mes créations, mais il existe sur la toile des sites d'icônes gratuites et en libre service ! Celui que je préfère et dans lequel j'ai trouvé pas mal des icônes présentes sur ce site est Icones Pro. Le site est en Français qui plus est, et il vous suffit d'entrer un mot pour trouver l'icône qu'il vous faut. C'est d'ailleurs là que je vais prendre l'icône qui va me servir dans cette étape. Je vais créer un cadre "attention / danger" donc je vais faire une recherche en tapant le mot "danger" ou "attention" ou "important" dans la barre de recherche du site. Voici mon icône :



Il va maintenant falloir mettre cette image à gauche de notre texte comme dans les exemples en haut de page, autrement dit mes propres cadres. Pour cela, il y aurait plusieurs solutions, mais nous allons utiliser les méthodes que vous avez vues. Nous allons tout simplement placer cette image en temps que fond, en la plaçant à gauche et en ne la répétant pas, bien évidemment !

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Code:

<p style="width: 90%; margin: auto; background: url(http://img4.hostingpics.net/pics/253663dedialoguealerteicone653948.png) left center no-repeat #efdada; border: 1px dashed #9b6464; color: #674a4a; padding: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

C'est bien joli, mais il faut ajouter un "padding" (marge intérieure) au texte, sinon il est sur notre joli panneau...

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Code:

<p style="width: 90%; margin: auto; background: url(http://img4.hostingpics.net/pics/253663dedialoguealerteicone653948.png) left center no-repeat #efdada; border: 1px dashed #9b6464; color: #674a4a; padding-top: 4px; padding-left: 60px; padding-bottopm: 4px; padding-right: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

Et voilà ! Votre cadre informatif est prêt à être utilisé ! Ce n'était pas très long, et cela permet d'utiliser plusieurs des propriétés CSS que vous avez vues jusqu'à présent. C'était un simple exercice pratique, mais j'espère qu'il vous servira et vous encouragera à tester par vous-même d'autres mises en formes.

Etape précédenteEtape suivante

Je n'arrêtais pas de me demander comment il était possible de faire ces cadres ! Merci beaucoup =D

Simple petite question concernant les cadres de NU : L'image utilisé pour le coin en haut à gauche du cadre, vous utilisez bien les "margin" pour le positionner ? 'o'

Simple petite question technique car ma curiosité a été piqué ! =D

Merci pour ce tuto' ! Je me posais une petite question concernant les balises, pourquoi met-on :

Code:

<p style=""></p>

et non pas

Code:

<div style=""></div>

pour faire le bloc ?

Merci d'avance et bonne continuation vous nous apprenez beaucoup ! o/

TADA !

Voici mon résultat <3

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Code:

<p style="width: 500px; margin: auto; background: url(http://img11.hostingpics.net/pics/297788Sanstitre2.png) left center no-repeat #efdada;         border-bottom: 3px solid #BAB0AD; padding-top: 4px; padding-left: 60px; padding-bottopm: 4px; padding-right: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

Code:

<p style="width: 500px; margin: auto; background: url(http://img11.hostingpics.net/pics/297788Sanstitre2.png) left center no-repeat #efdada;         border : 3px solid #BAB0AD; padding-top: 4px; padding-left: 60px; padding-bottopm: 4px; padding-right: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Normalement sa devrai marcher maintenant ^^

-_- lorsque je fais prévisualisation sa marche mais pas en postant le message ... le bouton éditer serait pratique en ce moment x)

Bonsoir  

Bon, je me suis lancée !

En revanche je ne sais pas comment réduire cet espace en haut ... Ça ne veut pas bouger avec le padding-top o/

Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus,
sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus.

Code:

<p style="width: 50%; margin: auto; background: url(http://i.imgur.com/totj6Z7.png) left center no-repeat #F2F2F2; border: 2px solid #BDBDBD; padding-left: 70px; padding-top: 4px; padding-bottom: 4 px; padding-right: 4px; color: #151515; font-family: Calibri; text-align: justify; font-size: 14px;">
Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus,
sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus.</p>

Kallie, supprime simplement le saut de ligne entre le texte et la balise :

Code:

<p style="width: 50%; margin: auto; background: url(http://i.imgur.com/totj6Z7.png) left center no-repeat #F2F2F2; border: 2px solid #BDBDBD; padding-left: 70px; padding-top: 4px; padding-bottom: 4 px; padding-right: 4px; color: #151515; font-family: Calibri; text-align: justify; font-size: 14px;">Inter haec Orfitus praefecti potestate regebat urbem aeternam ultra modum delatae dignitatis sese efferens insolenter, vir quidem prudens et forensium negotiorum oppido gnarus,
sed splendore liberalium doctrinarum minus quam nobilem decuerat institutus.</p>

:3

J'ai essayé et ça donne ça:

Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.

Code:

<p style= "width: 90%; margin: auto; background: url(http://icdn.pro/images/fr/n/u/nuage-soleil-meteo-icone-8152-96.png) top left no-repeat #FFFFFF; front-family: arial black; color: #000000; padding: 6px;"> Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur. </p>

Je suis désolée pour le double post
J'ai essayé de me corriger seule mais je ne sais pas où je pourrais poster pour avoir une sorte de brouillon et voir ce que donne mon codage (si quelqu'un a la réponse je veux bien), donc je fais ce double post, encore désolée.

Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur.

Code:

<p style= "width: 60%; margin: auto; background: url(http://icdn.pro/images/fr/n/u/nuage-soleil-meteo-icone-8152-96.png) top left no-repeat #FFFFFF; front-family: arial black; color: #000000; padding-left: 100px; padding-top: 6px; padding-bottom; 6px; padding-right:6px"> Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit: et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi consilio, quibus virium incrementis Parthicarum gentium a arma minantium impetus frangerentur. </p>


Voilà pour moi :) Super sympa en tout cas, moi qui me demandait comment faire ces encadrés justement ^^

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Au oui autant pour moi, j'ai oublié d'intégrer le code u.u donc désoler du double-post (c'est-là que la fonction éditer aurait été pratique ) Voici le code ^^

Code:

<p style="width: 500px; margin: auto; background: url(http://nsa38.casimages.com/img/2016/07/11/160711105409660137.png) left center no-repeat #efdada; border-top:1px solid red; color: #674a4a; border-bottom:1px solid red; color: #674a4a; padding-top: 4px; padding-left: 60px; padding-bottopm: 4px; padding-right: 4px; text-align: justify; font-size: 12px;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Encore une fois, très bon tuto, merci :)

Mon résultat :

Ce tutoriel est très bon, merci !
J'ai essayé moi aussi, cependant je trouve l'image trop prêt du bord et je sais pas comment changer ça. :3

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Code:

<p style="width: 60%; margin:auto; background: url(https://i58.servimg.com/u/f58/19/31/58/79/alerte11.png) left center no-repeat #efdada; border: 1px dashed #9b6464; background-color: #63FFB2; padding-top: 4px; padding-left: 60px; padding-bottom: 4px; padding-right: 10px; text-align: justify; font-family: arial narrow; font-size: 12px; color: #05966D;">Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.</p>


Voilà, étape finie... Je me suis pas trop penchée sur des couleurs jolies ou quoi, c'est juste pour que le code marche ! ^^

Voilà ce que ça donne pour moi :

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.