Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Partie 1 - Etape 4 : Création d'un cadre informatif

    Partagez
    MasculinAge : 31Message(s) : 31699

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 9 Mar 2014 - 17:57

    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à :

    Je suis un cadre informatif ! Very Happy

    Je suis un cadre de mise en garde !! (et je ne plaisante pas è_é)


    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 Wink.

    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.

    N'utilisez pas de couleur trop flash ! Certes il faut que le cadre se voit, mais ce n'est pas une raison pour cramer la rétine de vos visiteurs... Donc les couleurs vives sont à éviter. Veillez également à ce que le texte soit lisible sur votre fond.



    Y mettre une icône



    Minutes ! Je suis pas graphiste moi ! Créer un fond basique passe encore, mais une icône... je sais pas faire. Alors comment je fais ? Hein ?


    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>

    Vous remarquez que le padding a agrandi le cadre... Au besoin vous pouvez donc soit réduire sa largeur en tenant compte de la marge que vous allez imposer, soit créer un second bloc à l'intérieur pour afficher le texte avec des marges sans qu'il n'y ait de conséquences sur votre bloc principal.


    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


    FémininAge : 20Message(s) : 667

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    6/10  (6/10)
    Shaneliae
    le Sam 4 Avr 2015 - 15:24
    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


    MasculinAge : 20Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yukimura Esuki
    le Dim 21 Juin 2015 - 18:06
    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/
    FémininAge : 23Message(s) : 2400

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Lun 14 Déc 2015 - 7:23
    TADA ! Very Happy

    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>



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    FémininAge : 23Message(s) : 2400

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Lun 14 Déc 2015 - 7:28
    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 ^^



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    FémininAge : 23Message(s) : 2400

    Les Guildes
    Guilde des Conteurs:
    5/10  (5/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    2/10  (2/10)
    Cruelly
    le Lun 14 Déc 2015 - 7:29
    -_- lorsque je fais prévisualisation sa marche mais pas en postant le message ... le bouton éditer serait pratique en ce moment x)



    Construction d'un forum en cours ! Vous pouvez me donner votre avis ou m'apporter votre soutiens dans mon WIP :hug:
    FémininAge : 22Message(s) : 2
    Kallie
    le Ven 27 Mai 2016 - 1:38
    Bonsoir  :joie:

    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>
    FémininAge : 20Message(s) : 6
    Vayleena
    le Dim 5 Juin 2016 - 5:23
    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
    FémininAge : 25Message(s) : 5
    Dorea McD
    le Mar 5 Juil 2016 - 13:21
    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>
    FémininAge : 25Message(s) : 5
    Dorea McD
    le Mar 5 Juil 2016 - 13:36
    Je suis désolée pour le double post Sad
    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>
    FémininAge : 24Message(s) : 190

    Les Guildes
    Guilde des Conteurs:
    7/30  (7/30)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Linaewen
    le Lun 11 Juil 2016 - 10:50
    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.

    FémininAge : 24Message(s) : 190

    Les Guildes
    Guilde des Conteurs:
    7/30  (7/30)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Linaewen
    le Lun 11 Juil 2016 - 10:52
    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 Razz) 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.

    FémininAge : 23Message(s) : 38
    Nippon Syndrom
    le Ven 21 Oct 2016 - 19:32
    Encore une fois, très bon tuto, merci :)

    Mon résultat :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet dignissim urna. Integer a.


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet dignissim urna. Integer a.


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet dignissim urna. Integer a.


    Contenu sponsorisé
    Aujourd'hui à 7:03

      La date/heure actuelle est Dim 4 Déc 2016 - 7:03