AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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 : TP - Création d'un cadre de message de validation

    Partagez
    A-Lice
    FémininAge : 22Messages : 4939

    le Mar 13 Mai 2014 - 23:02

    TP – Création d'un cadre de message de validation de personnage préétabli



    Suite à l'étape 4 de la première partie de ce cursus, nous allons travailler sur un nouveau TP. Vous avez probablement tous déjà croisé ce genre de cadre, après tout l'étape 4 en est remplie ! Dans ce TP, nous allons nous mettre dans la peau d'un membre du staff d'un forum de même type que Harry Potter. Il est de coutume dans ce genre de forum de faire une belle fiche de présentation sur un personnage inventé ou non et de choisir dans quel groupe on souhaite être, ou alors c'est le staff qui choisit le groupe aléatoirement ou en fonction du caractère etc. Qui a pensé Choixpeau ? Nous allons donc matérialiser une forme de message de validation pour chaque groupe, dans notre cas il y en aura trois.

    Le fond


    On commencera par faire une base qui sera commune à nos trois cadres de messages. Disons que nous voulons un cadre pas très large qui soit centré. On veut également que notre cadre ait des bordures un peu épaisses et qui soient visibles autant sur Chrome que sur Firefox (on ne va pas ajouter les autres pour ne pas alourdir le TP mais il est conseillé de toujours prendre en compte tous les préfixes). Ensuite on ajoutera une couleur de fond et une marge intérieure.

    Pour l'instant ça nous donne donc ceci :

    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px; border-bottom:solid 3px;  border-left:dashed 3px; border-right:dashed 3px; background-color:; padding:10px;"></div>


    Gardez ce code au chaud il va nous servir à plusieurs reprises. Je vous conseille d'en faire une copie sur laquelle on va travailler tout de suite.

    On a donc notre code de base vierge. Nous allons le personnaliser pour le premier groupe avec des couleurs. Pour cela il suffit d'ajouter une couleur aux bordures et une autre pour le fond. Pourquoi pas dans les tons rouges ?




    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;">
    </div>


    Pour ma part j'ai pris du rouge/rose. Jusque là tout est normal.

    L'image


    Nous allons accompagner notre cadre d'une image. Il ne faut pas qu'elle soit trop grande pour rentrer dans le cadre. On va dire que le format le plus grand sera 150*150.

    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><img src="Lien de votre image" alt="groupe1" />
    </div>


    Pour l'instant ça nous donne ceci. Mais moi, j'ajouterais bien une bordure à notre image, aussi je voudrais être sûre qu'elle soit bien l'élément le plus à gauche possible et que je puisse mettre mon texte à côté de mon image.

    Groupe Cupcake












    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div>
    </div>


    En parlant du texte tien, on ne sait pas encore ce que l'on va mettre alors on va placer un lorem ipsum. On s'habitue vite à sa présence à celui-là ! Pour notre texte, il faut lui choisir une couleur, une taille, le justifier, le mettre en italique si vous le voulez. Et vu qu'on utilisera un span, il ne faut pas oublier de lui demander de passer de "en ligne" à un "bloc".

    Groupe Cupcake
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</span></div>


    On obtient donc ceci. C'est chouette tout ça !

    La modification du code


    Et bien maintenant on va faire la même chose pour le deuxième et troisième groupe.

    Hein ? On doit tout recommencer ?


    Le codage ce n'est pas pour les feignants ;)Mais rassurez-vous, plus haut je vous ai demandé de garder notre modèle au chaud et de travailler sur une copie, et bien nous allons faire la même chose travailler sur une copie.

    Pour le deuxième groupe, on va choisir des couleurs différentes du premier groupe, une image différente et personnellement j'ai bien envie d'aligner notre image à droite. On reprendra le même extrait du lorem ipsum et les mêmes caractéristiques pour le texte.

    Je ne vous détaille pas la démarche mais si vous avez besoin, n'hésitez pas à remonter au début de ce TP !

    Ce qui nous donnera ceci :

    Groupe Chaton
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px DodgerBlue; border-bottom:solid 3px DodgerBlue; border-left:dashed 3px DodgerBlue; border-right:dashed 3px DodgerBlue; background-color:LightBlue; padding:10px;"><div style="float:right; border:solid 2px dodgerblue; margin-left:10px;"><img src="http://img15.hostingpics.net/pics/772694Chatbleu.png" alt="Groupe Chaton" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</span></div>


    Et pour le troisième groupe c'est pareil, on prend des couleurs différentes et une image différente.

    Groupe Green Lantern
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px ForestGreen; border-bottom:solid 3px ForestGreen; border-left:dashed 3px ForestGreen; border-right:dashed 3px ForestGreen;  background-color:YellowGreen; padding:10px;"><div style="float:left; border:solid 2px forestgreen; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/981298greenlantern.png" alt="Groupe Green Lantern" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.

    </span>
    </div>


    De cette manière nous avons nos trois cadres pour les trois groupes de faits.

    Le texte


    Maintenant, on va les mettre de côté et se pencher sur ce qui remplacera le lorem ipsum. Rassurez-vous, ce n'est pas le but de l'exercice que de trouver ce qui va remplacer le lorem ipsum, alors je vous fournis ça.

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe "XXX". Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à "YYY" responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Maintenant qu'on part tous du même point, on va commencer par en faire trois exemplaires, un pour chaque groupe.
    Ensuite, on remplacera les XXX par le nom du groupe, et les YYY par le nom du responsable du groupe. Pour ma part j'ai pris des gens de N-U et je vous conseille d'en faire autant ou du moins de lier quelque chose, c'est plus concret de cette manière et votre lien ne sera pas vide.

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Chaton. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Gravity responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Green Lantern. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Halloween responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Une fois que nous avons complété tout ça, on va styliser le nom des groupes. Pourquoi ne pas le mettre en gras ?

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Code:
    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    On va également ajouter des liens à notre message. Ces derniers permettent de mieux guider les nouveaux, par exemple on va mettre un lien pour le responsable du groupe qui mènera directement à son profil et on mettra un autre lien sur "section appropriée". Soyons fous, aimons les liens, on va en mettre un autre pour la chatbox !
    Et on va styliser nos liens également, par exemple changer la couleur, mettre en italique, souligner etc.

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Code:
    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Dakota</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    Maintenant il vous reste à faire la même chose pour les deux autres groupes. Je ne redétaille pas la démarche mais si vous en avez besoin vous pouvez remonter jusqu'au titre "le texte".

    Donc ça nous donne ceci :

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Chaton. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Gravity responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Code:
    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Chaton</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Gravity</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Green Lantern. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à Halloween responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !

    Code:
    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Green Lantern</span>. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Halloween</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !


    L'assemblage


    Maintenant que nous avons nos cadres d'un côté et nos message de l'autre, on va assembler le tout. Rien de bien compliqué, il suffit de prendre le cadre avec le lorem ipsum, d'effacer ce dernier pour le remplacer par notre texte, simple comme bonjour.

    Et voilà le résultat :

    Groupe Cupcake
    Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Cupcake.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée.
    Tu peux également t'adresser à Dakota responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px deeppink; border-bottom:solid 3px deeppink; border-left:dashed 3px deeppink; border-right:dashed 3px deeppink; background-color:pink; padding:10px;"><div style="float:left; border:solid 2px deeppink; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/154793Cupcakesrose.png" alt="Groupe Cupcake" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Cupcake</span>.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
    Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Dakota</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !</span></div>


    Groupe Chaton
    Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Chaton.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée.
    Tu peux également t'adresser à Gravity responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px DodgerBlue; border-bottom:solid 3px DodgerBlue; border-left:dashed 3px DodgerBlue; border-right:dashed 3px DodgerBlue; background-color:LightBlue; padding:10px;"><div style="float:right; border:solid 2px dodgerblue; margin-left:10px;"><img src="http://img15.hostingpics.net/pics/772694Chatbleu.png" alt="Groupe Chaton" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Chaton</span>.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
    Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Gravity</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !</span></div>


    Groupe Green Lantern
    Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Green Lantern.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée.
    Tu peux également t'adresser à Halloween responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !


    Code:
    <div style="width:450px; margin:auto; border-top:solid 3px ForestGreen; border-bottom:solid 3px ForestGreen; border-left:dashed 3px ForestGreen; border-right:dashed 3px ForestGreen; background-color:YellowGreen; padding:10px;"><div style="float:left; border:solid 2px forestgreen; margin-right:10px;"><img src="http://img15.hostingpics.net/pics/981298greenlantern.png" alt="Groupe Green Lantern" /></div><span style="display:block; color:black; text-align:justify; font-size:13px;">Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Green Lantern</span>.

    Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://www.never-utopia.com/f42-questions-suggestions" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>.
    Tu peux également t'adresser à <a href="http://www.never-utopia.com/u3978" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">Halloween</a> responsable du groupe. N'oublies pas que la <a href="http://www.never-utopia.com/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs.

    Amuses-toi bien !</span></div>


    Un cadre de validation peut avoir plusieurs formes. Nous avons travaillé sur l'une d'entre elles, je vais vous donner un exemple de ce qu'on peut faire d'autre !

    The title is important !
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.


    Je vous laisse même analyser le code Wink

    Code:
    <span style="display:block; font-size:20px; margin-left:390px; color:orange; text-shadow:1px 1px 1px darkred;">The title is important !</span>
    <div style="margin-left:auto; margin-right:auto; margin-top:-20px; width:400px; height:110px; border:solid 1px #d48a33; background-image:url(http://img15.hostingpics.net/pics/866040icon120120.png), url(http://www.simondor.com/wp-content/uploads/Page-blanche-241x300.png); background-repeat: no-repeat, repeat; overflow:auto; text-align:justify; padding-bottom:5px; padding-top:5px; padding-right:5px; padding-left:125px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non odio consequat urna cursus dignissim et a tortor. Phasellus lobortis libero nec metus sodales porttitor vel at lectus. Sed lacus ante, viverra facilisis sapien nec, rutrum rutrum nulla. Suspendisse sit amet porttitor lectus, vitae pulvinar ipsum. Cras magna risus, tempus at vehicula id, porttitor a sem. Integer sagittis semper nunc non aliquet. Phasellus purus sapien, venenatis porttitor tellus et, gravida imperdiet enim. Morbi volutpat iaculis turpis a faucibus. Praesent vulputate interdum nunc ut lobortis. Ut venenatis volutpat nunc quis laoreet. Praesent pretium adipiscing eros, quis laoreet lorem suscipit eget. Nunc vitae lacinia tortor. Nullam suscipit dui vitae augue accumsan ultrices. Suspendisse potenti.</div>


    Comme Sparrow le dit si bien, on ne m'arrête plus \o/
    J'aimerais remercier Dakota, Gravity et Halloween pour m'avoir autorisé à les utiliser comme modèle pour ce TP. Parce que c'est toujours plus parlant que Machin, Truc et Chose.
    Si vous avez un quelconque soucis n'hésitez pas à demander. D'ailleurs si vous souhaitez poster vos exercices à la suite, je vous y encourage !


    Dernière édition par A-Lice le Mer 25 Juin 2014 - 17:17, édité 1 fois

    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 22 Mai 2014 - 7:36

    Je suis pas tout à fait d'accord avec les préfixes, vu que pour tout navigateur mis à part Opera et Chrome (qui sont à présent tous deux sous webkit au passage Wink), il n'y a en général plus besoin de mettre de préfixe. D'ailleurs, il est rare qu'il faille le mettre tout court, même pour Opera et Chrome, si ce n'est pour les animations CSS3 (keyframes & transform, entre autre) mais surtout pas pour le border qui, depuis des années, n'a plus besoin de préfixe! C'est alourdir plus ou moins inutilement le code dans ce cas-ci!
    Donc normalement, si le navigateur n'est pas obsolète (ce qu'il ne devrait pas être) les préfixes ne sont plus nécessaires =)

    Edit: Si ça ne te gêne pas A-lice, je vais d'ailleurs faire un tuto sur ça! Wink



    A-Lice
    FémininAge : 22Messages : 4939

    le Jeu 22 Mai 2014 - 9:23

    Bien sur que non ça ne me gène pas. Mais je sais que pour les border si je mets pas -moz- mozilla ne le capte pas et n'ayant pas les autres j'avais supposé que c'était la même chose.

    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 22 Mai 2014 - 9:25

    Hum si, sans moz, Mozilla le capte pour les border O_O



    Ehawee
    FémininAge : 24Messages : 4512

    le Jeu 22 Mai 2014 - 14:54

    ça dépend des versions du navigateur, pour les préfixes, Mozilla me gère les bordures de "div" sans problème, par exemple, mais il ne m'affiche pas une fois sur deux des bordures appliquées à un "img"

    genre ça:

    Code:
    <img src="" style="border: 1px dotted black" />


    Une fois sur deux, il ne me l'affiche pas .><"





    gif1gif2
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Jeu 22 Mai 2014 - 15:15

    Normalement c'est pas censé. J'ai fait des test sur NU, et effectivement, chez moi ça le met, puis l'image ce reload et le border ce retire. Cependant, même en rajoutant le préfixe -moz- ça ne change rien du tout, donc ça ne vient pas de là.
    C'est n'est pas Mozilla qui retire systématiquement les border, même, elles s'affichent très bien, ici, par exemple: http://www.handsonweb.com/css/inline.html (il y a presque tout ne bas un livre avec un contours "dashed". Ce contour s'affiche très bien sur FF, et si tu regardes le code, il est bel et bien codé et non pas mit dans l'image!)



    A-Lice
    FémininAge : 22Messages : 4939

    le Mer 25 Juin 2014 - 17:18

    Bon bon bon, petite mise à jour de ce TP j'ai enlevé les préfixes vu qu'effectivement c'était mon mozilla qui avait un soucis (j'l'ai jamais aimé de toute façon u_u).
    Cette fois il est tout propre tout beau !

    Okhmhaka
    FémininAge : 31Messages : 31718

    le Mer 10 Sep 2014 - 12:39

    Je crois qu'il y a aussi un problème de forum sur les bordures d'images... mais il me semble que ce n'est plus le cas maintenant :hum:

    En tout cas merci une fois de plus de ce TP, bien expliqué et tout x) Bravo Wink

    Je déplace dans le Cursus (qui se remplit bien^^)



    Renard
    MasculinAge : 23Messages : 15

    le Mer 8 Juin 2016 - 18:30

    Bienvenue parmi nous !

    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe "XXX". Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à "YYY" responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !



    Hum... personne n'a posté avant moi, j'espère que je ne gène pas en postant mon exercice. Bon par contre c'est bizarre, mon texte normal est collé au titre, mais ça ne me fait pas ça sur mon forum test D: ... Un soucis dans mon code ?
    Linaewen
    FémininAge : 24Messages : 190

    le Lun 11 Juil 2016 - 23:10

    Voilà pour moi :)

    Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe Ingénieurs. Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la section appropriée. Tu peux également t'adresser à L'Oracle responsable du groupe. N'oublies pas que la ChatBox est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !



    Code:
    <div style="width: 450px; margin:auto; border-left: solid 6px #000; background-color: #949191; padding:10px;"><div style="float:left; margin-right:10px;"><img src="http://nsa37.casimages.com/img/2016/07/11/160711111525284657.png"  alt="Serpentard" /></div><span style="display:block; color:black; text-align:justify; font-size:15px;">Bienvenue parmi nous !
    J'ai l'immense honneur de t'annoncer que ton personnage est validé et qu'il intègre le groupe <span style="font-weight:bold;">Ingénieurs.</span> Si tu as un problème quelconque, n'hésites pas à poser tes questions dans la <a href="http://milas-arya.forumgratuit.org/f7-communaute" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">section appropriée</a>. Tu peux également t'adresser à <a href="http://milas-arya.forumgratuit.org/u1" style="font-style:italic; text-shadow:0px 0px 5px black; color:white;">L'Oracle</a> responsable du groupe. N'oublies pas que la <a href="http://milas-arya.forumgratuit.org/chatbox" style="color:white;">ChatBox</a> est un bon moyen de faire connaissance avec les autres joueurs. Amuses-toi bien !</span>
    </div>
    Nippon Syndrom
    FémininAge : 23Messages : 38

    le Sam 22 Oct 2016 - 18:06

    Très bon tuto Very Happy
    J'ai fait ça à ma sauce :3







    Bonjour cher membre !
    Le staff et moi-même avons l'immense honneur de t'annoncer que suite à ton implication sur le forum, tu viens d'intégrer le groupe Graphiste. Félicitations !

    Si tu as un problème quelconque, n'hésites pas à t'adresser à Choupa, la modératrice responsable de cette section. N'oublies pas que tu peux maintenant ouvrir une galerie et réaliser des commandes !

    Amuses-toi bien !








    Bonjour cher membre !
    Le staff et moi-même avons l'immense honneur de t'annoncer que suite à ton implication sur le forum, tu viens d'intégrer le groupe Développeur. Félicitations !

    Si tu as un problème quelconque, n'hésites pas à t'adresser à Luna, la modératrice responsable de cette section. N'oublies pas que tu peux maintenant poster des tutos et participer à la future version du forum !

    Amuses-toi bien !








    Bonjour cher membre !
    Le staff et moi-même avons l'immense honneur de t'annoncer que suite à ton implication sur le forum, tu viens d'intégrer le groupe Rédacteur. Félicitations !

    Si tu as un problème quelconque, n'hésites pas à t'adresser à Syd, la modératrice responsable de cette section. N'oublies pas que tu peux maintenant poster des articles spécialisés et des débats !

    Amuses-toi bien !




    Contenu sponsorisé

    Aujourd'hui à 23:07


      La date/heure actuelle est Jeu 8 Déc 2016 - 23:07