*RESOLU* [PHPBB2] Liste d'Onglet dans un Sujet / Page HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas

Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonjour tout le monde 
J'ai commencer à créer deux petit sujets pour faire une écurie virtuel sur ce Forum pour m'y retrouver et je souhaiterais a la fin n'avoir plus qu'un seul et unique message (il y as actuellement 2 messages sur le sujet, mais je vais en faire en tout 6). Je souhaiterais ci-possible avoir en haut du premier message une liste horizontale qui ferrais défiler mes différent messages. Bien sur, je sais qu'il n'est pas possible de faire défiler le contenus d'un message donc je mettrait le contenus de tout les message dans une page HTML. Ce que je souhaiterais devrait normalement ressembler à cela sur le premier message : 



Quand le membre cliquerons sur le Bouton "1" il restera sur la même page, quand il cliquera sur le bouton "2" le contenus se transformera en contenus "2" (donc le deuxième message) je ne sais pas si je me suis bien fait comprendre : ) 
je vous souhaite à tous une très agréable journée et je vous remercie d'avance pour votre aide <3


Dernière édition par Sick.l.Offrande le Jeu 6 Juil 2017 - 16:15, édité 3 fois
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Bonjour Sick,
il y a un tutoriel de fa qui va répondre à ta demande :
http://forum.forumactif.com/t355762-pagination-dans-un-message

La seule différence est que la pagination se fait en bas et non en haut. Il y a également la possibilité d'afficher l'ensemble du contenu.

Par la suite, si tu souhaites rendre cette fonctionnalité accessible à tes membres, tu peux toujours créer un bouton qui s'adjoindra à l'éditeur (bien pratique pour différer les temps de chargement des images).



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
fascicularia a écrit:Bonjour Sick,
il y a un tutoriel de fa qui va répondre à ta demande :
http://forum.forumactif.com/t355762-pagination-dans-un-message

La seule différence est que la pagination se fait en bas et non en haut. Il y a également la possibilité d'afficher l'ensemble du contenu.

Par la suite, si tu souhaites rendre cette fonctionnalité accessible à tes membres, tu peux toujours créer un bouton qui s'adjoindra à l'éditeur (bien pratique pour différer les temps de chargement des images).

Bonsoir et merci beaucoup pour ce génial petit tutoriel j'ai donc tout installer 
mais quand j'édite mon premier message pour mettre 

Code:
<!--PAGINATION DE LA BOUTIQUE-->[page][page][page][page][page]



<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Jaune</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Pêche</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Verte</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table></div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->

Cela me donne cette aperçus : 



Merci beaucoup de ton aide et de t'as réponse <3
Voila ce que cela donne Actuellement
Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Edition
J'ai réussie a rassembler les pages dans le même message mais j'ai un soucis : 
- La Page 1 ne s'affiche pas donc sa me donne se rendus  sur le premier message : 
- Quand l'on clique sur voir tout, le bouton ne ré-apparaît pas : / 
- J'aimerais changer les numéros pour mettre des nom est ce possible ?
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
sans le html inséré dans le message , difficile de te répondre.
De visu, je dirai que tu as inséré une balise page en début de ton code. Il ne faut les placer que là où doit s'opérer la scission.

Mettre des noms à la place des chiffres !!! ;aucune idée . Ceci dit, je ne vois pas trop l'intérêt d'utiliser un script qui pagine pour le transformer en simple système à onglets; surtout que tu risques de t'en servir pour d'autres messages.



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
fascicularia a écrit:sans le html inséré dans le message , difficile de te répondre.
De visu, je dirai que tu as inséré une balise page en début de ton code. Il ne faut les placer que là où doit s'opérer la scission.

Mettre des noms à la place des chiffres !!! ;aucune idée . Ceci dit, je ne vois pas trop l'intérêt d'utiliser un script qui pagine pour le transformer en simple système à onglets; surtout que tu risques de t'en servir pour d'autres messages.

Oui effectivement j'avais mis une balise de trop ce qui me donne donc le code du message suivant mais serais-ce possible de placer les onglet en haut du message et non pas en dessous si le reste n'est pas possible ^^ 

Code:
<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Jaune</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Pêche</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Éponge Verte</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table></div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->

