AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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


    Parchemin déroulant

    Partagez
    Ayameko
    FémininAge : 39Messages : 36

    le Mer 15 Juil 2015 - 16:54

    Bien le bonjour !
    Je viens de finir mon premier codage (sonnez guimbardes !), je passe donc vous le proposer. Il me fut inspiré par la jolie Fiche RP de Jawilsa ainsi que le code (non moins joli^^) de Anéa posté pour le Creativ Mess#7.
    Etant un grand débutant, j'ai codé, j'ai utilisé mon code puis j'ai essayé de le nettoyer pour le poster ici. Si vous voyez des corrections, des allègements et autres modifications à faire, n'hésitez surtout pas à me les signaler, cela ne fera que me former un peu plus^^

    Toutes les images visibles sont de mon cru et sont librement utilisables ou modifiables selon votre bon vouloir.
    Voici donc la bête...






    Lorem ipsum dolor sit amet...


    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

    Ut velit mauris
    Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.

    Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


    Aliquam convallis sollicitudin purus.

    ¤ Praesent aliquam
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos

    ¤ Consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos



    Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


    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?




    Ayameko
    FémininAge : 39Messages : 36

    le Mer 15 Juil 2015 - 17:02

    A peine posté que voilà un premier problème^^ Visiblement les zoneq que j'ai définies pour le survol décalent l'ensemble (ce qui n'est pas le cas sur le fofo sur lequel je l'ai testé).
    Il semble également que l'effet d'ombre sous le titre blanc n'apparaisse pas...
    Une solution ?
    Youp
    FémininAge : 21Messages : 498

    le Sam 18 Juil 2015 - 1:39

    Coucou Ayameko ! Tout d'abord je dois te prévenir que je ne suis pas du tout du tout une experte en codage mais j'acquiers petit à petit de l'expérience et je pense que je peux alléger ton code et te donner quelques conseils. Par contre je peux moi même me tromper. Mes petites remarques/conseils:
    -je ne vois pas pourquoi tu as mis un background size, ça me semble un peu inutile. Tu as un block avec une largeur et hauteur défini et un overflow hidden ( qui fait disparaître tout ce qui sort du bloc) du coup je vois pas trop trop à quoi ça sert.
    - Au lieu d'utiliser blockquote, qui est en fait une erreur en codage car c'est un bloc de citation, ce n'est donc pas censé être utilisé comme ça ( même si j'avoue que c'est super pratique) , préfère les padding ( une marge intérieur de ton bloc, si tu mets un padding de 10 pixels par exemple, entre les bords de ton bloc et ton texte tu auras un espace de 10 pixels ) ( pour les marges extérieurs, on parle de margin au fait )
    - Utiliser center est aussi une erreur en codage, je ne me souviens plus trop pourquoi, je crois qu'elle devient de plus en plus caduque et pose des problèmes de lecture des navigateurs du coup ( si je me souviens bien l'info vient de halloween quelque part sur le forum mais pardon si je déforme la raison) . Il faut lui préférer un margin auto mis dans ta div. ( margin étant, comme je l'ai dit plus haut, pour les marges extérieurs, en le définissant sur auto, elle centre le bidule )
    - évite les tableaux, les tableaux c'est le mal. C'est compliqué et ça limite tes possibilités ( enfin en tout cas les miennes). De plus, je n'ai pas du tout compris pourquoi tu avais mis un tableau ici, ça ne change rien si tu l'enlèves. Pour le positionnement, il serait mieux d'utiliser les floats ( autre petite astuce:  pour les superpositions le z-index, okay je m'égare un peu là). Regarde des tutos sur le net, si tu ne comprends pas, tu peux me demander. ( Mais dans ce cas là, pour ton parchemin, ça ne te sert toujours à rien, c'est pour ta culture personnelle). ( Alzufen de N-U et des tutos du net m'ont moi même aidé à comprendre que l'emploi de ces balises était plus facile par rapport au tableau ) .
    - au lieu de mettre la balise b pour le texte en gras, je l'aurais mis d'emblée dans la feuille de style avec font-weight bold.



    Côté esthétique, j'aurais enlevé pour ma part le titre qui défile :/ Ton code est vraiment très jolie, il a un aspect "parchemin" très sympathique mais je trouvais que le titre défilant casse tout le côté parchemin et rappelle "je suis un code et oh et oh ". Du coup pour ma "version" ( hum hum je ne peux pas dire correction car je ne suis pas à la hauteur, alors je dis version. Sans offense ^^) je l'ai enlevé. Si tu veux je peux le remettre et me pencher sur ton problème.

    Sinon pour éviter que ton parchemin soit décalé et "mangé par le côté droit de la page", j'ai viré toutes les fois où tu disais à ton code que tu voulais que ce soit centrer et en haut. En fait, si quelqu'un veut le positionner à sa guise, il n'a qu'à rajouter une margin au style de "fiche". Une margin auto pour centrer ou une valeur ( par exemple 10 pixels ) pour le décaler légèrement de la gauche. ( margin-left du coup) Attention margin ne fonctionne que si tu as donné une largeur à ton bloc ( regarde comment j'ai procédé pour le crédit ).
    EDIT : héhé je l'avais bien dit, je ne suis pas à la hauteur Razz En fait mon parchemin se fait bouffer aussi sur le côté niark niarrk. J'ai mal considéré le problème, je croyais que ça fonctionnerait ( maintenant que j'y réfléchit ça n'avait pas beaucoup de sens Razz ça ne pouvait pas être le centrement le problème. Au moins mes petites explications ont peut être pu te servir à quelque chose... je l'espère ! Je me pencherais demain sur ce problème, là je suis fatiguée  Sleep


    Sinon j'ai eu la flemme de changer tous les center  et blockquote, sowy sowy. J'ai pas regardé non plus ce que tu avais mis sous balise span, je le ferais demain. Du coup il reste des petites choses à modifier ^^ Tu peux le faire pour t'entraîner si tu veux. Ce qui serait bien aussi c'est que tu regroupes certaines valeurs que tu donnes. par exemple :
    Code:
    <u><font size="4">Lorem ipsum</font></u>
    dans une seule div. Je crois qu'il est mieux de ne pas multiplier les balises, de tout mettre en une . ( là encore ce n'est peut être que suppositions.) En tout cas c'est plus facile à modifier pour les néophytes. (enfin je crois ) Voilà voilà j'espère t'avoir aider sur ce coup. Je te mets mon rendu et le code à la suite.







    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

    Ut velit mauris
    Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.

    Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


    Aliquam convallis sollicitudin purus.

    ¤ Praesent aliquam
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos

    ¤ Consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos



    Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


    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?








    Code:

    <link href='http://fonts.googleapis.com/css?family=Calligraffitti|Courgette' rel='stylesheet' type='text/css'>
    <style>div.fiche{margin-top:2px;text-align:justify; width:800px; height:75px; overflow:hidden;background-image:url(http://img11.hostingpics.net/pics/917278parchopenroll4.png);  -webkit-transition: all 0.3s linear 0s;-moz-transition: all 1.8s linear 0.3s;-o-transition: all 1.8s linear 0.3s;transition: all 1.8s linear 0.3s;}div.fiche:hover{width:800px; height:750px}.barre{overflow:auto; width: 590px; opacity:0.8; font-family:'Calligraffitti'; color: #442419; font-weight:bold ; }.sceau{width:800px; height:77px; background-image:url(http://img4.hostingpics.net/pics/150298sceau51.png);  background-repeat:no-repeat; }
    </style>

    <div class="fiche"><div class="sceau"></div><div class="barre">

    <u><font size="4">Lorem ipsum</font></u>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

    <u>Ut velit mauris</u>
    <blockquote="Nulla sollicitudin">Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. </blockquote>


    Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


    <u>Aliquam convallis sollicitudin purus.</u>
    <span style="display: block; float: down; width: auto; height: 250px; overflow: auto; margin-right: 2px; background-image:url(http://img11.hostingpics.net/pics/613708parchemineventailpattern.jpg); background-size: 600px 800px; border: 3px solid #B4AF91; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px; color: #4C1B1B; padding: 1px; font-size: 13px; letter-spacing: 3px;">
    <center>¤ Praesent aliquam
    <font size="1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.</font>
    <a href="http://www.hostingpics.net/viewer.php?id=875733KazehimeFofo.png"><img src="http://img11.hostingpics.net/thumbs/mini_875733KazehimeFofo.png" alt="Hébergement photos" /></a>

    ¤ Consectetuer adipiscing elit.
    <font size="1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.</font>
    <a href="http://www.hostingpics.net/viewer.php?id=875733KazehimeFofo.png"><img src="http://img11.hostingpics.net/thumbs/mini_875733KazehimeFofo.png" alt="Hébergement photos" /></a>
    </center>
    </span>

    Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


    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?

    <center>[img]http://img15.hostingpics.net/pics/541213LEventailsmallcircle.png[/img]</center>


    </div></div>

    <div style= " width: 200px; margin: auto;"><a style="color: #0c8bd8 !important; font-size: 8px; letter-spacing: 2px;" href="http://www.never-utopia.com/">© Ayameko@Never-Utopia.com</a></div>
    Ayameko
    FémininAge : 39Messages : 36

    le Sam 18 Juil 2015 - 12:11

    Bonjour Youp !
    Merci d'avoir pris le temps et la peine de corriger (si, si^^) cette machinette à gaz^^
    Je est possible que le tableau soit un reliquat de l'ancien code (qui a beaucoup évolué depuis que j'ai commencé), le blockquote était sensé reprendre une vraie citation mais dans ce modèle de présentation ce n'est pas forcément adéquat, je vais donc nettoyer avec grand coup de balais dans tout ça, comme dirait l'autre...
    Tes remarques sont très pertinentes concernant le regroupement des balises et l'utilisation du center et je t'en remercie, c'est typiquement le genre de bonnes habitudes qu'il faut prendre tôt si on veut développer en toute sérénité.

    Pour le décalage, ça vient peut-être du fait qu'il n'y a pas de position(absolue/relative) définie pour les div, mais comme je ne maîtrise pas le sujet, il faut que je fasse des essais.
    Pour une raison très mystérieuse (c'est plus rassurant que de dire que c'est à cause de mon incompétence :p), le z-index ne fonctionnait pas dans mon code sur le fofo que j'utilise, j'avais donc du trouver une autre façon de rendre l'effet d'ouverture. Il se trouve que depuis que j'ai posté, et alors que je cherchais à comprendre un code d'éventail animé de Okhmhaka-L'Inspirant, j'ai pu constater que ça fonctionnait normalement -_-°
    Je vais donc voir ce WE pour nettoyer ce code avec tes conseils et préparer un autre code façon "éventail animé" avec z-index et tout et tout.

    Merci infiniment en tout cas du temps que tu as bien voulu prendre pour m'aider ! :)
    Youp
    FémininAge : 21Messages : 498

    le Sam 18 Juil 2015 - 20:05

    Recoucou ! J'ai fait quelques modifications:
    - j'ai transformé le span en div ( mieux vaut ne pas changer de type de balise ).
    - ajouter un relative pour voir si le problème venait de là ( mais j'en doute). je post tout de même pour faire le test. J'éditerais après en essayant autre chose. Edit: ça ne fonctionne toujours pas Razz Sur ce coup je ne peux pas t'aider, mes diverses tentatives se sont soldées sur un échec. Sinon il faudrait peut être redimensionner (via codage) toutes les images pour qu'elles soient plus petites. Comme ça en plus, les gens qui voudront utiliser ton ls pourront l'adapter à la largeur de leur forum. N-U étant un forum beaucoup plus large ( à mon sens) que la plupart de ses camarades. Je ne me souviens plus comment on fait, je vais m'y pencher.
    - j'ai enlevé dans la div qui était un span : display: block; float: down; width: auto. Car je ne vois pas pourquoi tu le transformes en block, pourquoi tu mets un float et une largeur ( elle prendra la largeur de "fiche" automatiquement, pas besoin de préciser"). Et aussi le background size.

    Sinon il aurait fallu que tu regardes l'annonce pour proposer un ls de message : http://www.never-utopia.com/t47475-proposer . Car tu n'as pas vraiment respecté la mise en forme et la marche à suivre, de plus il t'expliquait qu'il ne fallait pas utiliser des balises dépréciés comme center. Mais bon ce n'est pas garve, tu sauras la prochaine fois ^^






    Lorem ipsum
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

    Ut velit mauris
    Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.

    Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


    Aliquam convallis sollicitudin purus.

    ¤ Praesent aliquam
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos

    ¤ Consectetuer adipiscing elit.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.
    Hébergement photos



    Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


    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?








    Code:
    <link href='http://fonts.googleapis.com/css?family=Calligraffitti|Courgette' rel='stylesheet' type='text/css'>
    <style>div.fiche{margin-top:2px;text-align:justify; width:800px; height:75px; position: absolute; left: 0px ;overflow:hidden;background-image:url(http://img11.hostingpics.net/pics/917278parchopenroll4.png);  -webkit-transition: all 0.3s linear 0s;-moz-transition: all 1.8s linear 0.3s;-o-transition: all 1.8s linear 0.3s;transition: all 1.8s linear 0.3s;}div.fiche:hover{width:800px; height:750px;  -webkit-transition: all 0.3s linear 0s;-moz-transition: all 1.8s linear 0.3s;-o-transition: all 1.8s linear 0.3s;transition: all 1.8s linear 0.3s;}.barre{overflow:auto; width: 590px; opacity:0.8; font-family:'Calligraffitti'; color: #442419; font-weight:bold ; }.sceau{width:800px; height:77px; background-image:url(http://img4.hostingpics.net/pics/150298sceau51.png); margin: auto; }
    </style>

    <div class="fiche"><div class="sceau"></div><div class="barre">

    <u><font size="4">Lorem ipsum</font></u>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

    <u>Ut velit mauris</u>
    <blockquote="Nulla sollicitudin">Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. </blockquote>


    Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.


    <u>Aliquam convallis sollicitudin purus.</u>
    <div style=" height: 250px; overflow: auto; margin-right: 2px; background-image:url(http://img11.hostingpics.net/pics/613708parchemineventailpattern.jpg);  border: 3px solid #B4AF91; border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -htm-border-radius: 10px; -webkit-border-radius: 10px; color: #4C1B1B; padding: 1px; font-size: 13px; letter-spacing: 3px;">
    <center>¤ Praesent aliquam
    <font size="1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.</font>
    <a href="http://www.hostingpics.net/viewer.php?id=875733KazehimeFofo.png"><img src="http://img11.hostingpics.net/thumbs/mini_875733KazehimeFofo.png" alt="Hébergement photos" /></a>

    ¤ Consectetuer adipiscing elit.
    <font size="1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat.</font>
    <a href="http://www.hostingpics.net/viewer.php?id=875733KazehimeFofo.png"><img src="http://img11.hostingpics.net/thumbs/mini_875733KazehimeFofo.png" alt="Hébergement photos" /></a>
    </center>
    </div>

    Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet.


    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?

    <center>[img]http://img15.hostingpics.net/pics/541213LEventailsmallcircle.png[/img]</center>


    </div></div>

    <div style= " width: 200px; margin: auto;"><a style="color: #0c8bd8 !important; font-size: 8px; letter-spacing: 2px;" href="http://www.never-utopia.com/">© Ayameko@Never-Utopia.com</a></div>
    Ayameko
    FémininAge : 39Messages : 36

    le Mar 21 Juil 2015 - 16:49

    Salutations,
    Tout d'abord encore merci Youp pour tes corrections.
    Malheureusement, il semblerait qu'il y ait beaucoup de ces rectifications qui ne fonctionnent pas sur mon forum alors que visiblement elles passent très bien ici : en copiant ton dernier code, je me retrouve avec quelque chose d'illisible, tout est décalé :/

    Je pensais pouvoir partager avec NU mes petits codes sur lesquels j'avais déjà passé pas mal de temps, moyennant un petit nettoyage pour correspondre à la présentation NU, mais là il y a de gros problèmes entre un fofo et un autre et ça dépasse totalement mes compétences.
    Ne voulant pas imposer aux autres ce que je ne peux faire moi-même, je crois qu'il serait préférable de clore ce post, voire de l'effacer. Toutes mes excuses Youp pour le temps que tu y as consacré.
    Si vous avez le coeur et le savoir-faire, n'hésitez pas à récupérer ce code pour l'utiliser et/ou  le modifier.
    Dorénavant, je tenterai de tester mes codes en "Prévisualiser" et si ça ne fonctionne pas comme sur mon forum, je passerai mon chemin...
    :triste:
    Ehawee
    FémininAge : 24Messages : 4511

    le Dim 30 Aoû 2015 - 22:00

    Hello Ayameko =)

    En premier lieu, merci pour ton LS ^^ c'est super sympa de ta part de le partager avec nous ^^ Excuse-moi également de te répondre si tard, on est en sous-effectif dans le staff en ce moment ^^"

    Je peux t'aider à le corriger si tu veux (sauf si tu préfères vraiment archiver), peux-tu juste me montrer quel rendu tu souhaites avoir par le biais d'un screen ou d'un lien vers un forum test?) =)

    Je crois également que le souci peut venir des balises que tu utilises ^^

    Code:
    <blockquote></blockquote>
    Il s'agit d'une balise de citation, donc ça correspond à la balise "quote" en BBcode. ça veut dire qu'une mise en forme css différente s'applique dessus selon le forum où tu postes. Essayes déjà de remplacer les blockquote par des "div", tu devrais voir une différence sur N-U =)

    Ensuite, si tu utilises des balises anciennes, comme
    Code:
    <center></center> ; <font></font>, <u></u>, <i></i>, <b></b>
    Il peut y avoir des erreurs de lecture, mieux vaut préferer des trucs comme :
    Code:
    <div style="text-align: center; ">en remplacement de la balise "center"</div>
    <span style="TON CSS MODIFIANT LE TEXTE">en remplacement de la balise "font"</span>

    Essaye de te cantonner aux "div", "span", "a" (pour les liens), et "img" (pour les images) ^^

    Pour les images, plutôt que d'utiliser du BBcode
    Code:
    [img][/img]

    Tu peux mettre directement la même chose en HTML
    Code:
    <img src="le lien de ton image" alt="un éventuel texte alternatif si l'image ne s'affiche pas" title="si tu veux qu'un texte s'affiche au survol" style="si tu veux mettre une bordure ou changer la taille de l'image" />

    je pense qu'en retouchant déjà tout cela, tu parviendras à obtenir quelque chose de plus clean, et ensuite, on regardera ensemble s'il reste des problèmes, si tu veux =)





    gif1gif2
    Kelalin
    FémininAge : 24Messages : 1403

    le Dim 30 Aoû 2015 - 23:37

    Merci ! \(T∇T)/
    Nat
    FémininAge : 22Messages : 42

    le Sam 13 Fév 2016 - 17:32

    Une superbe idée et merci du partage du LS ! ^^
    Arisu
    FémininAge : 28Messages : 108

    le Dim 21 Fév 2016 - 21:13

    Merci !
    Coco-Lapin02
    MasculinAge : 48Messages : 147

    le Ven 18 Mar 2016 - 15:42

    Merci!
    Nal Souclade
    MasculinAge : 17Messages : 162

    le Ven 18 Mar 2016 - 19:23

    Waaah trop bien. ** Merci beaucoup !
    Vetrox
    MasculinAge : 16Messages : 36

    le Dim 27 Mar 2016 - 9:30

    merci
    gwenM
    FémininAge : 20Messages : 172

    le Mer 30 Mar 2016 - 20:48

    merci
    Paradise
    FémininAge : 23Messages : 21

    le Dim 17 Avr 2016 - 16:38

    Merciii!
    Fleazy
    FémininAge : 16Messages : 17

    le Dim 17 Avr 2016 - 18:00

    Wow ! C'est magnifique ! Merci du partage ! ^^
    The baily gossip
    FémininAge : 30Messages : 36

    le Lun 2 Mai 2016 - 13:30

    C'est tres beau et époustouflant pour un premier code merci beaucoup
    M.O
    MasculinAge : 26Messages : 45

    le Mar 24 Mai 2016 - 4:20

    Merci!
    SectumSempra
    FémininAge : 19Messages : 34

    le Mer 25 Mai 2016 - 23:24

    Waw ! Trop bien :) Merci, je me demandais si c'était possible de transformer le cachet de cire en quelque chose d'autre par hasard ?
    Nihil Scar Winspeare
    Messages : 3934

    le Mer 25 Mai 2016 - 23:34

    Coucou SectumSempra o/

    Normalement on ne lit pas trop les réponses dans les libres services, pour poser une question il faut aller soit dans "Personnalisation" soit dans "Problème avec mon code".

    Pour t'éviter un topic supplémentaire, je réponds rapidement : Oui, on peut changer, si tu regardes dans le CSS, le sceau correspond à cette image là : http://img4.hostingpics.net/pics/150298sceau51.png

    Dans ton cas, c'est une question sur la Personnalisation du LS, du coup pour toute info, rendez vous dans la section Wink

    Bonne soirée :3




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Sparryx
    MasculinAge : 14Messages : 68

    le Ven 17 Juin 2016 - 7:03

    Yo tout le monde c'est Squeezie (lol)
    Evalla
    FémininAge : 23Messages : 40

    le Dim 19 Juin 2016 - 18:18

    merci
    Linaewen
    FémininAge : 24Messages : 190

    le Jeu 23 Juin 2016 - 6:24

    merci Very Happy C'est super **
    Mustique
    FémininAge : 21Messages : 10

    le Sam 25 Juin 2016 - 14:57

    Merci ! Je trouve l'idée fantastique !
    reshiram44
    MasculinAge : 18Messages : 304

    le Sam 25 Juin 2016 - 20:08

    merci



    Contenu sponsorisé

    Aujourd'hui à 13:30


      La date/heure actuelle est Lun 5 Déc 2016 - 13:30