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 du moment : -39%
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
Voir le deal
399 €

    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

    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
    • Revenir en haut
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Lun 5 Mai 2014 - 17:35

    Salut !
    Tout est parfait, rien à dire, des explications claires, aérées, annotées, tout comme il faut^^

    Merci beaucoup de ton aide dans le cursus, je suis certain que les membres apprécieront d'avoir un exemple de mise en forme concret à réaliser, libre à eux par la suite de la modifier à leur goût et selon les couleurs de leur propre forum.



    sign
    • Revenir en haut
    Joey Ryan Jr.
    Joey Ryan Jr.
    MasculinAge : 33Messages : 16

    Ven 22 Aoû 2014 - 0:35

    Bonsoir , je ne sais pas si je peux poster à la suite, mais je tenais à te ou vous remercier. j'ai compris ton code dans les grande ligne. je dirais même plus il est vrai clair et facile à comprendre. Bon après je pense que le soucis (pour moi) va être de tout retenir ... je me vois mal aussi revenir chaque fois sur le fow pour me rappeler comment on met un texte en gras ou quoi. Du coup je pense que je me ferai une ou des petites fiches word pour pouvoir les avoir sous la main plus facilement.
    En attendant j'ai essayé avec les codes proposer de créer un petit truc que je trouve sympa. Je n'ai rien fais de plus que combiner les codes que vous nous proposer dans les TD.


    Titreun petit sous-titre?
    Votre magnifique titre
    et même pas peur, j'mets un sous-titre!
    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.

    Votre magnifique titre
    et même pas peur, j'mets un sous-titre!
    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.


    Voilà se que ça donne comme fiche de règlement. Pour vous rassurer j'ai réalisé ce code sur mon fow test, il n'y a que moi qui m'en sert et qui le vois du coup vos codes, si vous voulez les garder secret ne seront pas utilisé.
    Mais en tout cas merci, j'espère lire d'autre choses intéressante et vite progresser :)
    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Ven 22 Aoû 2014 - 0:55

    Hello.
    Ne t'en fais pas ses codes ne sont pas top secret x) Sinon ils ne seraient pas dans un cursus ouvert à tous Wink
    Bien sur que tu peux poster à la suite ! Et si tu as compris tout ce que tu as utilisé c'est l'essentiel ! Peut-être que tu aurais pu personnaliser les couleurs et les images :hum:
    En tout cas je ne peux que t'encourager à faire des fiches pour tout avoir sous la main. Tu verras qu'au fil du temps certaines parties de code reste, mais n'hésites pas à y retourner pour le reste (:
    Et c'est moi qui te remercie de ton retour !

    • Revenir en haut
    Joey Ryan Jr.
    Joey Ryan Jr.
    MasculinAge : 33Messages : 16

    Ven 22 Aoû 2014 - 1:09

    Alors j'ai juste personnalisé l'ombre porté et pas le reste parce que les image bah j'avais la flemme de recadrer et tout lol. Puis les couleurs je suis daltoniens , (sans rire ><) j'ai essayer avec http://www.code-couleur.com/ mais ça rendais rien de très jolie, du coup j'ai laisser comme ça en fait, mais vu que je faisais point par point j'ai bien vu ou et comment on modifié tout ça crois moi xD ! Mais oui j'ai plus ou moins compris. Comme j'ai dis je pense que je vais pas me rappeler de tout et va falloir que je me fasse des fiches de révision !

    Bref encore merci et de rien du coup ! Au plaisir
    • Revenir en haut
    Costati
    Costati
    FémininAge : 24Messages : 52

    Ven 22 Aoû 2014 - 12:50

    Si ça peut t'aider, moi j'ai pris des capture de toutes les notions importantes en mettant des titres bien précis. Je les ai rangé dans un dossier sur mon bureau, du coup quand je cherche quelque chose c'est très rapide d'accès et j'ai pas besoin de passer du temps à tout recopier sur une fiche word.
    • Revenir en haut
    Angy38
    Angy38
    FémininAge : 53Messages : 233

    Dim 21 Sep 2014 - 21:34

    merci !
    Mon premier essai de fiche grâce à vous !

    Le réglement


    1er 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. Règlement. 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.

    2eme 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.

    3eme 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.

    4eme 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.

    5eme 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.

    6eme 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.
    Miss Emi



    Partie 1 - Etape 3 : TP - Création d'un règlement Jvie
    • Revenir en haut
    Ikigami
    Ikigami
    FémininAge : 35Messages : 37

    Mar 30 Sep 2014 - 15:41

    Mon premier règlement... merci beaucoup pour tous ses tutos, c'est super agréable à suivre.


    Règlement

    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. Règlement 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.


    2° 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.

    Merci.

    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 24 Mar 2015 - 13:12

    Mais de rien, merci à vous de poster vos essais (:
    J'aime beaucoup ta fiche Angy en passant !

    • Revenir en haut
    Mariketa
    Mariketa
    FémininAge : 46Messages : 79

    Lun 27 Avr 2015 - 19:23

    Merci beaucoup !
    • Revenir en haut
    Chimik Girl
    Chimik Girl
    FémininAge : 30Messages : 128

    Lun 25 Mai 2015 - 12:47

    Très bon tuto/tp. Je suis encore étonner que j'ai réussi à faire une fiche, grâce à vous,



    Règlement

    Article 1
    Lorem ipsum contexte dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat présentation cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Article 2
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

    Article 3
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

    Article 4
    Suspendisse potenti. Vestibulum volutpat. Proin semper, dolor eu porttitor scelerisque, risus dui vehicula justo, id vulputate quam ante vel ipsum. Pellentesque id neque nec ligula elementum aliquet. Maecenas venenatis tortor ut quam faucibus ornare. Donec mollis eros. Mauris magna pede, vehicula eget, molestie ac, vehicula sed, orci. Morbi pharetra urna at eros. Donec cursus dui luctus nulla. Curabitur malesuada justo in libero. In erat diam, sagittis quis, dictum at, ultrices eget, enim.
    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Lun 25 Mai 2015 - 13:15

    Mais de rien (:
    C'est un plaisir de voir que tu as réussi grâce à ce dernier (:

    • Revenir en haut
    Yukimura Esuki
    Yukimura Esuki
    MasculinAge : 28Messages : 131

    Mar 26 Mai 2015 - 21:59

    Je tenais à vous présenter ma page de règlement que j'ai faite en essayant de ne pas regarder le tutoriel. j'espère qu'il vous plaira !



    Règlement général

    1° Point : ...

    Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

    2° Point : ...

    Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

    3° Point : ...

    Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?

    4° Point : ...

    Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?
    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 27 Mai 2015 - 10:33

    Hey !
    Ce n'est pas à nous qu'il doit plaire mais à toi Wink

    En tout cas si tu as réussi sans regarder les codes je ne peux que tu féliciter.

    • Revenir en haut
    Tayu
    Tayu
    FémininAge : 28Messages : 10

    Mar 30 Juin 2015 - 10:00

    Merci beaucoup pour les tutos <3

    J'ai réussi à faire mon post de présentation  avec le tuto numéro 1 et 2, le reste j'ai fais moi-même et j'ai repris le padding d'ici. Je ne savais pas que le html était aussi "facile" :o

    Pour voir le rendu
    Je ne peux pas poster mon code sure ce forum car il s'affiche mal ici.

    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 30 Juin 2015 - 10:55

    Personne n'a dit que le codage était compliqué x)
    En tout cas très joli rendu (: Peut-être pas le plus adapté à un règlement mais joli tout de même ^^

    • Revenir en haut
    Tayu
    Tayu
    FémininAge : 28Messages : 10

    Mar 30 Juin 2015 - 18:30

    Mais qui a parlé de règlements ? :siffle:
    C'est l'article de présentation du forum :)
    • Revenir en haut
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mar 30 Juin 2015 - 19:40

    Alors c'est nikel Razz (peut-être parce que tu es sur le TP dédié au règlement :siffle: )

    • Revenir en haut
    Tayu
    Tayu
    FémininAge : 28Messages : 10

    Dim 5 Juil 2015 - 12:53

    Voici ce que donnent mes règles sur mon forum, encore une fois, je ne peux pas le mettre directement ici puisque ça ne s'affiche pas correctement :michi3:
    • Revenir en haut
    Nutop
    Nutop
    FémininAge : 21Messages : 254

    Lun 20 Juil 2015 - 22:16

    Coucouuu 
    Alors, j'ai tout fait comme tu disais, en personnalisant, mais un prblème persiste. J'ai mis une hauteur et une image de fond,(une image, pas un motif). Seulement, quand je mets le texte par dessus, l'image passe àa la trappe. Qu'est-ce qui cloche?




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

    • Revenir en haut
    Nutop
    Nutop
    FémininAge : 21Messages : 254

    Lun 20 Juil 2015 - 22:34

    Le code peut etre utile x) Je sais pas pourquoi mais je ne peux pas éditer, donc voilà le code sans texte :
    Code:
    <div style = " width: 654px; height: 1056px;  margin:auto; border-top : 6px double darkgreen; border-left: 6px dashed darkgreen; border-bottom: 6px double darkgreen; border-right: 6px dashed darkgreen; background-image: url(http://img15.hostingpics.net/pics/800726LIVRE.png);"> 

    </div>

    Rendu:
    , 
    et si je mets du texte :  


    Code:
    <div style = " width: 654px; height: 1056px;  margin:auto; border-top : 6px double darkgreen; border-left: 6px dashed darkgreen; border-bottom: 6px double darkgreen; border-right: 6px dashed darkgreen; background-image: url(http://img15.hostingpics.net/pics/800726LIVRE.png);"> <div style= OVERFLOW : auto;" >
    Le texte, et encore du texte, et je mets du Loret Ipsum: Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.

    [size=10]Sed ut tum ad senem senex de senectute, sic hoc libro ad amicum amicissimus scripsi de amicitia. Tum est Cato locutus, quo erat nemo fere senior temporibus illis, nemo prudentior; nunc Laelius et sapiens (sic enim est habitus) et amicitiae gloria excellens de amicitia loquetur. Tu velim a me animum parumper avertas, Laelium loqui ipsum putes. C. Fannius et Q. Mucius ad socerum veniunt post mortem Africani; ab his sermo oritur, respondet Laelius, cuius tota disputatio est de amicitia, quam legens te ipse cognosces.[/size]
    [size=10]Nec sane haec sola pernicies orientem diversis cladibus adfligebat. Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis excursibus cuncta miscere, ex latrociniis occultis et raris, alente inpunitate adulescentem in peius audaciam ad bella gravia proruperunt, diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen indignitate perciti vehementer, ut iactitabant, quod eorum capiti quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali spectaculo feris praedatricibus obiecti sunt praeter morem.[/size]
    [size=10]Alii nullo quaerente vultus severitate adsimulata patrimonia sua in inmensum extollunt, cultorum ut puta feracium multiplicantes annuos fructus, quae a primo ad ultimum solem se abunde iactitant possidere, ignorantes profecto maiores suos, per quos ita magnitudo Romana porrigitur, non divitiis eluxisse sed per bella saevissima, nec opibus nec victu nec indumentorum vilitate gregariis militibus discrepantes opposita cuncta superasse virtute.[/size]
    [size=10]Per hoc minui studium suum existimans Paulus, ut erat in conplicandis negotiis artifex dirus, unde ei Catenae inditum est cognomentum, vicarium ipsum eos quibus praeerat adhuc defensantem ad sortem periculorum communium traxit. et instabat ut eum quoque cum tribunis et aliis pluribus ad comitatum imperatoris vinctum perduceret: quo percitus ille exitio urgente abrupto ferro eundem adoritur Paulum. et quia languente dextera, letaliter ferire non potuit, iam districtum mucronem in proprium latus inpegit. hocque deformi genere mortis excessit e vita iustissimus rector ausus miserabiles casus levare multorum.[/size]

    </div></div>

    Rendu:




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

    • Revenir en haut
    Nutop
    Nutop
    FémininAge : 21Messages : 254

    Lun 20 Juil 2015 - 22:52

    Excusez-moi pour le TP, vraiment ^^" 

    Si un membre du taff supprimait les deux premier, ce serait vraiment sympa. 

    Donc, pardon pour tout ce polluage, je me suis trompée de code qui flanche (j'étais allée dans mon hsitorique car j'étais accidentellement retournée sur la page d'accueil du forum, et j'ai sélectionné le mauvais) . Ce problème-ci éTant réparé grace à la magie des paddings, mon problème est le texte qui dépasse du cadre malgré l'overflow. 

    Code:
    <div style = " width: 654px; height: 1056px;  margin:auto; border-top : 6px double darkgreen; border-left: 6px dashed darkgreen; border-bottom: 6px double darkgreen; border-right: 6px dashed darkgreen; background-image: url(http://img15.hostingpics.net/pics/611548LIVRE.png);"> <div style="OVERFLOW: auto;  WIDTH: 640px; height 1050px; MARGIN-LEFT: 40px; margin-right: 50px; margin-bottom: 40p; MARGIN-TOP: 20px;">
    <span style = " display:block; text-align:center ; font-size: 40px; color : green; text-decoration: underline;" > Règlement </span>

    <span style = " display: block; text-align: right; font-size : 18px; color : seagreen; "> A propos du respect ... </span>

    Definiunt aeternitate et tradunt quam et superpositum utinam innumerabilia superpositum quoddam quam etiam appellamus: vocabulo quam ex utinam circulo numinis impiorum ut efficacis definiunt vocabulo quam duplici potentia partilibus lunari alii circulo mentium definiunt superpositum vel sublime appellamus: mentium etiam utinam Adrastia quam substantialis definiunt quam humanarum efficacis circulo Nemesim circulo bonorumque humanarum utinam Iustitiae bonorumque atque quam abdita facinorum praesidens modi quaedam fingentes mentium substantialis quam innumerabilia filiam quoddam potentia quam circulo sublime huius substantialis bonorumque praemiatrix substantialis mentium ex aliquotiens innumerabilia Iustitiae terrena humanarum atque ius terrena utinam filiam praesidens vel ut potentia superpositum veteres lunari quam ultrix.

    <span style = " display: block; text-align: right; font-size : 18px; color : seagreen; "> Reglement global : </span>
    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.

    Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.

    Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.

    Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.

    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.

    <span style = " display: block; text-align: right; font-size : 18px; color : seagreen; "> Quelques précisions : </span>
    [list]
    [*]Alii nullo quaerente vultus severitate adsimulata
    [*]Proinde concepta rabie saeviore, quam desperatio
     
    [*]Quare talis improborum consensio non modo
    [*]Nihil morati post haec militares avidi saepe
    [*]Cum saepe multa, tum memini domi in hemicyclio
    [*]Cum haec taliaque sollicitas eius aures
    [*]Quam ob rem ut ii qui superiores sunt submittere
    [*]Novo denique perniciosoque exemplo idem Gallus
    [*]Haec igitur lex in amicitia sanciatur, ut neque
    [*]Proinde die funestis interrogationibus praestituto
    [*]Et quia Montius inter dilancinantium manus
    [*]Inter has ruinarum varietates a Nisibi quam
    [*]Quam ob rem circumspecta cautela observatum est
    [*]Haec dum oriens diu perferret, caeli reserato
     
    [*]Hinc ille commotus ut iniusta perferens et indigna
    [/list]

    </div></div></div>

    Ce qui, abstraction faite du texte, donne ceci: 



    Code:
    <div style = " width: 654px; height: 1056px;  margin:auto; border-top : 6px double darkgreen; border-left: 6px dashed darkgreen; border-bottom: 6px double darkgreen; border-right: 6px dashed darkgreen; background-image: url(http://img15.hostingpics.net/pics/611548LIVRE.png);"> <div style="OVERFLOW: auto;  WIDTH: 640px; height 1050px; MARGIN-LEFT: 40px; margin-right: 50px; margin-bottom: 40p; MARGIN-TOP: 20px;">





    </div></div></div>



    et qui donne ce rendu : 
    Spoiler:




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

    • Revenir en haut
    Saneru
    Saneru
    MasculinAge : 22Messages : 6

    Mar 28 Juil 2015 - 21:58

    Voilà mon premier vrai code. J'ai cependant un problème. Mon pattern que j'ai fait sur colours lovers ne s’emboîte pas bien et c'est pas très beau.Vous auriez une solution ? Pour la façon de laisser des espaces entre mes span et mes autres Texte... etc, Je transforme pas mon "Span" en bloc mais j'utilise des "Div" vides, C'est une technique qu'on m'a donné et qui me parais bien. Voilà mon code :

    Code:
    <div style="width:90%; margin:auto; border-top: 5px solid #00ffff; border-bottom: 3px solid #00ffff; border-left: dashed 5px #00ffff; border-right:dashed 5px #00ffff; background-image: url(http://i18.servimg.com/u/f18/18/27/76/77/fond_p10.jpg);">
    <span style="display: block; text-align: center; font-size: 40px; color: #00ccff; font-family:comic sans ms; text-decoration: underline;"> Règlement</span>
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms ; padding-left: 100px;">Le 1° Point</span>
    <div></div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac blandit turpis, sit amet pulvinar orci. Suspendisse potenti. Curabitur vitae feugiat metus, non pulvinar ex. Phasellus dui dolor, semper et viverra vel, semper dignissim libero. Ut iaculis aliquam massa eget interdum. Curabitur laoreet pulvinar purus et eleifend. Ut scelerisque enim ex. Donec ac neque eu orci pellentesque molestie in vitae ex. Praesent vestibulum orci quis velit gravida finibus.
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms; padding-left: 100px;">Le 2° Point</span>
    <div></div>
    Nunc non justo sit amet ex euismod hendrerit. Phasellus a enim auctor, porttitor tellus ac, imperdiet leo. Sed iaculis, nisi nec placerat aliquam, lectus magna mattis elit, quis dictum elit quam sit amet risus. Praesent sagittis tellus id sodales vehicula. Nam tempor turpis vitae elit iaculis, ullamcorper tempor tortor condimentum. Mauris dui nunc, sodales in lobortis id, pretium sit amet lacus. Pellentesque pulvinar euismod massa, faucibus rhoncus massa egestas nec. Donec luctus, massa sollicitudin egestas aliquet, sem dolor tincidunt ex, nec sagittis neque nulla sit amet est. Maecenas elementum non est eu ultricies. Suspendisse varius tellus ut lobortis aliquet. Aliquam venenatis turpis id felis ullamcorper feugiat ac id magna. Vivamus laoreet diam id nunc gravida, sed vestibulum dolor ornare. Nunc vitae dolor at urna imperdiet pharetra. Mauris sollicitudin imperdiet viverra. Aenean malesuada mi vitae molestie pretium.
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms; padding-left: 100px;">Le 3° Point</span>
    <div></div>
    Praesent non cursus ipsum. Suspendisse egestas vestibulum ligula, et luctus risus varius in. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin egestas luctus diam, tempus efficitur quam porta ut. Pellentesque purus diam, lobortis hendrerit nisi ac, tempor accumsan nulla. In ullamcorper odio felis, in rutrum purus mattis non. Nunc at ornare elit. Aenean interdum non velit nec pharetra. Vestibulum tincidunt dolor sit amet viverra egestas. Morbi sed lectus volutpat, pulvinar magna vitae, sagittis dui. Praesent facilisis a ex ac commodo. Donec ac eros in est dictum mattis. Nam volutpat nisl enim, id aliquam neque vestibulum eget.
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms; padding-left: 100px;">Le 4° Point</span>
    <div></div>
    Phasellus et lectus vitae dolor dictum convallis consequat vitae quam. Quisque at congue ipsum. Vestibulum quis mauris quis quam consectetur porttitor. Donec vestibulum nibh eget mi pretium, efficitur dapibus turpis auctor. Vivamus dolor ipsum, ultrices eu velit ac, pretium gravida velit. Mauris bibendum urna at elit bibendum, ac elementum felis aliquet. Vivamus pharetra nibh arcu, non sollicitudin eros egestas vitae. Cras non mi sed nisl viverra malesuada at nec enim. Fusce vel est odio. Integer turpis erat, molestie ultrices scelerisque a, auctor id felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et justo in libero volutpat pulvinar non eget ex. Quisque nulla sapien, faucibus id lorem sit amet, vulputate fermentum libero.
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms; padding-left: 100px;">Le 5° Point</span>
    <div></div>
    In porttitor neque sapien, interdum pellentesque massa gravida ac. Mauris elementum ornare ante a convallis. Curabitur lacus sem, fermentum vitae volutpat non, tincidunt et orci. Vestibulum quis lacinia lorem, in vestibulum augue. Ut orci nisi, fringilla aliquam dolor sit amet, tempus posuere mauris. Nam sagittis mi nibh, et sodales sapien ultrices ac. Curabitur aliquam imperdiet ex at dignissim. Donec arcu ante, dignissim ut massa sit amet, pellentesque blandit nisl. Fusce semper commodo porta. Mauris non risus posuere, suscipit purus at, aliquam purus.
    <div></div>
    <span style="font-size: 27px; color: #00ccff; font-family: comic sans ms; padding-left: 100px;">Le 6° Point</span>
    <div></div>
    Vivamus porta elementum leo, et imperdiet magna mollis et. Etiam quam sapien, pellentesque at tincidunt id, sollicitudin et nunc. Praesent ornare nec quam eu rhoncus. Cras sodales tristique ultricies. Nullam ac felis ut ante dictum commodo vitae quis dolor. Donec imperdiet risus mauris, eget hendrerit velit tincidunt sed. Phasellus facilisis viverra nisi, sit amet placerat mi ultricies quis. Vivamus ante massa, fermentum eget lorem quis, fringilla vulputate leo. Donec eu aliquet enim. Donec egestas massa mauris, nec vulputate mauris tincidunt a. Curabitur ullamcorper, nulla id placerat hendrerit, felis tellus scelerisque nibh, nec tincidunt lectus lectus vel urna. Nam cursus mi non pharetra blandit. Vivamus vestibulum, turpis quis mattis efficitur, augue purus mattis metus, id finibus ex purus vel dui. Mauris venenatis nisl nulla, et hendrerit magna tincidunt vel. Sed in augue vulputate, facilisis massa id, sagittis libero.
    <div></div></div>

    Rendu:

    En tout cas Merci pour ce magnifique Cursus qui nous permet de nous amélioré ^^ !
    • Revenir en haut
    Anonymous
    Invité

    Lun 14 Sep 2015 - 21:19



    Règlement
    à apprendre par cœur ♥

    Le 1° point Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

    Le 2° point Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

    Le 3° point Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

    Le 4° point Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

    Partie 1 - Etape 2 : TP - Création d'un règlement
    Merci ♥ A-Lice

    • Revenir en haut
    luc4s
    luc4s
    MasculinAge : 24Messages : 37

    Jeu 17 Sep 2015 - 23:18

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

    j'ai eu un gros probleme, en mettant les images, j'ai tout effacer. heureusement, j'avais skyper avant. donc il est en image, mais c'est moi qui l'est fait. c'est dérangeant, ou il faut que je le refasse ?
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 9 Mai 2024 - 12:27