La demande est toujours d'actualités, amis codeurs .

La demande reste d'actualité

La demande est toujours ardemment suivie par son auteur

La quête des onglets farceurs se poursuit

Toujours en attente ici

La demande est toujours d'actualité

La demande est toujours en attente

Hello,

Bon je préfère te dire tout de suite que les onglets et moi c'est une longue histoire de haine donc je suis pas sûre de pouvoir t'aider x)

J'ose quand même pointer le bout de mon museau parce que je vois que personne de plus expérimenté ne se manifeste pour le moment (l'important c'est de participer, tout ça, tout ça).

BREF, pour en arriver à ce qui nous intéresse: la solution que j'utilise d'habitude pour faire un simili d'onglet c'est le hover mais pour ça tu as besoin de mettre ton css à part. L'intérêt est d'alléger la partie html mais aussi de te permettre plus de liberté au niveau des animations (enfin de la façon de je comprends tout ça). Je te mets l'idée en spoiler au cas où tu connaisses pas encore.

CSS à part:

Pour ce qui est du hover ça ne te fera pas des onglets à proprement parler mais ça peut te permettre d'avoir plusieurs pages superposées si on peut dire ça comme ça. Je ne sais pas si la solution t'intéresses mais si c'est le cas je peux essayer de te fournir avec un squelette des faux onglets. Par contre j'ai un mini souci d'ordi donc je suis pas sure de pouvoir m'en occuper aujourd'hui.

Bonjour !

Mais c'est en effet très bien de participer ! Au contraire, je suis contente qu'on se propose de m'aider donc merci à toi pour t'être manifesté.

La raison pour laquelle je n'ai pas utilisé de class, c'est que... aucune en fait, juste que j'aime bien coder tout d'un bloc pour ensuite créer les class. Donc mettons cela sur le compte de la flemme. Dans la version finale de la fiche, ce sera fait néanmoins pour rendre les choses plus claires.

Pour ce qui est de ton idée des faux onglets, je suis un peu dubitative, parce que je n'ai pas réellement d'idée du rendu. J'ai cru saisir le principe et dans l'absolu, ça me conviendrait. J'ai juste une question : est-ce qu'il faudra nécessairement garder le curseur sur l'onglet pour que la page apparaisse où est-ce que le curseur pourra se déplacer sur la page ? (comme celle-ci est prévue pour être assez longue, je ne voudrais pas que le système gène la lecture).

S'il peut le faire, je suis partante pour ta solution !

Alors non, pour être pratique quand on fait un onglet en hover on fait en sorte que la page reste active quand elle est survolé elle aussi. En fait il y a une zone qui comprend l'onglet et la page qui permet de garder la page activée lorsqu'elle est survolée. Ça te permet par exemple d'avoir une barre de défilement sur ton texte si tu le souhaites.

Je vais bosser sur le squelette comme ça tu auras au moins une idée du rendu. Et puis si quelqu'un qui sait faire de vrais onglets se présente au moins on aura passé le temps

Okay, si on peut bouger sur la page, ça me semble très bien.

Merci pour ton aide !

Bon, c'est très moche et assez brouillon mais à priori ça marche et tu vas pouvoir voir ce que ça donne.

Ce qui s'appelle 'page de base' correspondrait plus ou moins à ton 'onglet 1' puisque c'est ce qui apparait par défaut lorsqu'aucun onglet n'est activé. Tu peux ensuite rajouter des onglets à loisirs. J'en ai mis deux pour le moment mais rien n'empêche d'en mettre plus.

J'ai conscience que le code est pas des plus clairs donc si tu as besoin d'explications ou d'aide sur quoi que ce soit n'hésite pas. Je te laisse le code en dessous comme ça tu pourras regarder tout ça de plus près. Si tu as envie de l'utiliser, sache qu'il faut pas mal jouer sur les dimensions et les positions donc si tu changes la taille par exemple il faudra que tu modifies les positions. Pareil si tu veux rajouter un onglet. Donc voila, si tu as besoin d'aide ou que tu veux que je le modifie pour l'intégrer à ta fiche surtout n'hésite pas. Je reste dispo.

Code:

<div class="page-box"><div class="page0">La page de base

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?</div><div class="onglet1"><div class="onglet">Onglet 1</div>
<div class="page">La première page

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div><div class="onglet2"><div class="onglet">Onglet 2</div>
<div class="page">La deuxième page

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div>
</div>