[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/boucho22.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Bouchon Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/boucho23.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Bouchon Gris</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/boucho24.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Bouchon Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/boucho25.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Bouchon Vert</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse25.png[/img] <div style="margin-top:-15px; margin-left: 70px;">Brosse Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table>
<!--7-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse26.png[/img] <div style="margin-top:-15px; margin-left: 70px;">Brosse Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table>
<!--8-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse27.png[/img] <div style="margin-top:-15px; margin-left: 70px;">Brosse Grise</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table>
<!--9-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse28.png[/img] <div style="margin-top:-15px; margin-left: 70px;">Brosse Verte</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table></div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->

[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse29.png[/img] <div style="margin-top:-10px; margin-left: 70px;">Brosse Crin Bleue</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 60 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse30.png[/img] <div style="margin-top:-10px; margin-left: 70px;">Brosse Crin Noir</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 60 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse31.png[/img] <div style="margin-top:-10px; margin-left: 70px;">Brosse à Crin Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 60 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/brosse34.png[/img] <div style="margin-top:-10px; margin-left: 70px;">Brosse à Crin Vert</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 60 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/peigne10.png[/img] <div style="margin-top:-5px; margin-left: 70px;">Peigne Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 2 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 70 Zécus </td></tr></table>
<!--7-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/peigne11.png[/img] <div style="margin-top:-5px; margin-left: 70px;">Peigne Noir</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 2 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 70 Zécus </td></tr></table>
<!--8-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/peigne12.png[/img] <div style="margin-top:-5px; margin-left: 70px;">Peigne Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 2 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 70 Zécus </td></tr></table>
</div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->

[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/etrill10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Étrille Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/etrill11.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Étrille Grise</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/etrill12.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Étrille Violette</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/etrill13.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Étrille Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/etrill14.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Étrille Verte</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table></div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->

[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/cure_p18.png[/img] <div style="margin-top:-0px; margin-left: 70px;">Cure-Pieds Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/cure_p19.png[/img] <div style="margin-top:-0px; margin-left: 70px;">Cure-Pieds Gris</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/cure_p20.png[/img] <div style="margin-top:-0px; margin-left: 70px;">Cure-Pieds Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/cure_p21.png[/img] <div style="margin-top:-0px; margin-left: 70px;">Cure-Pieds Vert</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 40 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/elasti10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Élastique Marron</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 2 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi11.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Élastique Noir</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 2 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 50 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/pierre10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Pierre-Ponce</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 3 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 80 Zécus </td></tr></table>


</div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->


[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi12.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Longe Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 120 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi13.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Longe Verte</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 120 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi14.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Longe Jaune</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 120 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi15.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Longe Rose</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 120 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi16.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Longe Noir</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 120 Zécus </td></tr></table>




</div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->


[page]<!--FICHE BOUTIQUE I-->
<center><div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;"><div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');"></br></br></br><!--NOM-->
<div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;"> <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"></br>La Boutique du Sellier</span> </div>
<div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;"><!--DEBUT CONTENUS--></br>
<!--IMAGE SELLERIE--><div style="margin-top:-30px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img]</div><!--1--><span style="font-size: 10px!important; color: #000!important"><div style="margin-top: 60px;"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/licol_10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Licol Vert</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 140 Zécus </td></tr></table><!--2-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/licol_11.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Licol Violet</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 140 Zécus </td></tr></table><!--4-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/licol_12.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Licol Gris</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 140 Zécus </td></tr></table><!--5-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/licol210.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Licol Bleu</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 140 Zécus </td></tr></table><!--6-->
<span style="font-size: 10px!important; color: #000!important"><table cellspacing="2" cellspadding="5"> <tr><td style="background-color: rgba(0,0,0,0.2); width: 170px;">  <div style="margin-top:-40px;">[img]https://i11.servimg.com/u/f11/19/54/37/96/licols10.png[/img] <div style="margin-top:-20px; margin-left: 70px;">Licol Rouge</div> </td><td style="background-color: rgba(0,0,0,0.2); width: 70px;"> [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> + 1 Concours </td><td style="background-color: rgba(0,0,0,0.2); width: 80px;"> 140 Zécus </td></tr></table></div>

</div>
<!--FIN CONTENU-->
<!--LIERE HAUT-->
<div style="margin-top: -720px; margin-left: 330px;">[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
<!-LIERE BAS-->
<div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
[img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img]</div>
</div></div></center>
<!--FIN FICHE BOUTIQUE I-->
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,
avec ce système tu ne pourras déposer plus de deux fiches car le nombre de caractères est limité.
On peut avec une page html faire ce que tu souhaites mais il y a des conditions a respecter.
Il faut que les 6 fiches aient la même hauteur et aussi la même apparence.
Je vais te faire une page html ou tu pourras changer ce que tu souhaites par fiche textes etc mais garder le fond.


J'aimerais changer les numéros pour mettre des nom est ce possible ?

Attention, car qui dit titre (6 en tout )
allonge considérablement le haut de la fiche donc que nini Sandra, on pourra mettre une infobulle si tu le souhaites clin oeil

Je reviens vers toi ensuite.



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Alors voilà un aperçu de la page html créée:

http://testdesforums.1fr1.net/h125-sandra

Le code html du bloc contenant les onglets et les 6 fiches:

Code:

<div class="M14_contPagination">
   <div class="M14_Pagination">
      
 <div class="M14_page_1"title="Afficher la fiche 1">1</div>
 <div class="M14_page_2"title="Afficher la fiche 2">2</div>
 <div class="M14_page_3"title="Afficher la fiche 3">3</div>
 <div class="M14_page_4"title="Afficher la fiche 4">4</div>
 <div class="M14_page_5"title="Afficher la fiche 5">5</div>
 <div class="M14_page_6"title="Afficher la fiche 6">6</div>
</div>
   <div id="M14_page_1"></div>
  <div id="M14_page_2"style="display:none;"></div>
  <div id="M14_page_3"style="display:none;"></div>
  <div id="M14_page_4"style="display:none;"></div>
  <div id="M14_page_5"style="display:none;"></div>
  <div id="M14_page_6"style="display:none;"></div>
        </div>


Les onglets:
Code:
<div class="M14_page_1"title="Afficher la fiche 1">1</div>
 <div class="M14_page_2"title="Afficher la fiche 2">2</div>
 <div class="M14_page_3"title="Afficher la fiche 3">3</div>
 <div class="M14_page_4"title="Afficher la fiche 4">4</div>
 <div class="M14_page_5"title="Afficher la fiche 5">5</div>
 <div class="M14_page_6"title="Afficher la fiche 6">6</div>


Ce qui nous intéresse le plus sont les fiches pour l'instant vides:
La premiere reste visible tandis que les autres sont masquées.
Code:

<div id="M14_page_1"></div>
  <div id="M14_page_2"style="display:none;"></div>
  <div id="M14_page_3"style="display:none;"></div>
  <div id="M14_page_4"style="display:none;"></div>
  <div id="M14_page_5"style="display:none;"></div>
  <div id="M14_page_6"style="display:none;"></div>
        </div>


Ton code html fournit plus haut:
https://www.milouze14.com/t30753-phpbb2-liste-d-onglet-dans-un-sujet-page-html#585427

a été remodelé afin de gagner en caractères : par celui-ci:
Code:
<center><br /><div class="M14_lierre_haut">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
  
  <div class="M14_livre"><br />
<br /><br />
<div class="M14_titre"> <br /><span>La Boutique du Sellier</span></div>
<div class="M14_background"><br />
<div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/19/54/37/96/test14.png"/></div>
<div class="M14_cont">
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
</div>
<div class="M14_lierre_bas">
<img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
</div></div></center>

Ce code html sera placé dans la première div fiche:
Code:
<div id="M14_page_1"></div>


Ce qui donne:
Code:


<div id="M14_page_1"><center><br /><div class="M14_lierre_haut">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
  
  <div class="M14_livre"><br />
<br /><br />
<div class="M14_titre"> <br /><span>La Boutique du Sellier</span></div>
<div class="M14_background"><br />
<div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/19/54/37/96/test14.png"/></div>
<div class="M14_cont">
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
</div>
<div class="M14_lierre_bas">
<img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
</div></div></center></div>


Toutes la c.s.s est dans la page html

Il faudra donc recopier le même code html en changeant juste les titres la photo et les images Sandra,
pour exemple dans la fiche 2 j'ai ajouté ce code html:
Code:
<center><br /><div class="M14_lierre_haut">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
 
  <div class="M14_livre"><br />
<br /><br />
<div class="M14_titre"> <br /><span>La Boutique du cordonnier</span></div>
<div class="M14_background"><br />
<div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/11/26/21/37/cordon10.jpg"/></div>
<div class="M14_cont">
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 800 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 100 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
</div>
<div class="M14_lierre_bas">
<img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
</div></div></center>



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonsoir Milouze, 
Merci beaucoup pour t'as réponse mais serais-ce possible de laisser le code CSS dans la fiche car mes feuilles de CSS commence a être blinder : / et cela vas me prendre beaucoup, beaucoup de temps.. donc serais ce possible juste de modifier l'emplacement des bouton "1,2..." ? Merci beaucoup pour ce petit tutoriel dans tout les cas <3
Je te souhaite une très agréable soirée 
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,

mais serais-ce possible de laisser le code CSS dans la fiche car mes feuilles de CSS commence a être blinder

la css restera dans la page html donc pas dans la feuille de style clin oeil .


donc serais ce possible juste de modifier l'emplacement des bouton "1,2..." ?

Je me suis basé sur ta demande Sandra:
https://www.milouze14.com/t30753-phpbb2-liste-d-onglet-dans-un-sujet-page-html#585265

Une page html ne se modifie pas comme çà et encore plus si il y a de l'animation click etc etc.
Faudrait être claire dès le départ Sandra.
Ou veux tu mettre cette barre ?



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Je continue sur un autre message pour éviter la saturation de l'éditeur concernant les caractères limités.
Bref, pour avoir le résultat escompté sur un message et étant donné que la page créée sera a placer dans une iframe.
On va commencer par le début Sandra:
Modules/HTML & JAVASCRIPT/Gestion des pages HTML/Création en mode avancé (HTML)

Titre * : Mettre un titre
Voulez-vous utiliser le haut et le bas de page de votre forum ? Cocher Non
Utiliser cette page en tant que page d'accueil ? Cocher Non

Déposes ceci:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <head>


    <title>Fiches</title> 
<script type="text/javascript">

$(function(){

$('.M14_page_1').click(function(){
$('#M14_page_1').fadeIn();
$('#M14_page_2,#M14_page_3,#M14_page_4,#M14_page_5,#M14_page_6').fadeOut();
  });
 
$('.M14_page_2').click(function(){
$('#M14_page_2').fadeIn();
$('#M14_page_1,#M14_page_3,#M14_page_4,#M14_page_5,#M14_page_6').fadeOut();
  });
 
$('.M14_page_3').click(function(){
$('#M14_page_3').fadeIn();
$('#M14_page_1,#M14_page_2,#M14_page_4,#M14_page_5,#M14_page_6').fadeOut();
  });
 
$('.M14_page_4').click(function(){
$('#M14_page_4').fadeIn();
$('#M14_page_1,#M14_page_2,#M14_page_3,#M14_page_5,#M14_page_6').fadeOut();
  });
 
$('.M14_page_5').click(function(){
$('#M14_page_5').fadeIn();
$('#M14_page_1,#M14_page_2,#M14_page_3,#M14_page_4,#M14_page_6').fadeOut();
  });
 
$('.M14_page_6').click(function(){
$('#M14_page_6').fadeIn();
$('#M14_page_1,#M14_page_2,#M14_page_3,#M14_page_4,#M14_page_5').fadeOut();
  });
 
 
  });
 
 
 
 
 

  </script>
   

    <style type="text/css">
      *::-webkit-scrollbar { display: none; }

/* LE CONTENEUR*/     
div.M14_contPagination
{
width:600px;
height:780px;
background-image: url(https://i39.servimg.com/u/f39/18/94/29/67/milieu15.gif);
background-repeat:repeat;


}
/*LE CONTENEUR DES ONGLETS*/
.M14_Pagination
{
line-height:30px;
height:30px;
text-align:center;
position: relative;
top: 40px;
z-index: 999;

}
/*LES ONGLETS*/
.M14_Pagination div
{
background:white;
color: black;
font-size:12px;
cursor:pointer;
width:auto;
text-align:center;
display: inline;
padding:5px;
margin-left: 5px;
}
/*LES CONTENEURS DE PAGES*/
#M14_page_1,#M14_page_2,#M14_page_3,#M14_page_4,#M14_page_5,#M14_page_6
{
background: url(http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg);
padding: 20px;
box-shadow: 10px 10px 10px #000;
border: 1px solid #000;
width:580px;
height: auto;
position: absolute;
padding: 3px; 

}
/*on place l image du livre sur toutes les fiches*/     
.M14_livre
{
height: 674px; width: 500px; background: url(https://i11.servimg.com/u/f11/19/54/37/96/livre12.png);     
}
/*on place l image du titre sur toutes les fiches*/
.M14_titre   
{
height: 50px;
width: 420px;
background: url(https://i11.servimg.com/u/f11/19/54/37/96/210.png);
margin-left: 44px;
margin-top: -70px;   
position:absolute;
}
/*Le titre de chaque fiche*/
.M14_titre  span
{
font-family: Pacifico!important;
font-size: 22px;
color: #BDA338!important;
text-shadow: 2px 2px 2px #000;
top: -10px;
position: relative;
}
/*Le background*/
.M14_background
{
background-color: rgba(0,0,0,0.2);
overflow: auto;
width: 400px;
height: 550px;
padding: 10px;
}
/* La photo de la fiche*/
.M14_Photo
{
margin-top:-30px;
width:354px;
height:215px;
}

/*le conteneur de tableau*/
.M14_cont{margin-top:80px;}
/* on donne une couleur de fond, de police et taille a toutes les cellules*/     
table td
{
background-color: rgba(0,0,0,0.2);
font-size: 10px!important;
color: #000!important;
}
/*on donne une dimension maximale aux images de la cellule de gauche*/
td.M14_img img{width:24px;height:24px;}
/*on place le texte de la premiere cellule a gauche*/
td.M14_img span
{
position: relative;
margin-left: 50px;
top: -5px;
}
/*lierre haut*/
.M14_lierre_haut{margin-top: -60px;margin-left: 400px;position:absolute;}
/*lierre bas*/
.M14_lierre_bas
{
margin-top: -140px;
margin-left: -60px;
position:absolute;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
    </style>

       

  </head>

      <body>
       
 <div class="M14_contPagination">
  <div class="M14_Pagination">
     
 <div class="M14_page_1"title="Afficher la fiche 1">1</div>
 <div class="M14_page_2"title="Afficher la fiche 2">2</div>
 <div class="M14_page_3"title="Afficher la fiche 3">3</div>
 <div class="M14_page_4"title="Afficher la fiche 4">4</div>
 <div class="M14_page_5"title="Afficher la fiche 5">5</div>
 <div class="M14_page_6"title="Afficher la fiche 6">6</div>
</div>
  <div id="M14_page_1"><center><br /><div class="M14_lierre_haut">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
 
  <div class="M14_livre"><br />
<br /><br />
<div class="M14_titre"> <br /><span>La Boutique du Sellier</span></div>
<div class="M14_background"><br />
<div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/19/54/37/96/test14.png"/></div>
<div class="M14_cont">
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
</div>
<div class="M14_lierre_bas">
<img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
</div></div></center></div>
  <div id="M14_page_2"style="display:none;"></div>
  <div id="M14_page_3"style="display:none;"></div>
  <div id="M14_page_4"style="display:none;"></div>
  <div id="M14_page_5"style="display:none;"></div>
  <div id="M14_page_6"style="display:none;"></div>
        </div>
      </body>

</html>

Penses à valider les modifications en cliquant sur le bouton Valider

Repères ensuite le lien de la page html et insères le dans cette iframe:
Code:
<iframe src="LIEN DE LA PAGE HTML" height="900" width="640"frameborder="0"></iframe>

La suite sur le prochain message clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Cette partie concerne la pagination (boutons en haut légèrement descendus):
Il ne faut pas y toucher Sandra, sauf les infobulles et éventuellement modifier les chiffres par des images de 16px par 16px maxi

Code:
 
<div class="M14_Pagination">
 <div class="M14_page_1"title="Afficher la fiche 1">1</div>
 <div class="M14_page_2"title="Afficher la fiche 2">2</div>
 <div class="M14_page_3"title="Afficher la fiche 3">3</div>
 <div class="M14_page_4"title="Afficher la fiche 4">4</div>
 <div class="M14_page_5"title="Afficher la fiche 5">5</div>
 <div class="M14_page_6"title="Afficher la fiche 6">6</div>
</div>

Exemple pour le bouton 1 si tu veux le remplacer par une image:
Code:
 <div class="M14_page_1"title="Afficher la fiche 1">1</div>

Il faudra le changer ainsi:
Code:
 <div class="M14_page_1"title="Afficher la fiche 1">
<img src="LIEN DE L IMAGE"/></div>


Pour les fiches, la première est déjà fonctionnelle ,
les cinq autres devront avoir l’identique en changeant simplement le contenu dans les cellules
Les cinq autres fiches sont représentés ici:
Code:
 
<div id="M14_page_2"style="display:none;"></div>
<div id="M14_page_3"style="display:none;"></div>
<div id="M14_page_4"style="display:none;"></div>
<div id="M14_page_5"style="display:none;"></div>
<div id="M14_page_6"style="display:none;"></div>

Je t'ai donc préparé comme tu peux le voir sur la page html que j'ai créé:

http://testdesforums.1fr1.net/h125-sandra

en cliquant sur le bouton 2 , "La Boutique du cordonnier", dont voici le code html que tu devra insérer dans cette div
Code:
<div id="M14_page_2"style="display:none;"></div>

Code:
<center><br /><div class="M14_lierre_haut">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
 
  <div class="M14_livre"><br />
<br /><br />
<div class="M14_titre"> <br /><span>La Boutique du cordonnier</span></div>
<div class="M14_background"><br />
<div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/11/26/21/37/cordon10.jpg"/></div>
<div class="M14_cont">
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 800 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 100 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
<table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
</div>
<div class="M14_lierre_bas">
<img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
</div></div></center>





-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Bonjour Milouze, 
Je te remercie beaucoup pour ces belles explications mais j'ai un soucis avec les images : / Lien de ma Page Je te remercie encore mille fois et je te souhaite une bonne journée <3

Une partie de la page Html car elle est trop grande : 
Code:
   <div id="M14_page_6" style="display:none;">
       
      <!--  FICHE BOUTIQUE I  --> 
      <center>
          
         <div style="background-image: url('http://i19.servimg.com/u/f19/18/94/29/67/dfdf11.jpg');
height: auto; width: 520px; padding: 20px; box-shadow: 10px 10px 10px #000; border: 1px solid #000;">
             
            <div style="height: 674px; width: 500px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/livre12.png');">
                 <br /><br /><br /> 
               <!--  NOM  --> 
               <div style="height: 50px; width: 420px; background-image: url('https://i11.servimg.com/u/f11/19/54/37/96/210.png'); margin-left: 20px; margin-top: -70px; overflow: auto;">
                    <span style="font-family: Pacifico!important; font-size: 22px; color: #BDA338!important; text-shadow: 2px 2px 2px #000;"><br />La Boutique du Sellier</span> 
               </div>
                
               <div style="background-color: rgba(0,0,0,0.2); overflow: auto; width: 400px; height: 550px; padding: 10px; overflow: auto;">
                   
                  <!--  DEBUT CONTENUS  --><br /> 
                  <!--  IMAGE SELLERIE  --> 
                  <div style="margin-top:-30px;">
                       [img]https://i11.servimg.com/u/f11/19/54/37/96/test14.png[/img] 
                  </div>
                   
                  <!--  1  --><span style="font-size: 10px!important; color: #000!important"></span> 
                  <div style="margin-top: 60px; font-size: 10px !important; color: rgb(0, 0, 0) !important;">
                      
                     <table cellspadding="5" cellspacing="2">
                           
                        <tbody>
                            
                           <tr>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 170px;">
                                      
                                 <div style="margin-top:-40px;">
                                      [img]https://i11.servimg.com/u/f11/19/54/37/96/licol_10.png[/img] 
                                    <div style="margin-top:-20px; margin-left: 70px;">
                                         Licol Vert 
                                    </div>
                                       
                                 </div>
                                  
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 70px;">
                                   [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   + 1 Concours 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   140 Zécus 
                              </td>
                               
                           </tr>
                            
                        </tbody>
                         
                     </table>
                      
                     <!--  2  --><span style="font-size: 10px!important; color: #000!important"></span> 
                     <table style="font-size: 10px !important; color: rgb(0, 0, 0) !important;" cellspadding="5" cellspacing="2">
                           
                        <tbody>
                            
                           <tr>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 170px;">
                                      
                                 <div style="margin-top:-40px;">
                                      [img]https://i11.servimg.com/u/f11/19/54/37/96/licol_11.png[/img] 
                                    <div style="margin-top:-20px; margin-left: 70px;">
                                         Licol Violet 
                                    </div>
                                       
                                 </div>
                                  
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 70px;">
                                   [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   + 1 Concours 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   140 Zécus 
                              </td>
                               
                           </tr>
                            
                        </tbody>
                         
                     </table><span style="font-size: 10px!important; color: #000!important"> 
                        <!--  4  --><span style="font-size: 10px!important; color: #000!important"></span></span> 
                     <table style="font-size: 10px !important; color: rgb(0, 0, 0) !important;" cellspadding="5" cellspacing="2">
                           
                        <tbody>
                            
                           <tr>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 170px;">
                                      
                                 <div style="margin-top:-40px;">
                                      [img]https://i11.servimg.com/u/f11/19/54/37/96/licol_12.png[/img] 
                                    <div style="margin-top:-20px; margin-left: 70px;">
                                         Licol Gris 
                                    </div>
                                       
                                 </div>
                                  
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 70px;">
                                   [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   + 1 Concours 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   140 Zécus 
                              </td>
                               
                           </tr>
                            
                        </tbody>
                         
                     </table><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"> 
                           <!--  5  --><span style="font-size: 10px!important; color: #000!important"></span></span></span> 
                     <table style="font-size: 10px !important; color: rgb(0, 0, 0) !important;" cellspadding="5" cellspacing="2">
                           
                        <tbody>
                            
                           <tr>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 170px;">
                                      
                                 <div style="margin-top:-40px;">
                                      [img]https://i11.servimg.com/u/f11/19/54/37/96/licol210.png[/img] 
                                    <div style="margin-top:-20px; margin-left: 70px;">
                                         Licol Bleu 
                                    </div>
                                       
                                 </div>
                                  
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 70px;">
                                   [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   + 1 Concours 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   140 Zécus 
                              </td>
                               
                           </tr>
                            
                        </tbody>
                         
                     </table><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"> 
                              <!--  6  --><span style="font-size: 10px!important; color: #000!important"></span></span></span></span> 
                     <table style="font-size: 10px !important; color: rgb(0, 0, 0) !important;" cellspadding="5" cellspacing="2">
                           
                        <tbody>
                            
                           <tr>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 170px;">
                                      
                                 <div style="margin-top:-40px;">
                                      [img]https://i11.servimg.com/u/f11/19/54/37/96/licols10.png[/img] 
                                    <div style="margin-top:-20px; margin-left: 70px;">
                                         Licol Rouge 
                                    </div>
                                       
                                 </div>
                                  
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 70px;">
                                   [img]https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img][img]https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png[/img] 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   + 1 Concours 
                              </td>
                               
                              <td style="background-color: rgba(0,0,0,0.2); width: 80px;">
                                   140 Zécus 
                              </td>
                               
                           </tr>
                            
                        </tbody>
                         
                     </table><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"><span style="font-size: 10px!important; color: #000!important"></span></span></span></span> 
                  </div><span style="font-size: 10px!important; color: #000!important"> </span> 
               </div>
                
               <!--  FIN CONTENU  --> 
               <!--  LIERE HAUT  --> 
               <div style="margin-top: -720px; margin-left: 330px;">
                    [img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img] 
               </div>
                
               <!--  -LIERE BAS--  --> 
               <div style="margin-top: 170px; margin-left: -380px; -webkit-transform: rotate(-180deg)">
                    [img]http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png[/img] 
               </div>
                
            </div>
             
         </div>
          
      </center>
       
      <!--  FIN FICHE BOUTIQUE I  --> 
   </div>
                
</div>
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,

La structure html de chaque fiche doit être ainsi :
Code:

    <center><br /><div class="M14_lierre_haut">
        <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div><br /><div>
   
      <div class="M14_livre"><br />
    <br /><br />
    <div class="M14_titre"> <br /><span>La Boutique du cordonnier</span></div>
    <div class="M14_background"><br />
    <div class="M14_Photo"><img src="https://i11.servimg.com/u/f11/11/26/21/37/cordon10.jpg"/></div>
    <div class="M14_cont">
    <table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;">  <img src="https://i11.servimg.com/u/f11/19/54/37/96/epone_10.png"/> <span>Éponge Jaune</span></td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style="width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 800 Zécus </td></tr></table>
    <table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge10.png"/> <span>Éponge Bleu</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style=" width: 80px;"> 100 Zécus </td></tr></table>
    <table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge13.png"/><span>Éponge Pêche</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
    <table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge14.png"/><span>Éponge Rose</span> </td><td style="width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table>
    <table cellspacing="2" cellspadding="5"> <tr><td class="M14_img"style="width: 170px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/eponge15.png"/><span>Éponge Verte</span> </td><td style=" width: 70px;"> <img src="https://i11.servimg.com/u/f11/19/54/37/96/20x2012.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/><img src="https://i11.servimg.com/u/f11/19/54/37/96/bloggi10.png"/> </td><td style=" width: 80px;"> + 1 Concours </td><td style="width: 80px;"> 40 Zécus </td></tr></table></div>
    </div>
    <div class="M14_lierre_bas">
    <img src="http://i37.servimg.com/u/f37/19/54/37/96/lierre12.png"/></div>
    </div></div></center>


A toi de changer le contenu



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Je ne comprend pas Milouze : / 
Je vais devoir tout ré-écrire ? : / 
Est ce que je doit juste changer les image du BBcode en HTML ou il y as autre chose a changer ? : / 
Je te souhaite une très agréable journée <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Sick.l.Offrande a écrit:Je ne comprend pas Milouze : / 
Je vais devoir tout ré-écrire ? : / 
Est ce que je doit juste changer les image du BBcode en HTML ou il y as autre chose a changer ? : / 
Je te souhaite une très agréable journée <3

Tout est expliqué ici Sandra:
https://www.milouze14.com/t30753-phpbb2-liste-d-onglet-dans-un-sujet-page-html#585560



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Merci beaucoup Milouze mais je ne comprend pas ce que je doit changer en faite je doit transformer tout mon bbcode en HTML ? :o 
Merci de tout coeur pour t'es réponses 
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Sandra,


Sick.l.Offrande a écrit:Merci beaucoup Milouze mais je ne comprend pas ce que je doit changer en faite je doit transformer tout mon bbcode en HTML ?

C'est exactement çà Sandra, chaque fiche (squelette) doit être identique clin oeil
Il faut juste changer les intitulés et images clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Hô d'accord j'ai enfin compris, merci beaucoup Milouze ^^ 
Je peut donc mettre en résolus =)
Merci de tout coeur ! 
Je te souhaite une très agréable journée et je te remercie encore mille fois!
Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
Excuse moi de te déranger encore une fois mais les ligne de texte se superpose quand je revient sur la page 1 : / Page 1 et 2
fascicularia
avatar
Administrateur

Messagefascicularia

  • 16px
  • 24px
  • Zoom
Bonjour Sick,
je viens de basculer le sujet qui apparemment avait été mis en résolu. Ton dernier soucis est-il réglé entre temps ?



Administrateur des forums



Sick.l.Offrande
avatar
Membre

MessageSick.l.Offrande

  • 16px
  • 24px
  • Zoom
fascicularia a écrit:Bonjour Sick,
je viens de basculer le sujet qui apparemment avait été mis en résolu. Ton dernier soucis est-il réglé entre temps ?

Oui il est résolus, merci beaucoup à toi <3
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum