AccueilDernières imagesRechercherS'enregistrerConnexion

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

Le Deal du moment : -34%
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 ...
Voir le deal
919 €

    (Frosty Blue) Présentation avec Onglets

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Dim 13 Nov 2016 - 18:48


    Ma demande



    Bonjour !

    Et oui, une autre :ange: !

    J'ai voulu coder une fiche de présentation récemment, mais mes ambitions ont été freinées net lorsque j'ai voulu y insérer des onglets. J'ai bien tenter d'assimiler le tutoriel de NyoTheNeko sur la question disponible ICI , mais rien n'y fait. Comme j'ai vu qu'une demande similaire avait été faite par un autre membre, j'ai pensé que je pourrais trouver le petit coup de pouce approprié.

    Un grand merci donc pour qui me tirera de ce mauvais pas Very Happy !


    Schéma(s) et Eléments
    La base : Voici un aperçu de ma fiche de présentation : ICI

    Et voici le code correspondant :

    Code:
    <div style="background-color: #; width: 600px ; padding-bottom: 20px; margin: 20px auto 20px auto;"><table><tr><td><div style="background-color: #; width: 260px; padding-top: 5px; margin: -3px 0 0 -3px; height: 250px;"><div style="font-family: 'Times New Roman'; font-size: 40px; color: #202020;">PRÉNOM</div><br /><div style="font-family: 'Times New Roman'; font-size: 72px; color: #668985; margin-top: 5px;">NOM</div><br /><br /><div style="font-family: 'Calibri'; font-size: 12px; color: #202020; text-align: justify; margin: 5px 5px 0 0;">« Hi ! Je m'appelle <i>Prénom Nom</i> et l'on me surnomme <i>Surnom</i>. Je suis né le <i>Date de naissance</i> à <i>Lieu de naissance</i>, ce qui me fait <i>Âge</i> ans. Je suis un <i>Homme / Femme</i>. Je suis <i>Hétéro / Homo / Bisexuel</i> et actuellement <i>Célibataire / En couple / Fiancé / Marié</i>. Mon principal défaut est <i>Défaut</i> et ma qualité majeure est <i>Qualité</i>. »</div></div><div style="background-color: #FFFFFF; width: 220px; padding: 10px 20px 10px 20px; margin: 5px 20px 0 -3px; height: 100px; box-shadow: 3px 3px 5px #202020; text-align: justify; overflow: auto;"> <div style="font-family: 'Calibri'; font-size: 12px; color: #202020;"><b>Groupes : </b>Les dictateurs anonymes<br /><b>Ambitions : </b>Régner sur le monde afin d'opprimer les joueurs en prônant un système de société basée sur le culte de ma géniale personnalité.</div></div></td><td><div style="background-color: #FFFFFF; width: 316px; margin: -5px 3px 0 0; height: 383px; box-shadow: 3px 3px 5px #202020;"><img src="lien" style="width: 310px; height: 240px; margin: 45px 3px 0 3px;" /><br /><br /><div style="text-align: justify; margin: 10px; font-family: 'Indie Flower'; font-size: 20px; font-weight: bold;">"Citation classe de la mort qui tue".</div><br /><div style="text-align: right; margin: -25px 20px 0 0; font-family: 'Calibri'; font-size: 15px; font-weight: bold;">Auteur</div></div></td></tr></table><div style="background-color: #FFFFFF; width: 460px; margin: 40px 0px 20px 0px; height: 725px; box-shadow: 3px 3px 5px #202020; text-align: justify; padding: 40px 70px 55px 70px; overflow: auto;"><div style="font-family: 'Cabin'; font-size: 14px; color: #668985;"><b>Description Physique</b><br /><br /></div><div style="font-family: 'Calibri'; font-size: 12px; color: #202020;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est. At alium insatiabilis tenet auaritia; alium in superuacuis laboribus operosa sedulitas; alius uino madet, alius inertia torpet; alium defetigat ex alienis iudiciis suspensa semper ambitio, alium mercandi praeceps cupiditas circa omnis terras, omnia maria spe lucri ducit; quosdam torquet cupido militiae numquam non aut alienis periculis intentos aut suis anxios; sunt quos ingratus superiorum cultus uoluntaria seruitute consumat; multos aut affectatio alienae formae aut suae querella detinuit; plerosque nihil certum sequentis uaga et inconstans et sibi displicens leuitas per noua consilia iactauit; quibusdam nihil quo cursum derigant placet, sed marcentis oscitantisque fata deprendunt, adeo ut quod apud maximum poetarum more oraculi dictum est uerum esse non dubitem: Exigua pars est uitae qua uiuimus. Ceterum quidem omne spatium non uita sed tempus est.

    Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente.</div></div><div style="font-size: 11px; margin-top: -60px; text-align: center; line-height: 12px; font-size: 10px; font-family: 'Times New Roman';"><a style="color: #B2B2B2;" href="http://www.never-utopia.com">©️ Never-Utopia</a><br /><span style="color: #668985;">Ju</span></div></div>

    Voici surtout le résultat escompté : ICI


    Tailles des éléments : Peu importe car si ce n'est que la mise en page, je saurais globalement m'en sortir.
    Effets voulus : J'aimerais avoir 4 onglets qui s'inséreraient juste avant la fameuse page blanche, soit juste après la balise < / table >. Au clic de la souris, on changerait d'onglet (j'aurais préféré un système de clic et pas seulement le fait de le survoler avec la souris / aucun souci pour insérer du Java) avec une animation de sorte que l'onglet sélectionner verrait les couleurs inversées : texte blanc devient gris, fond gris devient blanc. Détail qui a son importance pour moi même si j'ai conscience que c'est vraiment chipoter, j'aimerais que l'onglet sélectionné face corps avec la page (j'ai pensé qu'à l'animation, le border-bottom serait de couleur blanche, de manière à donner cette illusion ?).


    Ressources
    Aucune en particulier

    Autres précisions ?
    Non plus, sinon que je fais de très bons cookies.

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Mer 23 Nov 2016 - 8:47

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

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Sam 26 Nov 2016 - 14:17

    La demande reste d'actualité :ninjahug:

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Jeu 1 Déc 2016 - 17:38

    La demande est toujours ardemment suivie par son auteur :hehe:

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Dim 4 Déc 2016 - 8:06

    La quête des onglets farceurs se poursuit :hug:

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Mer 7 Déc 2016 - 4:35

    Toujours en attente ici :lovebomb:

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Mar 13 Déc 2016 - 7:33

    La demande est toujours d'actualité :pompom:

    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Sam 17 Déc 2016 - 11:42

    La demande est toujours en attente :musique:

    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 17 Déc 2016 - 13:10

    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.
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Sam 17 Déc 2016 - 15:10

    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 !

    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 17 Déc 2016 - 15:28

    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 Wink
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Sam 17 Déc 2016 - 15:33

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

    Merci pour ton aide !

    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 17 Déc 2016 - 17:23

    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.
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Mer 21 Déc 2016 - 7:19

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

    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Mer 21 Déc 2016 - 11:07

    Ç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,...)
    dorianchvr
    dorianchvr
    MasculinAge : 25Messages : 1

    Mer 21 Déc 2016 - 12:43

    EDIT EHAWEE : Merci de respecter les règles du forum et d'aller vous présenter !
    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Mer 21 Déc 2016 - 14:01

    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.

    Fortuna
    Fortuna
    FémininAge : 31Messages : 4636

    Mer 21 Déc 2016 - 14:09

    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





    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Mer 21 Déc 2016 - 21:51

    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>
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 13 Jan 2017 - 3:51

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



    Kanae
    Kanae
    FémininAge : 31Messages : 354

    Sam 14 Jan 2017 - 12:33

    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.

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 23:46