<style type="text/css"> .page-box {width: 500px; height: 400px; box-sizing: border-box; overflow: hidden; position: relative; margin: auto; box-shadow: 3px 3px 2px grey, 4px 4px 4px silver; border: 1px silver solid;} .page0 {width: 500px; height: 400px; box-sizing: border-box; padding: 15px; z-index: 1; position: relative; margin-top: 28px;} .onglet {width: 70px; box-sizing: border-box; padding: 7px; font-size: 12px; background: lightgrey; color: white; position: relative; transition: 1s; text-align: center; height: 28px; left: -5px;} .page {box-sizing: border-box; width: 500px; height: 400px; padding: 15px; background: white; text-align: justify; position: relative; transition: 1s; opacity: 0; left: -500px;} .onglet:hover {background: white; color: grey; transition: 1s;} .onglet1 {width: 70px; position: relative; transition: 1s; top: -428px; z-index: 4;} .onglet1:hover .page {left: 0px; padding: 15px; opacity: 1; overflow: auto; transition: 1s;} .onglet1:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 {width: 70px; position: relative; transition: 1s; top: -856px; z-index: 3;} .onglet2:hover .page {left: 0px; padding: 15px; opacity: 1; overflow: auto; transition: 1s;} .onglet2:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 .onglet {left: 66px;}
</style>

EDIT: J'ai remanié un peu le code pour enlever les éléments inutiles. Je sais pas si j'ai tout vu mais ça allège un peu en tout cas.

Hello !

Ta réponse avait été avalée par l'espace-temps qui l'avait soustraite à mon regard, mais désormais tout est rentré dans l'ordre.

Moi je trouve ça très bien ! Il y a juste la transition qui ne me fait pas sauter de joie parce que j'aimerais que ce soit sec, dans le sens où il n'y aurait pas de transition en fait. En allant sur l'onglet, paf, la page suit sans petit déplacement latéral mais tout d'un coup. Pas sûre que je sois très claire...

Sinon, ce genre de choses m'ira très très bien, merci .

Ça peut se faire facilement, il suffit d'enlever les transition. Je les ai mises parce que je suis accro aux effets de transitions x)

Je t'ai mit le code à jour, tu peux voir le nouvel effet ici. Tes pages arrivent sans transition du coup mais je les ai laissées sur les onglets. Si tu veux que ça aussi ce soit direct il te suffit simplement d'éliminer les

Code:

transition: 1s;

Et voici le code retouché:

Code:

<div class="page-box"><div class="page0">La page de base

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?</div><div class="onglet1"><div class="onglet">Onglet 1</div>
<div class="page">La première page

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div><div class="onglet2"><div class="onglet">Onglet 2</div>
<div class="page">La deuxième page

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div>
</div>

<style type="text/css"> .page-box {width: 500px; height: 400px; box-sizing: border-box; overflow: hidden; position: relative; margin: auto; box-shadow: 3px 3px 2px grey, 4px 4px 4px silver; border: 1px silver solid;} .page0 {width: 500px; height: 400px; box-sizing: border-box; padding: 15px; z-index: 1; position: relative; margin-top: 28px;} .onglet {width: 70px; box-sizing: border-box; padding: 7px; font-size: 12px; background: lightgrey; color: white; position: relative; transition: 1s; text-align: center; height: 28px; left: -5px;} .page {box-sizing: border-box; width: 500px; height: 400px; padding: 15px; background: white; text-align: justify; position: relative; opacity: 0; left: -500px;} .onglet:hover {background: white; color: grey; transition: 1s;} .onglet1 {width: 70px; height: 28px; position: relative; transition: 1s; top: -428px; z-index: 4;} .onglet1:hover .page {left: 0px; padding: 15px; opacity: 1; overflow: auto;} .onglet1:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 {width: 70px; height: 28px; position: relative; transition: 1s; top: -456px; z-index: 3;} .onglet2:hover .page {left: 0px; padding: 15px; opacity: 1; overflow: auto;} .onglet2:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 .onglet {left: 66px;}
</style>

Si cet effet te convient est-ce que tu veux que je te le retravaille pour l'intégrer à ta fiche? (rajouter un onglet, faire les effets,...)

EDIT EHAWEE : Merci de respecter les règles du forum et d'aller vous présenter !

Bonjour Dorianchvr,

Cette demande n'est pas adaptée sur un forum comme Never-Utopia qui n'est pas un site de job-dating mais d'entraide, basé sur le volontariat et la gratuité. Je pense que quelqu'un passera donc supprimer ce message tout à fait inadapté, en particulier lorsqu'il a lieu sur la demande de quelqu'un. Il me semble que c'est le comble de l'impolitesse.


Pour te répondre Frosty, ce code me semble parfait et répond tout à fait à mes besoins. Ton aide est également acceptée avec plaisir pour tenter d'intégrer le système d'onglet à mon codage initial ! Toutefois, si tu n'avais pas le temps, je me chargerais de le faire, ne t'inquiète pas.

Bonjour,

Je me permets de passer ici pour dorianchvr ; pardon pour l'interruption de commande !

