AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Partie 1 - Etape 3 : TP - Création d'un règlement

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 30 Avr 2014 - 17:57

    Rappel du premier message :

    TP – Création d'une mise en forme de règlement



    Suite à l'étape 2 et à l'étape 3 de la partie 1 de ce cursus, vous voici confronté à un nouveau TP pour tester dans un exemple concret ce que vous avez appris. Je vous conseille d'avoir les tableaux sur les différents éléments qu'on peut mettre dans les balises. Ces derniers sont présents dans les étapes 1 & 2.

    Voici le règlement auquel on va arriver à la fin de ce TP.

    Spoiler:

    Le titre


    On va commencer par l'intérieur pour venir terminer par l'extérieur. Pour dégrossir un peu tout ça, on débutera avec le titre de notre règlement. Et pour prouver que ce qui a été vu dans les étapes et TP précédents ne doit pas être oublié, on va utiliser un span pour le titre. À l'intérieur de cette balise, on va tout d'abord demander au span de se transformer en bloc. Sans ça on se verrait dans l'impossibilité d'aligner notre titre comme on le souhaiterait. Ici on va le centrer. Ensuite, pour mettre ce titre en avant on va changer sa taille et ainsi le rendre plus visible, plus tape-à-l'oeil. De la même manière, on va lui donner une couleur différente de celle du reste du texte. Pour terminer sur ce titre, on peut le souligner, le mettre en italique ou en gras, ou même les trois en même temps.

    Une minute... Comment ça on peut pas centrer si le span est pas devenu un bloc ? Pourtant dans le TP1 on l'a fait avec un center.


    Oui, cependant ce n'est pas 'bien'. Idéalement, il ne faut pas mélanger le html et le css. Pour donner un autre exemple, pour mettre le texte en italique on utilise font-style:italic dans un span ou une div. On ne met pas les balises < i > < /i >.


    Règlement


    Code:
    <span style="display:block; text-align:center; font-size:25px; color:seagreen; font-style:italic; text-decoration:underline;">Règlement</span>



    Okay, pour le titre, rien de nouveau.

    Les sous-titres


    Poursuivons, on va se servir d'un texte bien pratique évoqué dans l'étape 2, le Lorem Ipsum. Ce dernier va remplacer le règlement qui sera présent par la suite dans la fiche. Il nous servira donc pour avoir un aperçu réel de ce que donnera la fiche. Mais maintenant il va nous aider pour la mise en page de nos sous-titres.

    Donc, un sous-titre, c'est comme un titre. Il est juste un peu moins tape-à-l'oeil. Comme pour le titre, on va transformer le span en bloc. Cette fois ce ne sera pas pour le centrer, mais pour pouvoir décaler la première ligne. De manière générale, quand on veut ajouter un style qui contient l'attribut text-quelque chose dedans, il faut transformer le span en bloc. Après le décalage, on va choisir une taille qui sera entre celle du titre et celle du texte. Et pourquoi pas une couleur différente du texte également ?


    Le 1° point


    Code:
    <span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 1° point</span>



    Comme je l'ai dit, on va utiliser le Lorem Ipsum pour voir ce que vont donner les sous-titres une fois en place. Il suffit donc de générer un Lorem Ipsum ici et d'y intégrer nos sous-titres.


    Le 1° point
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    Le 2° point
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    Le 3° point
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    Le 4° point
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.


    Code:
    <span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 1° point</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    <span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 2° point</span>
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    <span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 3° point</span>
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    <span style="display:block; font-size:18px; color:seagreen; text-indent:50px;">Le 4° point</span>
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.



    Le fond : les bords


    Là se trouve le plus gros morceau de ce TP, le fond. Parce que c'est maintenant qu'on va faire la "décoration" de la fiche du règlement. Ici on va utiliser une div puisque nous allons créer un bloc. La première chose à faire est de lui donner une largeur, de préférence en pourcentage pour s'habituer à utiliser la largeur de cette manière. 90% me semble être une bonne largeur puisque ça laisse un espace entre notre fiche et les bords du forum. À cet endroit se pose le problème de l'alignement, il faut donc centrer cette fiche. Ensuite, on va ajouter un bord à notre fiche. Les différents bords possibles sont présents dans l'étape 1.

    On peut agir de différentes manières sur les bords. Le plus important est de ne pas oublier de leur donner une taille en pixel pour qu'ils apparaissent. Après, on peut ajouter une couleur ce qui est apprécié.
    Une autre chose, les bords peuvent être dissociés. Celui du haut n'est pas obligatoirement le même que celui du bas, de gauche ou de droite. Il suffit de préciser après le border de quoi il s'agit, comme ceci : Border-left.
    On peut également arrondir les angles avec cet attribut. Par exemple : Border-radius:25px.


    Ici j'ai volontairement différencié les bords haut/bas des bords gauche/droite.








    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C;">


    </div>



    Le fond : une image


    Au fond que nous avons déjà avec les bords on va ajouter une image. Rien de bien compliqué puisque c'est une image de fond. Pour en choisir une, il y en a dans l'étape 3 du cursus.








    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg);">


    </div>



    Le fond : les finitions


    Parce qu'il faut toujours garder le plus facile pour la fin, c'est plus motivant ! Ici on va reprendre notre fond avec l'image et y ajouter les derniers éléments, pourquoi pas une taille, une police, une couleur, une espacement entre les lettres...? Pour ce TP on va se contenter de justifier le texte et de mettre une couleur.








    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); text-align:justify; color:black;">


    </div>



    Assemblage


    Maintenant et c'est le plus simple on assemble tous les éléments codés. On prend donc notre fond complet auquel on ajoute notre titre et nos sous-titres avec le lorem ipsum. Et ça nous donne ceci :



    Règlement

    Le 1° point
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    Le 2° point
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    Le 3° point
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    Le 4° point
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.



    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); text-align:justify; color:black;">
    <span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
    </div>



    D'accord mais il y a un problème qui reste. Le texte est collé aux bords...


    Oui et c'est normal. Il faut ajouter un attribut plutôt sympa et pratique, le padding. Définition, le padding insère une marge entre tous les éléments présents dans la balise dans laquelle il est ajouté, en l'occurence dans notre div.


    Règlement

    Le 1° point
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    Le 2° point
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    Le 3° point
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    Le 4° point
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.



    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); padding:20px; text-align:justify; color:black;">
    <span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
    </div>



    Les liens


    La fiche pourrait rester comme ça, après tout c'est un règlement. Néanmoins, dans certains cas, comme ici sur Never-Utopia, il faut se présenter avant de faire quoique ce soit d'autre.

    Donc, pourquoi ne pas simplifier l'accès à la partie présentation en ajoutant un lien dans notre fiche ?

    Parce qu'un exemple est toujours plus clair, vous avez probablement remarqué que depuis le début de ce TP je vous renvoie à différentes étapes déjà vu. Et bien c'est en utilisant une balise, bien précise et qui ne sert qu'à ça, que c'est possible.


    Code:
    <a href=""></a>



    Bien sur comme ça elle ne nous emmène nul part. Il faut donc ajouter un lien entre les guillemets. Mais pas seulement, si vous ne faites qu'ajouter un lien entre les guillemets, ça ne vous mènera toujours nul part. Il faut également ajouter un mot entre la balise d'ouverture et celle de fermeture. D'ailleurs, au passage, on peut faire un lien avec autre chose qu'un mot, une image par exemple.

    Le mot qui contient le lien n'est pas obligatoirement au début ou à la fin de la phrase.


    Ici, je vais vous renvoyer à l'index des étapes du cursus codage.


    Code:
    Ici, je vais vous renvoyer à l'<a href="http://www.never-utopia.com/t47703-index-du-cursus-codage">index</a> des étapes du cursus codage.



    C'est bien joli tout ça mais moi je veux que mon lien soit différents des autres.


    C'est possible, cette balise fontionne comme la div. On peut donc lui ajouter un style quelconque, comme une couleur ou mettre le texte en italique.

    Mon lien est bleu et en italique.


    Code:
    <a href="http://www.never-utopia.com/t48890-partie-1-tp-2-creation-d-une-mise-en-forme-de-reglement" style="color:blue; font-style:italic;">Mon lien est bleu et en italique.</a>



    Oui d'accord, mais dans ma feuille de style css j'ai dit que je voulais que tous mes liens soient roses, comment lui mettre une autre couleur à celui-là ?


    Et bien, pour que le style de ce lien ait plus d'importance que celui de la feuille de style css, il suffit de lui ajouter le suffixe !important. De cette manière même si vous utiliser :


    Code:
    <a href="adresse du lien" class="lien" style="color:blue !important;">www</a>



    Avec lien qui a comme couleur rose, le lien s'affichera en bleu.

    Je vous ai perdu ?

    Pour ajouter un lien :
    -il faut utiliser la balise

    Code:
    <a href=""></a>

    -on peut y mettre la forme que l'on souhaite comme dans une div
    -on peut également forcé le style à être prioritaire par rapport à la feuille de style css avec le suffixe !important


    Pour en revenir à notre fiche, on voudrait ajouter un lien donc, qui s'affiche en bleu même si la feuille de style css impose des liens roses. Et on veut que notre lien soit placé sur ipsum (le 2° mot du Lorem ipsum).

    ipsum


    Code:
    <a href="http://www.never-utopia.com/" style="color:blue !important;">ipsum</a>



    Maintenant il suffit d'ajouter cette partie du code à la fiche du règlement pour obtenir un règlement complet.

    Un autre détail, on est pas limité dans le nombre de lien qu'on fait.


    Voici donc notre fiche finale.



    Règlement

    Le 1° point
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    Le 2° point
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    Le 3° point
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    Le 4° point
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.



    Code:
    <div style="width:90%; margin:auto; border-top: solid 5px #95844C; border-bottom: solid 5px #95844C; border-left: dashed 5px #95844C; border-right: dashed 5px #95844C; background-image:url(http://img4.hostingpics.net/pics/401717motif4.jpg); padding:20px; text-align:justify; color:black;">
    <span style="display:block; text-align:center; font-size:25px; color:white; font-style:italic; text-decoration:underline;">Règlement</span>

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 1° point</span>
    Lorem <a href="http://www.never-utopia.com/" style="color:blue !important;">ipsum</a> dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 2° point</span>
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 3° point</span>
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    <span style="display:block; font-size:18px; color:white; text-indent:50px;">Le 4° point</span>
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
    </div>




    Simple et à la portée de tous. Si néanmoins, un point ne serait pas suffisamment clair pour vous ou que vous vous êtes perdus en cours de route, n'hésitez pas à demander des précisions et de l'aide. Et pour reprendre la phrase de Narja, c'est en forgeant qu'on devient forgeron. Il ne faut donc pas se priver de faire vos propres essais pour tout assimiler.


    Dernière édition par A-Lice le Lun 5 Mai 2014 - 22:33, édité 3 fois
    luc4s
    luc4s
    MasculinAge : 24Messages : 37

    Ven 18 Sep 2015 - 0:04




    Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Mini_150917115845938630  Réglement  Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Mini_150917115845938630



    Le 1° point


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor urna sit amet sapien finibus consequat. Cras et ipsum sed quam porta accumsan. Fusce mattis est quis lectus auctor, at tempor neque tempor. Mauris eu fermentum lorem. Curabitur bibendum felis ut convallis posuere. Morbi porta sit amet eros non tincidunt. Sed facilisis elementum ultricies. Duis velit lorem, cursus id mollis sed, ultrices non velit. Nam rhoncus ut libero et sollicitudin. Nullam imperdiet et eros a pulvinar. Morbi ac tempus turpis. Curabitur at blandit leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc est augue, scelerisque tristique vestibulum sed, iaculis vitae magna. Mauris lacus ipsum, auctor ac urna et, luctus feugiat augue.


    Le 2° point


    Nunc hendrerit leo quis eros tempus dapibus. Nam in lectus massa. Ut eu erat euismod, sollicitudin dolor ut, suscipit massa. Phasellus lobortis dignissim malesuada. Sed pellentesque in tortor non ornare. Curabitur faucibus euismod tempor. Pellentesque tempor ipsum et elementum sollicitudin.


    Le 3° point


    Suspendisse ultricies nulla nibh, eu suscipit mauris mattis et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat diam et erat consequat, non rutrum libero efficitur. Sed id cursus augue. Quisque id enim convallis, vestibulum dui ornare, ultrices nulla. Morbi in imperdiet ipsum. Integer sodales tincidunt nunc in lobortis. Etiam condimentum aliquam ipsum, at elementum nulla ornare sed. In nisl ante, condimentum vitae sagittis ut, vehicula eu nisl.


    Le 4° point


    Donec non nibh dignissim lectus accumsan ornare vel non mi. Ut pellentesque eu lorem sit amet scelerisque. Fusce tincidunt pellentesque urna, quis pharetra libero sagittis et. Suspendisse nunc ipsum, fringilla cursus feugiat nec, auctor sit amet odio. Duis rutrum pellentesque nisl, consequat vulputate lectus. Sed convallis suscipit iaculis. Ut consequat mattis quam quis venenatis. Nam interdum urna vitae augue euismod porta. Suspendisse felis felis, laoreet eget fermentum nec, malesuada et enim. Proin efficitur risus eleifend massa rutrum porttitor. Vestibulum eget arcu eros. Donec quam nisi, maximus ac viverra ac, ultrices et leo.

    Anonymous
    Invité

    Sam 28 Nov 2015 - 5:56

    Bonsoir et merci pour cette partie 1.2 ! Wink

    Concernant les images de fond (backgrond), j'ai compris que l'image s'adaptait au cadrage puisqu'elle se situe dans le
    Code:
    <div style=
    . Je ne sais pas si vous y reviendrez dans les prochaine leçon, mais je me demandais comment faire pour qu'une image de fond avec des éléments ne soit pas déformé (si l'on fonctionne avec un pourcentage) et si l'on veut conserver ce précieux pourcentage ?
    Anonymous
    Invité

    Sam 28 Nov 2015 - 6:03

    Désolé ma question n'apparait pas dans mon précédent message si vous pouviez l'éffacer et garder celui-ci:
    Bonsoir et merci pour cette partie 1.2 ! Wink

    Concernant les images de fond (backgrond), j'ai compris que l'image s'adaptait au cadrage puisqu'elle se situe dans le...
    Code:
    <div style=
    .
    . Je ne sais pas si vous y reviendrez dans les prochaine leçon, mais je me demandais comment faire pour qu'une image de fond avec des éléments ne soit pas déformé (si l'on fonctionne avec un pourcentage) et si l'on veut conserver ce précieux pourcentage ?
    Dante Le Magnifique
    Dante Le Magnifique
    MasculinAge : 38Messages : 48

    Dim 29 Nov 2015 - 20:19

    Malgré le fait que je suis un boulet fini, j'avoue être plus que fier de moi pour le coup !

    Merci encore pour ce tuto ! cheers



    ¤ Règlement ¤


    ☼ Le 1° point ☼
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Aliquam eu semper felis. Mauris lobortis lacus eu sollicitudin volutpat. In ac magna pharetra, congue est vitae, facilisis mi. Sed quis nisl at enim viverra feugiat. Ut sapien orci, porttitor id condimentum vel, dictum non ligula. Ut et urna eu sem condimentum convallis.

    ☼ Le 2° point ☼
    Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac. Duis eleifend mauris ante, id volutpat quam facilisis eu. Proin commodo facilisis mauris nec blandit. Duis nec risus auctor, venenatis diam quis, pretium eros. Nulla erat libero, hendrerit interdum mollis bibendum, molestie sit amet lorem. Nunc sodales vestibulum dictum. Sed ac mauris eget sem porta congue sed sed magna.

    ☼ Le 3° point ☼
    Ut pulvinar nisl a erat facilisis porttitor. Nunc id consectetur sapien, in scelerisque nulla. Nunc a bibendum ipsum. Morbi lacus felis, malesuada a felis viverra, dictum commodo nunc. Vestibulum laoreet sem diam, id blandit eros aliquet et. Aenean nec est porttitor, volutpat erat nec, vehicula quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent adipiscing leo turpis, nec bibendum mauris rhoncus in. Aenean condimentum non erat quis sollicitudin. Suspendisse potenti. Morbi molestie ligula turpis, eget laoreet sem molestie eu. Phasellus dignissim eros est.

    ☼ Le 4° point ☼
    Mauris ligula risus, ultricies id tristique vitae, sodales id sapien. Duis accumsan facilisis sapien. Cras auctor egestas lacus non adipiscing. Quisque quis justo sodales, porttitor turpis non, cursus augue. Sed congue ac neque sit amet imperdiet. Curabitur pulvinar orci ut arcu lacinia, quis malesuada tortor pretium. Nulla accumsan, sapien sit amet ultrices congue, nibh lorem adipiscing urna, dapibus vehicula felis justo at velit. Morbi mollis tellus at enim gravida, in fermentum erat bibendum.
    ArronGot
    ArronGot
    MasculinAge : 26Messages : 322

    Lun 7 Déc 2015 - 0:22

    Voilà pour mon résultat ^_^

    Résultat:



    Encore merci Alkhana :
    Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Signar10                 Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Sceauf10
    ArronGot
    ArronGot
    MasculinAge : 26Messages : 322

    Lun 7 Déc 2015 - 0:24

    ArronGot a écrit:Voilà pour mon résultat ^_^

    Résultat:



    Encore merci Alkhana :
    Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Signar10                 Partie 1 - Etape 3 : TP - Création d'un règlement - Page 2 Sceauf10
    Encrine
    Encrine
    FémininAge : 25Messages : 52

    Mer 20 Avr 2016 - 11:28

    Eh voilà pour bibi ! >w< Merci pour ce TP, très clair soit dit en passant ♥


    Règlementou les cinq commandements
    Les leçons tu liras...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac.

    Le vocabulaire tu retiendras...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac.

    Les cours en pratique tu mettras...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac.

    De l'échec effrayé tu ne seras pas...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac.

    Never-Utopia tu remercieras...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sapien magna, feugiat dignissim arcu vitae, mollis tempus est. Morbi pulvinar sem in dui vulputate pellentesque. Quisque in elementum est. Suspendisse potenti. Vivamus ultrices pretium erat, vel pellentesque sem auctor ac.
    codage by encrine
    Renard
    Renard
    MasculinAge : 31Messages : 15

    Mar 7 Juin 2016 - 22:30

    Oh bah voilà, moi qui me demandais comment faire ça dans le précédent TP :]


    Note de Service
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta lacinia tristique. Praesent sem orci, placerat at egestas quis, vulputate condimentum eros. Mauris tellus erat, sodales vitae porta non, aliquam sit amet erat. Duis ornare odio eu lacus dapibus euismod. Maecenas porttitor orci id varius vulputate. Sed blandit nec tellus sit amet finibus. Vivamus bibendum justo at ante laoreet, quis tempus arcu vulputate. Proin eleifend ligula eget nunc aliquet ornare. Proin eleifend ut felis nec cursus.

    Cras viverra ornare porta. Donec sit amet diam et ex lobortis hendrerit. Integer ut leo dignissim, laoreet quam eu, dignissim ipsum. Sed ac turpis vel neque vehicula sagittis. Sed eu accumsan metus, at rhoncus neque. Nulla felis orci, tincidunt id mauris posuere, sagittis gravida lacus. Pellentesque porttitor ac ante vitae pellentesque. Curabitur rutrum erat ut mauris tempus suscipit. Vestibulum in fringilla felis. Maecenas eleifend, justo sit amet dictum auctor, dolor quam molestie turpis, et rutrum felis lacus eu dolor. Sed mollis arcu a odio dignissim, eget ornare nunc pellentesque. Donec aliquam tempus odio sit amet venenatis. Pellentesque id libero mattis, pulvinar augue eget, volutpat nunc. Integer et porta nulla.

    Sed semper quam ligula, nec imperdiet sapien commodo ac. In laoreet vestibulum ipsum id iaculis. Quisque finibus erat tempus lectus vulputate sodales. In hac habitasse platea dictumst. Etiam hendrerit suscipit odio, at mattis tortor dictum ut. Praesent dapibus, nulla sed cursus scelerisque, magna ex lacinia nibh, volutpat consectetur lacus libero vitae augue. Mauris vel euismod quam. Duis malesuada ante sit amet porttitor fermentum. Ut a interdum lectus. Praesent vulputate tellus tortor, sit amet viverra augue hendrerit sed. Quisque porta convallis lorem, sed egestas lacus scelerisque nec.
    Anonymous
    Invité

    Lun 11 Juil 2016 - 9:29

    Merci pour ce TP Very Happy Encore un code réussie Razz
    Voilà pour moi ^^ j'ai voulu faire quelque chose de ... différent ? XD

    T'as fumé l'vieux ?


    TERRE À L'HORIZOOOOOOOOON !

    Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    Cumque pertinacius ut legum gnarus accusatorem flagitaret atque sollemnia, doctus id Caesar libertatemque superbiam ratus tamquam obtrectatorem audacem excarnificari praecepit, qui ita evisceratus ut cruciatibus membra deessent, inplorans caelo iustitiam, torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus cum abiecto consorte poenali est morte multatus. et ducebatur intrepidus temporum iniquitati insultans, imitatus Zenonem illum veterem Stoicum qui ut mentiretur quaedam laceratus diutius, avulsam sedibus linguam suam cum cruento sputamine in oculos interrogantis Cyprii regis inpegit.


    LARGUEZ LES AMARRES !!!

    Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

    Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.

    Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.


    DU RHUM DES FEMMES ET D'LA BIÈRE NON DE DIEU

    Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

    Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

    Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.


    ... HIPS ... J'CROIS ZUI SAOULE, CAP'NEM !

    Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.

    Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

    Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.


    Anonymous
    Invité

    Lun 11 Juil 2016 - 9:31

    Ah oui, sur mon forum c'est correct, mais j'avais oublié qu'on avait pas la même taille :/ je corrige, voilà la bonne version ;

    T'as fumé l'vieux ?


    TERRE À L'HORIZOOOOOOOOON !

    Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum.

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    Cumque pertinacius ut legum gnarus accusatorem flagitaret atque sollemnia, doctus id Caesar libertatemque superbiam ratus tamquam obtrectatorem audacem excarnificari praecepit, qui ita evisceratus ut cruciatibus membra deessent, inplorans caelo iustitiam, torvum renidens fundato pectore mansit inmobilis nec se incusare nec quemquam alium passus et tandem nec confessus nec confutatus cum abiecto consorte poenali est morte multatus. et ducebatur intrepidus temporum iniquitati insultans, imitatus Zenonem illum veterem Stoicum qui ut mentiretur quaedam laceratus diutius, avulsam sedibus linguam suam cum cruento sputamine in oculos interrogantis Cyprii regis inpegit.


    LARGUEZ LES AMARRES !!!

    Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

    Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.

    Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.


    DU RHUM DES FEMMES ET D'LA BIÈRE NON DE DIEU

    Saepissime igitur mihi de amicitia cogitanti maxime illud considerandum videri solet, utrum propter imbecillitatem atque inopiam desiderata sit amicitia, ut dandis recipiendisque meritis quod quisque minus per se ipse posset, id acciperet ab alio vicissimque redderet, an esset hoc quidem proprium amicitiae, sed antiquior et pulchrior et magis a natura ipsa profecta alia causa. Amor enim, ex quo amicitia nominata est, princeps est ad benevolentiam coniungendam. Nam utilitates quidem etiam ab iis percipiuntur saepe qui simulatione amicitiae coluntur et observantur temporis causa, in amicitia autem nihil fictum est, nihil simulatum et, quidquid est, id est verum et voluntarium.

    Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.

    Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.


    ... HIPS ... J'CROIS ZUI SAOULE, CAP'NEM !

    Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.

    Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?

    Ut enim benefici liberalesque sumus, non ut exigamus gratiam (neque enim beneficium faeneramur sed natura propensi ad liberalitatem sumus), sic amicitiam non spe mercedis adducti sed quod omnis eius fructus in ipso amore inest, expetendam putamus.

    Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

    Iamque non umbratis fallaciis res agebatur, sed qua palatium est extra muros, armatis omne circumdedit. ingressusque obscuro iam die, ablatis regiis indumentis Caesarem tunica texit et paludamento communi, eum post haec nihil passurum velut mandato principis iurandi crebritate confirmans et statim inquit exsurge et inopinum carpento privato inpositum ad Histriam duxit prope oppidum Polam, ubi quondam peremptum Constantini filium accepimus Crispum.


    Nippon Syndrom
    Nippon Syndrom
    FémininAge : 30Messages : 49

    Jeu 20 Oct 2016 - 21:58

    Très bon tuto !! Very Happy
    Un gros merci !

    Voilà ce que ça donne pour moi :


    Règlement


    Point 1 :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut ligula dictum, suscipit ipsum lacinia, maximus velit. Cras fermentum arcu non felis maximus condimentum. In hac habitasse platea dictumst. Duis ac felis rhoncus, pharetra ex eleifend, cursus massa. Vivamus ac bibendum quam. Mauris vel quam tempor, condimentum mauris eget, efficitur ligula.


    Point 2 :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut ligula dictum, suscipit ipsum lacinia, maximus velit. Cras fermentum arcu non felis maximus condimentum. In hac habitasse platea dictumst. Duis ac felis rhoncus, pharetra ex eleifend, cursus massa. Vivamus ac bibendum quam. Mauris vel quam tempor, condimentum mauris eget, efficitur ligula.


    Point 3 :
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut ligula dictum, suscipit ipsum lacinia, maximus velit. Cras fermentum arcu non felis maximus condimentum. In hac habitasse platea dictumst. Duis ac felis rhoncus, pharetra ex eleifend, cursus massa. Vivamus ac bibendum quam. Mauris vel quam tempor, condimentum mauris eget, efficitur ligula.





    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mar 4 Juil 2017 - 23:56

    merci pour ce tuto voilà un premier essais

    Spoiler:

    Mélaïna
    Mélaïna
    FémininAge : 36Messages : 70

    Ven 8 Juin 2018 - 5:32

    Coucou,

    Voilà un essai de règlement... C'est encore à peaufiner, mais les codes commencent à rentrer. J'ai eu quelques soucis sur lesquels il faut que je penche en relisant les cours !

    Règlement général
    de Storybrooke

    Chers habitants de Storybrooke,

    Je vous souhaite à tous la bienvenue dans ce forum !
    Vous voilà dans la partie règlement qui vous permettra de jouer dans de bonnes conditions.


    Pseudos

    Votre pseudo doit être composé d'un nom et prénom, sauf justification RP (un orphelin, un personnage du monde des contes comme Mulan)
    Celui-ci doit être composé uniquement de lettres.


    Comptes

    Vous pouvez créer plusieurs comptes. Cependant, vous ne pouvez pas avoir plusieurs personnages qui sont amenés à se rencontrer dans les épisodes déjà diffusés.
    Ex: Régina Mills et Mr Gold; Mulan et Emma Swan...
    Si vous créez plusieurs comptes, nous vous demandons d'être actifs sur les personnages de la série afin de ne pas bloquer les RP les concernant.


    Participations aux RPs

    Vous avez accès à tout le forum. Cependant, pour la partie RP, il faut attendre que la fiche soit validée.

    Avatar

    Les avatars doivent obligatoirement représenter :
    -Pour les personnages de la série : une photo de l'acteur qui le joue
    -Pour les personnages inventés : une célébrité que vous lierez (en fonction des caractéristiques physiques) à votre personnage. La personnalité choisie sera affichée dans la liste des personnalités prises.
    L'avatar ne doit pas dépasser 150x200px.


    Signature

    Les signatures sont limitées à une image de : 500x200px ou 3 lignes écrites. Si elles dépassent, celles-ci doivent être cachées afin de ne pas gêner la lectures des messages.

    En espérant que vous passerez un agréable moment sur le forum,

    Bon jeu à tous !
    Rainy-Sunny
    Rainy-Sunny
    FémininAge : 25Messages : 22

    Lun 18 Mar 2019 - 2:17

    Et voilà pour moi ! C'est très violet et blanc, mais j'avais la flemme de changer les couleurs xD

    Merci pour le tuto !

    Code:
    <div style="width: 85%; margin: auto; border-right: 4px solid #6a0c83; border-left: 4px solid #6a0c83; border-top: 2px solid #6a0c83; border-bottom: 2px solid  #6a0c83; border-radius: 20px 20px 20px 20px; background-image: url(https://2img.net/r/hpimg4/pics/140551motif6.jpg);">
    <div style="padding: 15px; color: black; font-size: 13px; font-family: arial; text-align: justify; text-shadow: 0 1px 0 #d4d4d4">
    <span style="display: block; text-align:center; font-size:45px; color: #6a0c83; font-style:italic; font-family: Brush Script MT, Brush Script Std, cursive; text-shadow: 0 0 1px grey;">Règlement<br /><span style="display: block; margin-top: 5px; font-family: times new roman; font-size: 15px; font-style:none; color: black">Il va falloir obéir, les enfants :3</span></span>
    <br /><br />
    Petite intro sympatoche
    <br />
    <span style="display:block; text-align: center; padding-bottom: 6px; padding-top: 6px; border-top: 2px dotted #6a0c83; border-bottom: 2px dotted #6a0c83; font-family: times new roman; font-variant: small-caps; font-weight: bold; font-size:25px; color:#6a0c83;">Première partie</span><br />
    <span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">1° point</span>
    <div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
    <br />
    <span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">2° point</span>
    <div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
    <br />
    <br />
    <span style="display:block; text-align: center; padding-bottom: 6px; padding-top: 6px; border-top: 2px dotted #6a0c83; border-bottom: 2px dotted #6a0c83; font-family: times new roman; font-variant: small-caps; font-weight: bold; font-size:25px; color:#6a0c83;">Deuxième partie</span><br />
    <span style="display:block; margin-left: 80px; font-family:times new roman; font-variant: small-caps; font-style: italic; font-size:20px; color:#6a0c83;">1° point</span>
    <div style="border-left: 3px solid #6a0c83; padding-left: 10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac mollis nisl. Morbi eu nibh sed ex cursus rutrum et vel ante. Vestibulum ultrices tortor eu ligula malesuada tincidunt. Donec fringilla ligula libero, sit amet ultricies lacus rhoncus non. Sed massa ex, maximus vel urna vitae, convallis fermentum tortor. In id enim nibh. Suspendisse commodo sed augue in pellentesque. Suspendisse ac felis in quam eleifend ultricies. Nullam et aliquam enim, nec egestas ligula. Nullam eget arcu sit amet magna auctor tristique nec quis sapien. Nulla a lorem pulvinar, consequat metus et, condimentum lacus. Vivamus eleifend orci sit amet metus sollicitudin, nec euismod ex dictum. Quisque arcu orci, imperdiet nec elit sed, fringilla laoreet eros. Etiam et tortor eget sem maximus mattis a nec odio.</div>
    </div>
    </div>


    Résultat:



    Sunny : Petite folle, a moyenne chevelure brune et avec des lunettes de Geekou. Aime se taper des délires toute seule.


    Rainy : Grande folle, a grande chevelure brune et aussi des lunettes, mais pas de Geekou. Aime les chouettes et les minets ce qui est complètement HS.

    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 6:13