Parchemin déroulant

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. ¤ 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. 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?

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 ?

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 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 ç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  


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.

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>

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 ! :)

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 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 : https://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 ^^

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>

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

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 =)

Merci ! ＼（Ｔ∇Ｔ）／

Une superbe idée et merci du partage du LS ! ^^

Merci !

Merci!

Waaah trop bien. ** Merci beaucoup !

merci

merci

Merciii!

Wow ! C'est magnifique ! Merci du partage ! ^^

C'est tres beau et époustouflant pour un premier code merci beaucoup

Merci!

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

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à : https://2img.net/r/hpimg4/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

Bonne soirée :3

Yo tout le monde c'est Squeezie (lol)

merci

merci C'est super **

Merci ! Je trouve l'idée fantastique !

merci