dorianchvr, il serait bon que tu ailles d'abord te présenter avant de poster sur le forum (rubrique présentation). Au niveau des commandes, ensuite, le forum ne prend pas de commande à visée professionnelle, il te faudra donc chercher ailleurs si tel est ce que tu cherches ; Never-Utopia est un site amateur qui n'empiète pas sur les plates-bandes des gens de métier.
En dernier lieu, pour ton recrutement, ce n'est pas du tout le lieu ; ce sujet est dédié à la commande de Kanae prise en charge par Frosty Blue !

Une bonne fin de journée

Hello Kanae,

Je suis ravie d'avoir pu te venir en aide malgré mes capacités limitées et mon inaptitude à créer des onglets valides! Pour ce qui est de l'intégration à ton code, je suis désolée je n'ai pas vu ton message plus tôt et du coup j'ai grillé l'occasion de te faire ça aujourd'hui! Comme je voyage toute la journée demain et que je rentre enfin chez moi je t'avoue que je ne sais pas trop quand je pourrais m'y mettre...

Du coup ce que je t'ai fait pour m'excuser (et en vitesse je l'avoue) c'est t'ajouter le troisième onglet et t'appliquer les différents styles pour cette partie que j'ai récupéré dans ton code d'origine. Je ne sais pas si tout conviendra...j'espère avoir modifié un maximum...

Je suis encore désolée de ne pas pouvoir faire plus pour le moment mais j'essaierais de rester dispo au cas où tu ais besoin de mon aide pour plus de modifications.

Code:

<div class="page-box"><div class="page0"><div class="page-titre">La page de base</div>

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

Quam ob rem id primum videamus, si placet, quatenus amor in amicitia progredi debeat. Numne, si Coriolanus habuit amicos, ferre contra patriam arma illi cum Coriolano debuerunt? num Vecellinum amici regnum adpetentem, num Maelium debuerunt iuvare?</div><div class="onglet1"><div class="onglet">Onglet 1</div>
<div class="page"><div class="page-titre">La première page</div>

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div><div class="onglet2"><div class="onglet">Onglet 2</div>
<div class="page"><div class="page-titre">La deuxième page</div>

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div><div class="onglet3"><div class="onglet">Onglet 3</div>
<div class="page"><div class="page-titre">La troisième page</div>

Tu autem, Fanni, quod mihi tantum tribui dicis quantum ego nec adgnosco nec postulo, facis amice; sed, ut mihi videris, non recte iudicas de Catone; aut enim nemo, quod quidem magis credo, aut si quisquam, ille sapiens fuit. Quo modo, ut alia omittam, mortem filii tulit! memineram Paulum, videram Galum, sed hi in pueris, Cato in perfecto et spectato viro.

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

Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
</div></div>
</div>

<style type="text/css"> .page-box {width: 600px; margin: 40px 0px 20px 0px; height: 820px; box-sizing: border-box; overflow: hidden; position: relative; box-shadow: 3px 3px 5px #202020; border: 1px silver solid;} .page0 {width: 600px; height: 820px; box-sizing: border-box; padding: 15px; z-index: 1; position: relative; margin-top: 28px; overflow: auto; padding: 40px 70px 55px 70px; text-align: justify; font-family: 'Calibri'; font-size: 12px; color: #202020;} .onglet {width: 70px; box-sizing: border-box; padding: 7px; font-size: 11px; font-weight: bold; background: lightgrey; color: white; position: relative; transition: 1s; text-align: center; height: 28px; left: -5px; text-transform: uppercase;} .page {box-sizing: border-box; width: 600px; height: 820px; overflow: auto; padding: 40px 70px 55px 70px; background: white; text-align: justify; position: relative; opacity: 0; left: -600px; font-family: 'Calibri'; font-size: 12px; color: #202020;} .onglet:hover {background: white; color: grey; transition: 1s;} .onglet1 {width: 70px; height: 28px; position: relative; transition: 1s; top: -849px; z-index: 4;} .onglet1:hover .page {left: 0px; opacity: 1; overflow: auto;} .onglet1:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 {width: 70px; height: 28px; position: relative; transition: 1s; top: -877px; z-index: 3;} .onglet2:hover .page {left: 0px; opacity: 1; overflow: auto;} .onglet2:hover .onglet {background: white; color: grey; transition: 1s;} .onglet2 .onglet {left: 66px;} .onglet3 {width: 70px; height: 28px; position: relative; transition: 1s; top: -905px; z-index: 3;} .onglet3:hover .page {left: 0px; opacity: 1; overflow: auto;} .onglet3:hover .onglet {background: white; color: grey; transition: 1s;} .onglet3 .onglet {left: 137px;} .page-titre {font-family: 'Cabin'; font-size: 14px; color: #668985;}
</style>

Kanae, tu as vu la réponse de Frosty Blue? Est-ce que je peux fermer ce sujet?

Salut Onyx !

J'ai vu sa réponse, effectivement. Mais je suis temporairement absente, je n'ai pas eu le temps d'y répondre. Je pense que tu peux néanmoins classer le sujet. Merci à toi.